TIL 1) 클로저

클로저란?

클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합이다.

const globalVar  = "global";
function outerFn(){
    const outerFnVar = "outer var";
    const innerFn =()=>{
        return `${outerFnVar}+${globalVar}`;
    }
    return innerFn;
}

const out = outerFn();
const inn = out();
console.log(inn);

상수 out 은 함수 outerFn 의 내부에 있는 innerFn을 주소로 가진다.
상수 out은 전역 스코프에 있는 상수지만, innerFn의 주소를 받아 내부 스코프에 있는 outerFnVar에 접근이 가능하다.

함수가 최초 선언되었던 환경에서는 innerFn이 outerFn의 스코프에 있었기 때문이다.
innerFn은 클로저이고 out은 클로저의 주소를 가지는 상수가 된다.

클로저의 활용

클로저를 활용해 클로저 함수 내에 데이터를 보존해두고 사용할 수 있다.
일반적으로는, 함수 스코프 안에 있는 변수를 밖에서 사용할 수 없다.
하지만, 클로저를 응용하면 함수 내부의 변수를 사용할 수 있다.

function getFoodRecipe (foodName) {
    let ingredient1, ingredient2;
    return `${ingredient1} + ${ingredient2} = ${foodName}!`;
  }
  
  console.log(ingredient1); // ReferenceError: ingredient1 is not defined (함수 내부에 선언한 변수에 접근 불가)
  console.log(foodName); // ReferenceError: foodName is not defined (매개변수에 접근 불가)

위와 같이 getFoodRecipe 내부에 선언된 변수는 외부에서 접근하지 못한다.

하지만 getFoodRecipe를 클로저로 만드는 함수 하나를 생성하면 가능하다.

function createFoodRecipe (foodName) {
  let ingredient1 = '탄산수';
  let ingredient2 = '위스키';
  const getFoodRecipe = function () {
    return `${ingredient1} + ${ingredient2} = ${foodName}!`;
  }
  return getFoodRecipe;
}

const recipe = createFoodRecipe('하이볼');
recipe(); // '탄산수 + 위스키 = 하이볼!'

여기선 getFoodRecipe가 클로저로써 변수 2개와 매개변수 하나를 외부 스코프에서 사용이 가능하게 만든다.

정리

• 클로저를 사용하면 내부 스코프에 있는 변수 또는 함수를 외부에서도 접근 가능하게 할 수 있다.
• 클로저는 주로 데이터를 보존하는 함수로 활용한다.
• 클로저를 이용하면 특정 함수가 데이터를 보존할 수 있다.