JavaScript 클로저의 미스터리!

언뜻 보면 클로저가 복잡한 개념처럼 보일 수도 있지만, 보이는 것보다 훨씬 간단하므로 걱정하지 마세요! 혼란을 없애고 클로저에 대한 몇 가지 일반적인 통념을 다루겠습니다.

클로저에 대한 일반적인 오해

❌ 클로저는 주변 범위에 접근할 수 있는 특수 함수입니다.
사실이 아님

• 클로저는 함수와 동일하지 않습니다.
• JavaScript에서 모든 함수는 본질적으로 정의된 범위에 액세스할 수 있습니다. 이것이 바로 기능이 작동하는 방식입니다!

❌ 클로저에는 중첩된 함수가 필요합니다.
또 틀렸어

• 중첩 기능은 클로저 생성과 아무 관련이 없습니다.
• 함수가 생성될 때마다 중첩이 필요 없이 자동으로 주변 범위와 클로저를 형성합니다.

현실은 무엇일까❓

클로저는 마술적이거나 독특한 기능이 아닙니다. 대신, 함수와 함수가 생성된 범위의 변수를 결합한 것일 뿐입니다. 모든 기능은 이 컨텍스트와 함께 번들로 제공됩니다. 그것이 어디서 왔는지에 대한 기억이라고 생각하세요.

MDN에서 승인한 정의는 다음과 같습니다.

클로저는 주변 상태에 대한 참조와 함께 묶인 함수의 조합입니다.

일반적인 영어로 클로저를 사용하면 다른 곳에서 실행되더라도 함수가 생성된 위치의 변수를 "기억"할 수 있습니다.

실제 폐쇄 사례를 살펴보겠습니다 ??‍?

다음은 재미있는 예입니다.

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

여기서 무슨 일이 일어나고 있나요? ?
createCounter가 호출되면 해당 범위 내에 변수 count가 생성됩니다.
createCounter가 이미 실행을 완료한 경우에도 반환된 함수는 개수를 기억합니다.
카운터가 호출될 때마다 클로저로 인해 카운트에 액세스하고 업데이트할 수 있습니다.

클로저가 왜 중요한가요? ?

클로저는 단지 acing 인터뷰를 위한 이론적인 개념이 아니라 매우 유용합니다! 다음은 몇 가지 실제 시나리오입니다.

1. 데이터 개인정보 보호

클로저는 변수를 비공개로 유지하고 외부 세계에서 접근할 수 없도록 할 수 있습니다.

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

2. 이벤트 핸들러

클로저는 일부 상태를 "기억"하려는 경우 이벤트 리스너에게 유용합니다.

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

3. 부분 적용

클로저를 사용하면 함수에 대한 인수를 미리 설정할 수 있습니다.

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

잠깐, 클로저가 완벽할까요❓

항상 그런 것은 아닙니다! 주의하지 않으면 클로저로 인해 변수에 대한 참조가 필요 이상으로 오래 유지되어 메모리 누수가 발생할 수 있습니다. 예를 들어 루프 내부에서 클로저를 사용하면 의도하지 않은 동작이 발생하기 쉽습니다.

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

이 문제를 해결하려면 let(블록 범위) 또는 IIFE를 사용할 수 있습니다.

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

마무리 ???

클로저는 JavaScript의 모든 곳에 있습니다. 당신이 깨닫든 모르든, 당신은 이미 그것을 사용하고 있습니다! 이는 JavaScript를 강력하고 유연하게 만드는 비결입니다.

기억해야 할 사항은 다음과 같습니다: ?

• 클로저는 함수가 아닙니다. 기억하는 변수는 함수입니다.
• JavaScript의 모든 함수에는 클로저가 있습니다.
• 캡슐화, 이벤트 처리, 부분 적용 등에 클로저를 사용하세요.

읽어주셔서 감사합니다. ?
즐거운 코딩하세요! ??‍?✨

위 내용은 JavaScript 클로저의 미스터리!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!