클로저

클로저(Closures)

우리가 함수 안에서 또 다른 함수를 만들 때마다 사실 우리는 클로저를 만든겁니다.

안쪽 함수가 클로져입니다.

 

🔥 어떠한 함수 안에 내부 함수를 정의한다면, 이 함수는 클로저라고 불릴 수 있습니다. 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 실현이 불가능하다는 개념이다.

 

실행컨텍스트, 스코프 체이닝, 렉시컬 스코핑와 관련됨!

function outerFunction () {
	const outer = `I see the outer variable!`;

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

  	return innerFunction;
}

outerFunction()(); // I see the outer variable!

• 클로저는 바깥 함수의 변수에 접근할 수 있기 때문에 주로 두가지 이유로 쓰인다.(주: 사이드 이펙트란 어떤 함수 내에서 자신의 스코프가 아닌 변수들을 제어하는 것을 말합니다.)
  • 1. 사이드 이펙트(side effects)를 제어하기 위해서
  • 2. private 변수를 만들기 위해서

 

예제) 케이크의 맛 정하고 만들기

• 우리는 케이크의 맛을 안 뒤에 바로 만들고 싶지는 않다
• 시기가 적절할 때 만들고 싶다는 것입니다.
• 이 문제를 해결하기 위해, 우리는 우리의 맛을 저장할 수 있는 prepareCake 함수를 작성할 수 있습니다.
• 그 후 prepareCake 내부에 makeCake 클로져를 반환할 수 있습니다.

지금부터 우리가 원할 때마다 반환된 함수를 1초 안에 불러올 수 있습니다.

function prepareCake (flavor) {
  return function () {
    setTimeout(_ => console.log(`Made a ${flavor} cake!`), 1000);
  }
}

// 맛먼저 설정해 놓기
const makeCakeLater = prepareCake('banana!');

// Made a banana cake!
makeCakeLater();

 

 

클로저로 private 변수 만들기

지금까지 배워 알고 있듯, 함수 내부에서 만들어진 변수는 바깥 변수에서 접근할 수 없습니다.

이러한 이유로 그 변수들은 private 변수라고 불립니다.

하지만, 때때로 우리는 private 변수에 접근할 필요가 있습니다. 우린 클로저를 이용하여 private 변수에 접근할 수 있습니다.

function secret (secretCode) {
  return {
    saySecretCode () {
      console.log(secretCode);
    }
  }
}

const theSecret = secret('CSS Tricks is amazing');
theSecret.saySecretCode()
// 'CSS Tricks is amazing'

위 예제에서 saySecretCode는 유일하게 기존 secret 함수 밖에서 secretCode를 노출하는 함수입니다.

보통 이러한 경우, 이 함수는 privileged function이라 불립니다.