자바스크립트 클로저, 설명

클로저는 주제에 대해 작성된 수많은 기사를 읽은 후에도 많은 JavaScript 개발자를 당혹스럽게 하는 개념입니다. 예, 이것은 수많은 기사 중 하나에 불과합니다 😄하지만 최선을 다해 설명하겠습니다.

클로저가 무엇인지 설명하려면 먼저 범위의 개념을 설명해야 합니다.

범위는 주어진 변수를 사용할 수 있는 위치를 나타냅니다. 전역 변수(즉, 함수나 블록 내부에 있지 않은 변수)는 코드의 모든 곳에서 사용할 수 있습니다.

함수 내부에 새 변수를 생성하면 해당 변수의 범위는 함수 자체이며 외부에서는 사용할 수 없습니다. 그리고 다른 함수 안에 하나의 함수를 만들면 내부 함수가 부모의 변수에 액세스할 수 있습니다.

그리고 중괄호( const 및 let )로 묶인 코드 블록 내부에서 { 및 }를 사용하여 변수를 생성하면 해당 변수는 해당 블록 내부에만 존재합니다.

JavaScript에서 함수는 다른 함수를 반환할 수 있습니다. 그런 일이 발생하면 새 함수는 부모에서 변수에 액세스할 수 있습니다. 예를 들어:

function createLuckyNumberFunction(name) {
    const luckyNumber = parseInt(10000 * Math.random());

    return function() {
        return `${name}'s lucky number is ${luckyNumber}`;
    }
}

const mikesLuckyNumber = createLuckyNumberFunction("Mike");
console.log(mikesLuckyNumber());
// 👆 Outputs "Mike's lucky number is 3220"

const juliasLuckyNumber = createLuckyNumberFunction("Julia");
console.log(juliasLuckyNumber());
// 👆 Outputs "Julia's lucky number is 1449"

함수createLuckyNumberFunction(이제부터 "부모 함수"라고 함)는 다른 함수("자식 함수")를 생성하고 반환합니다.

자식 함수는 자식 함수가 생성되었을 때 가지고 있던 값을 사용하여 부모의 변수에 액세스할 수 있습니다.

예를 들어 createLuckyNumberFunction에 대한 첫 번째 호출에서 얻은 함수는 name = "Mike" 및 luckyNumber = 3220 변수에 액세스할 수 있습니다. 두 번째 호출의 함수는 name = "Julia" 및 luckyNumber = 1449 변수를 읽을 수 있습니다.

클로저는 함수와 주변 변수 사이의 조합입니다. 이 예에서 클로저는 내부 함수와 변수 name 및 luckyNumber 로 구성됩니다.

클로저는 변수를 숨기고 외부에서 변경되는 것을 방지하려는 경우에 유용합니다. 위의 예에서 행운의 숫자가 생성된 후에는 누구도 변경할 수 없습니다.

또 다른 용도는 함수가 다른 컨텍스트(예: 콜백)에서 실행되지만 호출 시 사용할 수 없는 변수가 함수에 필요한 경우입니다.


이 기사가 마음에 드셨다면 제 JavaScript 뉴스레터도 마음에 드실 것입니다.
격주 월요일마다 JavaScript 기술 수준을 높일 수 있는 쉽고 실행 가능한 단계를 보내드립니다. 확인해보세요: https://nicozerpa.com/