JavaScript 클로저: 초보자 가이드

클로저는 많은 초보자가 어려움을 겪는 JavaScript의 강력하고 중요한 기능입니다. 함수 호출 전반에 걸쳐 상태를 저장하고 개인 변수를 생성하는 등 JavaScript의 가장 유용한 여러 기능을 담당합니다. 이 블로그에서는 클로저를 간단한 언어로 나누고 실제 사례와 함께 클로저의 중요성을 논의하여 설명하려고 합니다.

? 클로저란 무엇입니까?

자바스크립트의 다른 함수에서 함수가 반환되면 상위 함수의 범위를 상속합니다. 이는 반환된 함수가 외부 함수의 실행이 완료된 후에도 외부 함수 범위에 정의된 변수에 액세스할 수 있음을 의미합니다. 클로저는 함수와 해당 함수를 포함하는 범위의 조합입니다.
더 간단한 정의는 다음과 같습니다.

• 클로저는 외부(외곽) 함수 범위에서 변수를 "기억"하는 함수입니다.
• 외부 함수가 더 이상 실행되지 않는 경우에도 내부 함수가 이러한 변수에 액세스할 수 있습니다.

? 클로저 작동 방식: 예

? 종결 없는 예

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

? 클로저 예시

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

? 클로저의 주요 특징

1. 영구 메모리: 외부 함수 범위에 있는 변수는 외부 함수가 종료된 후에도 오랫동안 "기억"됩니다.
2. 어휘적 범위 지정: 클로저는 함수가 실행되는 위치가 아니라 함수가 정의된 위치를 기반으로 합니다.
3. 다중 인스턴스: 각 클로저 인스턴스는 외부 변수의 자체 복사본을 저장합니다.

? 다중 인스턴스의 예:

function counterFunction() {
    let count = 0;

    return function increment() {
        count++;
        return count;
    };
}

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

여기서 counter1과 counter2에는 각각 별도의 count 변수가 있습니다.

? 클로저의 실제 사용

1️⃣ 데이터 개인 정보 보호: 클로저는 전역 범위에서 변수를 숨길 수 있으므로 특정 함수 내에서만 사용할 수 있습니다.
? 예:

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ 이 강령이 데이터 개인정보 보호를 보여주는 방법:

1. 전역 범위 보호: secret 변수는 전역 범위나 코드의 다른 부분에서 직접 액세스할 수 없습니다. 예를 들어 console.log(secretObject.secret)를 시도하면 정의되지 않은 결과가 반환됩니다.
2. 비공개 상태 유지: 클로저의 비밀 변수는 비공개이며 getSecret 및 setSecret 메소드를 통해서만 읽거나 수정할 수 있습니다.
3. 액세스 제어: 프로그램은 getSecret 및 setSecret 함수를 정의하여 비밀 변수에 대한 제한된 액세스를 보장합니다.

2️⃣ 함수 팩토리: 함수 팩토리는 새로운 함수를 생성하고 반환하는 함수입니다. 이를 통해 입력 매개변수를 기반으로 맞춤형 기능을 동적으로 구성할 수 있습니다.
? 예:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ 이 코드가 함수 팩토리를 보여주는 방법:

1. 계산 함수는 공장처럼 작동하여 입력(인수)을 기반으로 특수 곱셈 함수(이중, 삼중)를 생성합니다.
2. 각 기능은 동일한 핵심 로직을 공유하면서 고유하고 독립적입니다.

3️⃣ 이벤트 리스너: 클로저는 일반적으로 상태를 유지하기 위해 콜백 및 이벤트 리스너에서 사용됩니다.
? 예:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ 이 코드는 이벤트 리스너에서 클로저가 작동하는 방식을 보여줍니다.

1. setupListener 함수는 클로저를 생성하고 그 안에 clickCount 변수를 정의합니다.
2. 콜백인 이벤트 리스너 함수는 setupListener 메소드 실행이 완료된 후에도 clickCount에 액세스할 수 있습니다.
3. ID가 "myButton"인 버튼을 클릭할 때마다 이벤트 리스너의 콜백이 clickCount를 증가시키고 업데이트된 값을 기록합니다.

? 결론

클로저는 JavaScript의 기본 아이디어로, 개발자가 보다 모듈화되고 효율적이며 비공개적인 코드를 구성할 수 있도록 해줍니다. 클로저를 이해하면 동적 함수를 작성하고 지속적인 상태를 유지하며 데이터 캡슐화를 달성할 수 있는 능력을 얻을 수 있습니다.

초보자로서 클로저를 연습하고 실험하는 데 시간을 투자하세요. 처음에는 어려워 보일 수도 있지만 실제 예제와 사용법을 통해 곧 JavaScript 프로그래밍의 놀라운 강점과 다양성을 깨닫게 될 것입니다.

클로저를 배우는 데 도움이 되는 실제 비유나 예가 있나요? 아래 댓글 섹션에서 공유해 주세요!
즐거운 코딩하세요! ✨

위 내용은 JavaScript 클로저: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!