JavaScript의 클로저 이해

클로저는 코드를 작성하고 이해하는 방법에 큰 영향을 미칠 수 있는 JavaScript의 기본 개념입니다. 본질적으로 클로저를 사용하면 외부 함수의 실행이 완료된 후에도 함수가 외부 범위의 변수에 액세스할 수 있습니다. 이 기능은 엄청나게 강력할 수 있지만 효과적으로 사용하려면 확실한 이해가 필요합니다. 자세한 내용을 살펴보겠습니다.

클로저란 무엇입니까?

클로저는 클로저가 생성된 어휘 환경을 캡처하는 함수입니다. 이는 외부 함수의 실행이 완료된 후에도 함수가 외부 범위의 변수에 대한 액세스를 유지한다는 것을 의미합니다. JavaScript에서는 함수가 다른 함수 내에 정의될 때마다 클로저가 생성됩니다.

기본 예

종료를 이해하기 위해 간단한 예를 살펴보겠습니다.

function outerFunction() {
    let outerVariable = 'I am an outer variable';

    function innerFunction() {
        console.log(outerVariable); // Inner function can access the outer variable
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Logs: "I am an outer variable"

이 예에서는:

1. externalFunction은 지역 변수 externalVariable과 내부 함수 innerFunction을 선언합니다.
2. innerFunction은 externalVariable을 기록하여 외부 변수에 대한 액세스를 보여줍니다.
3. externalFunction은 innerFunction을 반환하여 클로저를 생성합니다.
4. innerFunction에 대한 참조를 보유하는 myClosure는 externalFunction이 완료된 후에도 여전히 externalVariable에 액세스할 수 있습니다.

어휘 범위 지정 및 폐쇄

자바스크립트의 어휘 범위 지정은 함수의 범위가 호출된 위치가 아니라 정의된 위치에 따라 결정됨을 의미합니다. 클로저는 이 범위 지정 메커니즘을 활용하여 외부 함수가 반환된 후에도 함수가 외부 범위의 변수에 액세스할 수 있도록 합니다.

실제 예: 개인 변수

클로저는 포함된 함수 외부에서 액세스할 수 없는 변수인 전용 변수를 생성하는 데 자주 사용됩니다.

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

여기:

1. createCounter는 count를 초기화하고 증가 및 감소 메소드를 사용하여 객체를 반환합니다.
2. 두 방법 모두 비공개로 유지되는 개수를 캡처하고 수정하는 클로저를 형성합니다.

고급 예: 반복자

클로저는 함수 호출 전반에 걸쳐 내부 상태를 유지하는 상태 저장 반복자를 만드는 데에도 사용할 수 있습니다.

function createIterator(array) {
    let index = 0;

    return {
        next: function() {
            if (index < array.length) {
                return { value: array[index++], done: false };
            } else {
                return { value: undefined, done: true };
            }
        }
    };
}

const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

이 예에서는:

1. createIterator는 클로저에서 배열과 인덱스를 캡처합니다.
2. 다음 메소드는 캡처된 인덱스를 사용하여 배열 요소를 하나씩 반환합니다.

일반적인 함정: 루프의 클로저

클로저는 루프 내부에서 사용될 때, 특히 비동기 작업에서 예상치 못한 동작으로 이어질 수 있습니다. 다음은 문제를 보여주는 예입니다.

var 사용

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 5 5 5 5 5

이 경우:

1. 루프가 완료되고 나는 5살이 됩니다.
2. 모든 setTimeout 콜백은 동일한 i(5)를 참조합니다.

사용하자

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 0 1 2 3 4

여기:

1. 각 반복마다 새로운 블록 범위 i를 생성합니다.
2. 각 setTimeout 콜백은 서로 다른 i를 캡처하여 예상한 출력을 얻습니다.

요약

• 클로저: 어휘 환경을 기억하고 접근할 수 있는 함수
• 어휘적 범위 지정: 함수는 호출되지 않고 정의된 위치를 기준으로 범위가 지정됩니다.
• 개인 변수: 클로저는 변수를 캡슐화하고 보호할 수 있습니다.
• 반복자: 클로저는 상태를 유지하고 데이터에 대한 순차적 액세스를 제공할 수 있습니다.
• 루프 함정: 루프 내 var에 주의하고 예상치 못한 동작을 피하는 것이 좋습니다.

클로저와 그 미묘한 차이를 이해하면 더욱 강력하고 유지 관리가 쉬운 JavaScript 코드를 작성하는 능력이 향상됩니다. 이러한 원칙을 현명하게 사용하면 클로저를 활용하여 복잡한 문제를 효과적으로 해결할 수 있습니다.

Follow me: Github Linkedin

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