클로저와 클로저를 활용한 private 변수, getter/setter

🚀 내부함수와 외부함수

 

내부함수는 외부함수의 변수에 접근하여 사용할 수 있습니다. 이는 스코프 체이닝 때문입니다.

inner 함수 내부의 스코프에 title이 없기 때문에 가장 가까운 스코프인 outer의 title을 사용합니다.

function outer() {
  // outer에 정의된 title
  const title = "coding everybody";
  
  function inner() {
  
    // 외부 함수에 정의된 변수에 접근 가능함
    console.log(title);
  }
  
  inner();
}

outer();

 

 

🚀 클로저(closure)

 

function outer() {
  const title = "coding everybody";
  return function () {
    console.log(title);
  };
}

inner = outer();
inner();

 

위 함수에서 outer();로 인해 호출된 함수가 inner에 할당되었습니다. inner는 이제 함수입니다.

inner를 실행하면 "coding everybody"가 출력됩니다.

 

여기서 의문은, 이미 outer가 리턴된 시점에서 변수인 title은 없어져야 하는 것이 아닌가? 입니다.

외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다. 

 

 

 

🚀 클로저를 활용한 getter와 setter, private 변수화

 

다음과 같이 작성하면 title 변수를 수정할 수 있는 것은 set_title이라는 메서드를 통해서만 가능하게 된다.

직접적으로 수정할 수 없는 것이 되므로 title을 일종의 private 변수처럼 사용할 수 있게 된다.

function factory_movie(title) {
  return {
    get_title: function () {
      return title;
    },
    set_title: function (_title) {
      title = _title;
    },
  };
}
ghost = factory_movie("Ghost in the shell");
matrix = factory_movie("Matrix");

console.log(ghost.get_title()); // Ghost in the shell
console.log(matrix.get_title()); // Matrix

ghost.set_title("공각기동대");

console.log(ghost.get_title()); // 공각기동대
console.log(matrix.get_title()); // Matrix

 

 

 

* tip

 

아래와 같이 사용하면, 외부 함수의 변수인 i를 참고하기 때문에 5를 출력하게 된다.

const arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = function () {
    console.log(i);
  };
}

arr[0](); // 5

 

함수로 한번 더 감싸고, 즉시 실행하는 방식으로 내부 함수에게 변수를 전달해줘야 한다.

const arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = (function (id) {
    return function () {
      console.log(id);
    };
  })(i);
}

arr[0](); // 5

 

 

스코프/클로저/getter/setter에 대한 지식을 위해 다음 글을 읽어보자.

 

 

[번역] 자바스크립트 스코프와 클로저(JavaScript Scope and Closures)

 

 

JavaScript - 접근자 프로퍼티 (getter, setter)