[중앙정보처리학원] JavaScript* 클로저 (Closure)

 

 

A closure is the combination of a function bundled together (enclosed)

with references to its surrounding state (the lexical environment). - mdn (2023)

 

 

클로저란? 

함수와 그 함수 주변상태의 주소 조합

 

 

 

 

 

 

 

 

 

 

const globalVar = '전역 변수';

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

 

함수 outerFn => 변수 globalVar 접근가능

함수 innerFn => 변수 globalVar와 outerFnVar에 접근가능

 

이 둘의 조합이 클로저

 

 

 

 

 

CONST GLOBALvAR = '전역 변수';

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

const innerFnOnGlobal = outerFn();
const message = innerFnOnGlobal();

Const 라도 접근가능 

 

 

 

 

 

 

 

 

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

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

다양한 형식으로 접근가능

 

 

 

 

 

 

 

커링

 

 

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

커링은 전체 프로세스의 일정 부분까지만 실행하는 경우 유용

 

function makePancake(powder) {
  return function (sugar) {
		return function (pan) {
			return `팬케이크 완성! 재료: ${powder}, ${sugar} 조리도구: ${pan}`;
		}
	}
}

const addSugar = makePancake('팬케이크가루');
const cookPancake = addSugar('백설탕');
const morningPancake = cookPancake('후라이팬');

// 잠깐 낮잠 자고 일어나서 ...
const lunchPancake = cookPancake('후라이팬');

 

마치 재료만 먼저 만들어 놓고 나중에 다시 만드는 게 가능한 것과 같다.

 

이와 같이 커링은 함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장하기에 용이합니다.