[JS]Closures(클로저)

함민혁·2024년 8월 5일

Closures 클로저

Closures

기술질문

클로저가 뭔가요?

클로저는 함수와 그 함수가 정의된 렉시컬 환경이 결합된 상태를 말합니다.
이 상태로 인해 함수는 자신이 정의될 당시의 변수를 기억하고, 그 변수에 접근할 수 있는 것입니다.

MDN 공식 문서

클로저는 함수와 그 함수가 선언된 주변 상태(렉시컬 환경, 그 환경에 있는 변수들)를 함께 묶은 조합임.
쉽게 말해 클로저는 내부함수가 외부함수의 스코프에 접근할 수 있게 해주는 메커니즘임.

자바스크립트에서는 함수가 생성될 때마다 클로저가 만들어진다고 보면됨.

일단 렉시컬 스코핑에 대해 가볍게 알아보자

렉시컬 스코핑은 자바스크립트가 변수를 찾는 방식임.

함수가 정의된 위치에 따라 변수의 스코프가 결정되고, 함수가 실행될 때, 해당 함수가 어디에서 정의되었는지에 기반에 외부 변수에 접근 가능함.

이런 접근 가능성은 함수가 호출되는 시점이 아니라 정의되는 시점에 결정됨

클로저는 다음 세가지 요소가 결합된 상태

내부 함수 : 외부 함수의 스코프 안에서 정의된 함수

외부 함수의 변수: 내부 함수가 접근할 수 있는 외부 함수의 변수들

환경 : 내부 함수가 정의될 때의 외부 함수의 스코프

클로저의 주요 포인트

내부 함수가 외부 함수의 변수를 참조할 수 있어야함

외부함수의 실행이 끝난 후에도 변수 접근이 유지됨

외부함수의 실행이 끝난 후에도 변수 접근이 유지됨:

일반적인 함수는 실행이 끝나면 메모리에서 해당 함수의 스코프 및 변수는 사라짐.
하지만 외부함수의 변수를 내부함수가 참조한 형태에서는 외부함수의 호출이 끝난 후에도, 내부함수(클로저)가 외부함수의 스코프를 계속 참조하고 있으므로, 메모리에서 사라지지 않음

⇒ inner함수가 outer함수 변수 참조하고 있어서, outer함수 실행이 끝난 뒤에도 outer함수의 변수들을 기억하고 있다는 뜻

클로저 작동 예제1

function outer() {
  let outerVar = "I am outside!";
  
  function inner() {
    console.log(outerVar); // innerFunction이 외부 함수의 변수에 접근
  }
  
  return inner; // 클로저를 반환
}

const myClosure = outer(); // outer 실행 후 innerFunction 반환
myClosure();

outerFunction의 실행이 끝난 후에도 innerFunction이 outerVar을 계속 참조할 수 있기 때문에 클로저가 형성돼.

클로저 작동 예제2

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