[javascript] 클로저(closure)

부모 함수 안에서 자식 함수를 정의하면, 자식 함수를 어디에서 호출하는지에 관계없이, 자식 함수는 부모 함수의 변수에 접근할 수 있다.

<예시1>

let l0 = 'l0';
function fn2() {
  let l2 = 'l2';
  console.log(l0, l1, l2) // Reference error: l1 is not defined
  }
function fn1() {
  let l1 = 'l1';
  console.log(l0 , l1); // l0, l1
  fn2();
  }
  fn1();

<예시2>

let l0 = 'l0';
function fn1() {
  function fn2() {
    let l2 = 'l2';
    console.log(l0, l1, l2) // l0, l1, l2 
    }
    let l1 = 'l1';
    console.log(l0 , l1); // l0, l1
    fn2();
}
fn1();

<예시1>에서 fn1 함수 내에서 fn2 함수를 호출하였기 때문에,
fn1이 부모 함수처럼 동작하는 것처럼 보인다.
그러나 fn2 함수에서는 fn1 함수에서 선언된 l1의 값에 접근할 수 없기 때문에 console.log(l0,l1,l2)를 하면 Reference Error가 출력된다.

<예시2>에서는 fn1 함수 내에서 fn2 함수를 '정의'하였다.
fn1 함수는 부모 함수처럼 동작하고, fn2 함수는 자식 함수처럼 동작한다.
이 때, 자식 함수는 부모 함수의 변수에 접근할 수 있다.
따라서 fn2 함수 내에서 console.log(l0,l1,l2)를 하면 l0,l1,l2 값이 출력된다.

함수의 호출은 매우 동적이다. 호출은 어디에서든 할 수 있기 때문이다.
따라서 <예시1>에서 만약, 함수의 호출에 따라 유효범위가 결정됬다면 이것은 동적 스코프(dynamic scope)에 해당하는 상황이다.

반면 함수의 정의는 정적이다. 함수는 한번 정의 되면 다른 곳에서 정의될 필요가 없기 때문에 처음 정의된 그 자리에만 있기 때문이다.
따라서 함수의 정의에 의해 유효범위가 결정되는 것은 정적 스코프(static scope)에 해당하는 상황이다. 정적 스코프는 어휘적 스코프(lexical scope)라고도 한다.
자바스크립트는 정적 스코프를 채택하고 있다.

클로저의 활용

부모 함수의 변수에 어떤 값이 할당되면,
자식 함수의 closure scope에 그 값이 저장되어,
언제든지 꺼내서 사용할 수 있다.