[JavaScript] 클로저 (Closure)

오늘은 클로저 (Clsure)에 대해서 공부했다. 클로저는 외부 함수의 변수에 접근이 가능한 내부 함수로 함수 안에 함수가 있는 형태이다. 외부 함수에서 내부 함수를 리턴 시켜줄 수 있기 때문에 내부 함수로 값이 저장이 가능하다. 또한 접근 범위를 지정해 줄 수 있어서 private 지정자처럼 사용이 가능하다. (객체 지향 프로그래밍의 특징 중 하나인 은닉성과 연관 지을 수 있다.)

 

함수의 외부에서는 내부로 접근이 불가능하지만 내부에서는 외부에 선언된 변수를 참조할 수 있기 때문에 유용하게 사용이 가능하다. 또한 클로저는 마치 객체처럼 사용이 가능하다. 

 

function myUser(name, age){
  return function addUser() {
    console.log(`이름은 ${name} 이고, 나이는 ${age} 입니다.`);
  }
}

let leo = myUser('leo', 25); 
console.log(leo()); // 이름은 leo 이고, 나이는 25 입니다.

let abc = myUser('abc', 12);
console.log(abc());

 

이렇게 값을 할당 시켜 줄 수도 있다. 

 

또한 외부함수의 값을 고정시켜서 사용할 수 도 있는데

 

커링(함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인수를 받게 함)을 통해서 한 번 알아보겠다.

 

function myUser(name, age){
  return function addUser(addAge) {
    console.log(`이름은 ${name} 이고, 나이는 ${age + addAge} 입니다.`);
  }
}

let leo = myUser('leo', 25); 
console.log(leo(-5)); // 이름은 leo 이고, 나이는 20 입니다.
console.log(leo(3)); // 이름은 leo 이고, 나이는 28 입니다.
console.log(leo(5)); // 이름은 leo 이고, 나이는 30 입니다.

leo라는 값은 고정시킨 채 age 값만 변화시켰다.

 

 

클로저 모듈 패턴을 이용하면 변수를 스코프 안 쪽에 가두어 함수 밖으로 노출시키지 않고도 변수에 접근이 가능한데 이를 통해 private 지정자처럼 사용이 가능하다.

 

function myNum(){
  let privateNum = 0; // 함수 외부에서 값 변경 불가
  let obj = {
  	plus : function(){
      privateNum += 1;
    },
    minus : function(){
      privateNum -= 1;
    },
    getNum : function(){
      return privateNum;
    }
  };
  return obj;
}

let num1 = myNum();
num1.plus();
num1.minus();
num1.minus();
num1.getNum(); // -1

let num2 = myNum();
num2.plus();
num2.plus();
num2.getNum(); // 2

 

두 변수가 각각 다른 값을 가리키면서 privateNum에 직접적으로 접근하지 않고 간접적으로 접근하고 있다.