자바스크립트 클로저 Closure

📌  일단 Lexical Scope? Dynamic Scope?

 

◾ Lexical Scope

 

함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 )

 

◾ Dynamic Scope

 

함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 )

 

// 01 Lexical Scope와 Dynamic Scope 비교

let x = 1;

function print() {
  console.log(x);  // Lexical Scope : 1   -> 선언된 위치 기준 / 변수 x 전역 스코프
}

function foo() {
  let x = 100;
  print();         // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프
}

foo();

 

// 02 내부 함수의 Scope Chain

let name = "kim";

function init() {
  let name = "Lee";           // name은 init에 의해 생성된 지역 변수이다.
  function displayName() {    // displayName()은 내부 함수이며, 클로저다.
    alert(name);              // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}

init();  // "Lee"

 

자바스크립트는 Lexical Scope를 사용한다.

따라서, 함수나 변수가 선언된 위치를 기준으로 한 겹 한 겹 스코프를 벗겨 나가면서 그 내부에 선언된 변수를 찾는다.

위 예시로 보면, 자신의 scope -> 자신을 포함하는 외부 함수 scope(여기선 init) -> 전역 scope 순으로 변수를 찾게 된다.

이렇게 일치하는 변수를 찾을 때까지 스코프를 벗겨나갈 수 있는 이유는 Scope Chain 때문이다.

 

 

📌  클로저?

 

자신이 생성된 시점의 환경을 기억하는 함수

-->  외부 함수 호출이 종료되었음에도 외부 함수의 변수나 인자에 접근할 수 있는 함수 !!

 

// 03 클로저 예시

let x = 1;

function outer(z) {
  let y = 2;
  return function inner() {
    console.log(x + y + z);
  }
}

let sum = outer(3);
sum();

 

변수 sum은 outer(3)으로 인해 내부 함수( inner( ) )를 리턴받는다.

그리고는 sum( )에 의해 해당 내부 함수( inner( ) )를 호출한다.  -->  최종적으로 출력되는 값은 6 !!!

 

왜? Why????

 

변수 sum이 할당받은 것은 리턴된 내부 함수 inner( ) 다.

상식적으로 보면 inner 함수 내부에는 x, y가 선언되어 있지 않기 때문에 NaN가 나올것만같다.

그런데 sum( )은  6을 반환한다. inner 함수가 (이미 실행이 종료된) outer 함수의 변수 y와 z에 접근했다는 것을 뜻한다 !!

즉즉즉즉 inner 함수는 Scope Chain을 가지고 있기 때문에 outer 함수의 변수 y, z를 참조할 수 있다 !! 

 

위 예시의 inner처럼 외부 함수가 종료되었음에도 Scope Chain을 이용해 외부 함수의 변수, 인자에 접근할 수 있는 함수를

Closure 클로저 라고 부른다.

 

 

📌  클로저 확인

 

값이 저장되고 있나 ? 도대체 어디에 ? 확인하는 방법

console.dir( ) 활용하기

 

let x = 1;

function outer(y) {
  let z = 3;
  return function middle(m) {
    let p = 5;
    return function inner() {
      console.log(x + y + z + m + p);
    }
  }
}

let middle = outer(2);
let inner = middle(4);
console.dir(inner);

// 결과

 

 

// middle 함수의 변수와 인자를 inner 함수가 사용하지 않았을 때

let x = 1;

function outer(y) {
  let z = 3;
  return function middle(m) {
    let p = 5;
    return function inner() {
      console.log(x + y + z);
    }
  }
}

let middle = outer(2);
let inner = middle(4);
console.dir(inner);

// 결과

 

 

 

결과를 보면 inner 함수의 Scope Chain에서 middle에 대한 정보는 없다.

즉 Scope Chain은 내부 함수가 사용하는 정보에 대해서만 유지한다는 것을 알 수 있다 ~!~!