JavaScript에서 "닫힘"이란 무엇입니까?

"폐쇄"란 무엇입니까?

클로저는 주변 상태(어휘 환경)에 대한 참조로 묶인 함수의 조합입니다. 내부 함수에서 외부 함수의 범위 또는 환경에 액세스할 수 있습니다.

다음 코드 스니펫을 고려하십시오.

function outerFunction() {
  let innerVar = "I'm inside outerFunction";
  function innerFunction() {
    console.log(`${innerVar}, but I can be accessed from innerFunction too!`);
  }
  innerFunction();
}

outerFunction();

// > "I'm inside outerFunction, but I can be accessed from innerFunction too!"

어휘 범위/환경

위의 코드 조각에서 outerFunction 는 innerVar 라는 변수와 innerFunction 라는 함수를 만듭니다. innerFunction 함수는 내부에 포함되어 있으며 outerFunction 내에서만 사용할 수 있습니다. innerFunction 자체 로컬 변수가 없지만 둘 다 innerVar 의 어휘 범위 내에 있기 때문에 outerFunction에 액세스할 수 있습니다.

폐쇄

초기 코드 스니펫에서는 선언 직후 innerFunction를 호출했습니다. 그러나 대신 내부 함수return를 사용하면 어떻게 될까요?

function outside() {
  let myName = 'Pixi';
  function inside() {
    alert(myName);
  }
  return inside;
}

let insideOutside = outside();
insideOutside();

이 코드를 실행하면 내 이름으로 알림이 전송됩니다. 하지만 왜?

이것이 작동하는 이유는 JavaScript의 함수가 클로저를 형성하기 때문입니다. 클로저는 함수와 함수가 선언된 어휘 범위의 조합입니다.
insideOutside는 inside가 실행될 때 outside 함수의 인스턴스에 대한 참조가 됩니다. inside의 이 인스턴스는 어휘 범위에 대한 참조를 유지하므로 myName 변수에 대한 참조를 유지할 수 있습니다.

인수 전달

우리는 인수를 받아들이는 동봉된 함수를 생성할 때 클로저를 사용할 수 있습니다.

/* we create a function that accepts one argument, 
and returns a function that also accepts one argument, 
and utilizes both arguments... */
function makeMultiplier(x) {
  return function (y) {
    return x * y;
  };
}

/* we can call the outer function 
and assign it to a variable */ 
let multiplyBy2 = makeMultiplier(2);
let multiplyBy5 = makeMultiplier(5);
console.log(multiplyBy2(3)); // 6
console.log(multiplyBy5(3)); // 15

/* we can also use argument chaining to call 
both functions at once */
console.log(makeMultiplier(2)(3)); // 6
console.log(makeMultiplier(5)(3)); // 15

우리의 새로운makeMultiplier 함수는 더 많은 함수를 생성한 다음 나중에 해당 함수를 사용할 수 있는 기능을 제공합니다.
multiplyBy2 를 만들 때 x = 2 에 대한 참조는 함수 어휘 범위의 일부가 됩니다. 그런 다음 이 함수를 사용하여 다른 숫자에 2를 곱할 수 있습니다. multiplyBy5 의 경우에도 마찬가지입니다.

인수 연결을 사용할 때 makeMultiplier 인수를 전달하고 반환하는 함수에 인수를 즉시 전달하여 내부 함수를 즉시 호출합니다.

JavaScript의 범위에 대해 더 알고 싶으십니까?

확인하고 질문이 있으면 알려주세요! 향후 블로그 게시물에 영감을 줄 수 있습니다!

xx - 에밀리/TheCodePixi


외부 리소스:


MDN Closure Docs