루프의 클로저 오염을 극복하는 방법: 실용 가이드

루프 내부의 클로저: 클로저 오염 해결을 위한 실용 가이드

프로그래밍에서 클로저는 외부 범위에서 변수를 캡처하는 데 중요한 역할을 합니다. 그러나 루프 내에서 사용하면 클로저 오염이라는 예상치 못한 결과가 발생할 수 있습니다. 이 문서에서는 이 문제를 살펴보고 이를 해결하기 위한 실용적인 솔루션을 제공합니다.

문제

다음 코드를 고려하세요.

<code class="javascript">var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}</code>

안타깝게도 이 코드는 다음을 출력합니다.

<code>My value: 3
My value: 3
My value: 3</code>

<code>My value: 0
My value: 1
My value: 2</code>

문제

루프 내에 선언된 각 함수가 외부 범위에서 동일한 i 변수를 캡처하기 때문에 문제가 발생합니다. 두 번째 루프 내에서 함수가 호출되면 모두 동일한 i을 참조하며, 이는 실행될 때마다 3으로 증가됩니다.

ES6 해결 방법: let

ES6에서는 블록 범위 변수를 생성하는 let 키워드를 도입했습니다. 루프 내에서 let을 사용하면 각 반복에 고유한 i 변수가 있어 클로저 오염 문제가 해결됩니다.

<code class="javascript">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

ES5.1 해결 방법: forEach

또 다른 문제 배열에 대한 솔루션은 forEach 메서드를 사용하는 것입니다.

<code class="javascript">var someArray = [/* values */];

someArray.forEach(function(element) {
  // ...code specific to this element...
});</code>

forEach 루프의 각 반복은 자체 클로저를 생성하여 해당 반복과 관련된 배열 요소를 캡처합니다.

클래식 해결책: 클로저

클래식 해결책은 변수를 함수 외부의 별도의 변경되지 않는 값에 수동으로 바인딩하는 것입니다.

<code class="javascript">var funcs = [];

function createFunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createFunc(i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}</code>

i 변수를 내부 변수에 인수로 전달하여 함수를 사용하는 경우 각 반복마다 새로운 클로저를 생성하여 각 함수가 자신의 독립적인 값을 참조하도록 합니다.

위 내용은 루프의 클로저 오염을 극복하는 방법: 실용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!