[JS] Closure 클로저

 

 

자바스크립트는 어휘적 환경을 갖는다.

 

어휘적 환경 Lexical Environment

let one; // undefined
one = 1; // 1

function addOne(num) {
  console.log(one + num);
}

addOne(5); // 6

// 전역 Lexical 환경
// one : 1
// addOne : function

// ^ 전역 Lexical 환경을 참조함 !!! 참조 순서 : 내부 > 외부 > 전역
// 내부 Lexical 환경
// num : 5

function makeAdder(x) {
  return function (y) { // y를 가지고 있고, 상위함수인 makeAdder의 x에 접근 가능
    return x + y;
  };
}

const add3 = makeAdder(3);
console.log(add3(2)); // 5

// 전역 Lexical 환경
// makeAdder : function
// add3 : function

// ^ 전역 Lexical 환경 참조 !
// makeAdder Lexical 환경
// x : 3

// ^ makeAdder Lexical 환경 참조 !
// 익명함수 Lexical 환경
// y : 2

console.log(add3(2));

여기서 add3 함수가 생성된 이후에도, makeAdder x에 접근이 가능하다

✳️ ⬆️ 이런게 CLOSURE!!

- 함수와 렉시컬 환경의 조합

- 함수가 생성될 당시의 외부 변수를 기억한다.

- 생성 이후(함수 종료)에도 계속 접근이 가능하다.

function makeCounter() {
  let num = 0; // counter에겐 외부 함수의 변수

  return function () {
    return num++;
  };
}

let counter = makeCounter(); // makeCounter의 return 값인 함수

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

 

 

 

🔗 https://youtu.be/tpl2oXQkGZs?si=14ehhoPzBnv7jrOr