클로저(Closures)

이일우·2023년 3월 30일

공부하기

목록 보기

27/42

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. -MDN-

이 말을 이해할 수 있는 사람이 얼마나 있을까요?
저는 지금도 저 말만 본다면 이해하기가 쉽지 않습니다. 이 말을 풀어서 이해하고 클로저가 무엇인지 알아보도록 합니다.

어휘적 환경(Lexical Environment)

클로저의 설명에서 가장 이해하기 힘든 부분이 이 어휘적 환경입니다.
어휘적 환경이란 변수, 함수, 객체 등이 선언된 위치와 그들의 상위 범위(Scope)를 기억하고 있는 데이터 구조를 말합니다.
예제를 봅시다.

let a = 10;

function sum() {
  let b = 20;
  return a+b
}
console.log(sum()) //30

위 예제를 보면 함수 sum은 자신이 가지고 있지 않는 변수a를 사용하고 있습니다. 이때 sum 함수가 선언된 위치를 기준으로 변수a를 사용하기 위해 상위 스코프를 참조하기 때문에, sum 함수는 어휘적 환경 개념을 활용하고 있습니다.

클로저(Closures)

클로저를 이제 좀 더 쉽게 풀어쓰면

클로저는 내부 함수가 외부 함수의 변수를 참조할 수 있는 것

이라고 할 수 있겠습니다.
그렇다면 클로저는 어떻게 사용할까요?

function outerFunction() {
  let value = 1;

  function innerFunction() {
    console.log(value);
  }

  return innerFunction;
}

var innerFunc = outerFunction();
innerFunc(); // 1

대표적인 클로저의 예제입니다. 외부 함수는 내부 함수를 리턴하고, 내부함수에서는 외부함수의 변수를 참조하고 있어야 합니다. 이 경우 outerFunction은 innerFunction이라는 내부 함수를 리턴하고, innerFunction에서 outerFunction에서 선언한 value를 사용하고 있습니다.

클로저 특징

결국 클로저는 다음과 같은 특징을 가지고 있습니다.

내부 함수에서 외부 함수의 변수에 접근할 수 있다.
클로저는 외부 함수의 변수를 참조하고 있는 내부 함수와 함께 생성된다.
클로저는 외부 함수가 종료된 후에도 내부 함수에서 사용할 수 있다.
클로저는 메모리를 점유할 수 있다.
클로저는 함수의 반환값으로 사용될 수 있다.

클로저의 사용 이유

정보 은닉

정보 은닉을 통해 객체의 내부 데이터를 외부에서 직접 접근할 수 없게 하고, 메소드를 통해만 데이터를 조작할 수 있게 합니다. 이때 클로저를 활용하면, 객체의 내부 데이터에 접근할 수 없도록 숨기고, 메소드를 통해만 데이터를 조작할 수 있도록 만들 수 있습니다.

function counter() {
  let count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    
  };
}

var c = counter();
c.increment(); // 1
c.increment(); // 2