클로저

함수와 그 함수가 접근할 수 있는 변수의 조합

• 클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해진다.

const globalVar = '전역 변수';

function outerFn() {
  const outerFnVar = 'outer 함수 내의 변수';
  const innerFn = function() { 
    return 'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.';
  }
	return innerFn;
}

• 위 코드에서는 2가지의 클로저 조합을 찾을 수 있다.
  1. outerFn() 함수와 전역 변수인 globalVar
  2. innerFn() 함수와 같은 위치에 있는 지역 변수 outerFnVar, 전역 변수 globalVar

데이터를 보존하는 함수

function createFoodRecipe (foodName) {
  const getFoodRecipe = function (ingredient1, ingredient2) {
    return `${ingredient1} + ${ingredient2} = ${foodName}!`;
  }
  return getFoodRecipe;
}

const highballRecipe = createFoodRecipe('하이볼');
highballRecipe('콜라', '위스키'); // '콜라 + 위스키 = 하이볼!'
highballRecipe('탄산수', '위스키'); // '탄산수 + 위스키 = 하이볼!'
highballRecipe('토닉워터', '연태고량주'); // '토닉워터 + 연태고량주 = 하이볼!'

• 함수의 주소값을 할당받을때, 매개변수로 ‘하이볼’ 을 함께 전달
• highballRecipe는 foodName이 **‘하이볼’**로 고정된 상태
• highballRecipe(’콜라’, ‘위스키’) 를 통해 createFoodRecipe로 값이 전달이 되고, foodName은 이미 존재하기 때문에 getFoodRecipe로 매개변수를 전달
• 전달된 ingredient들은 리터럴 템플릿으로 묶여서 return

즉, 가장 중요한 포인트는 “할당할 때 매개변수를 전달하면 재할당을 하지 않는 이상, 변경되지 않는다”

커링

여러 전달인자를 가진 함수를 연속적으로 리턴하는 함수로 변경하는 행위

• 클로저의 데이터를 보관하는 기능으로 한번 값을 보내면 다시 변경할 필요가 없는 경우에 한해서 상당히 유용하다.
• 아래 코드는 커링을 통해 보관되는 데이터를 기준으로 장바구니에 담은 물건의 정보를 알 수 있도록 작성한 코드이다. ( 기억이 안 날때는 이 코드를 꼭 다시 보자 )

function ShopBasket (types) {
    return function (price) {
        const regexPrice = price.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
        return function (size) {
            return `고르신 옷의 정보 : ${types} - ${regexPrice}원 / size : ${size}`
        }
    }
}

let clothTypes = ShopBasket("jean");
let clothPrice = clothTypes(29900);
let clothSize = clothPrice("XL");

console.log(clothSize);
// 고르신 옷의 정보 : jean - 29,900원 / size : XL

clothTypes = ShopBasket("sweater");
clothPrice = clothTypes(37900);
clothSize = clothPrice("S");
console.log(clothSize);
// 고르신 옷의 정보 : sweater - 37,900원 / size : S

• 함수의 일부분만 변경이 되는 경우나, 일부 프로세스가 완료된 상태를 저장할 때 사용하면 편리한 구조이다.