js 클로저

클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다.

모듈 정의

// myModule.js
let x = 5;
export const getX = () => x;
export const setX = (val) => {
	x = val;
};

import 로 불러오기

import { getX, setX } from "./myModule.js";
console.log(getX()); // 5
setX(6);
console.log(getX()); // 6

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

이 예제에서, 단일 인자 x를 받아서 새 함수를 반환하는 함수 makeAdder(x)를 정의합니다. 반환되는 함수는 단일인자 y를 받아서 x와 y의 합을 반환합니다.


본질적으로, makeAdder는 함수를 만들어내는 팩토리입니다. 이는 makeAdder함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미합니다. 위의 예제에서, 함수 팩토리는 인자에 5와 10을 더하는 두 개의 새로운 함수들을 만들어 냅니다.

add5와 add10은 둘 다 클로저입니다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장합니다. 함수 실행 시 add5의 어휘적 환경에서, 클로저 내부의 x는 5 이지만, add10의 맥락적 환경에서 x는 10입니다.