클로저(Closure) 이해하기

우선 클로져의 사전적 정의는 이러하다.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지 (Lexical scoping)를 먼저 이해해야 한다.

어휘적 범위 지정(Lexical scoping)

function init() {
  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

출처: Mdn Web Docs - 클로저

어휘적 범위 지정...??

이 개념은 Mdn에도 잘 나와있어 해당 개념에 대해서 좀 배울 수 있었다.
하지만 솔직히 뭐하자는건지 모르겠다...ㅋ 주니어로써 살아남기 위해선 좀 더 쉬운 개념이 필요하다.

클로저는 외부함수 내 변수에 접근 가능한 내부함수.

로 이해하면 쉽게 이해할 수 있을 것 같다.

클로저(Closure)의 활용

클로저를 이해하기 위해 예시를 하나 작성해보았다.

// bitcoin 갯수를 인자로 받아 원화와 달라로 계산해주는 함수
const calculateCryptoCurrency = (bitcoins) => {
  // 오늘 기준 환율
  const won = 42821402;
  const dollar = 38267;
  let output = 0;

  return {
    // 외부함수의 변수들에 접근하여 계산된 가격을 출력해주는 클로저 함수
    howMuchWon: () => {
      output = `${bitcoins * won} won`;
      return output;
    },
    howMuchDollar: () => {
      output = `$${bitcoins * dollar}`;
      return output;
    },
  };
};

// 비트코인 하나
const oneCoin = calculateCryptoCurrency(1);

// 비트코인 하나 당 ₩, $로 계산
const wonPerCoin = oneCoin.howMuchWon();
const dollarPerCoin = oneCoin.howMuchDollar();

console.log(wonPerCoin);	// 42821402 won
console.log(dollarPerCoin);	// $38267

추후의 심화개념을 이해하게 되면 추가 정리를 해봐야겠다^^...