자바스크립트 클로저 Closure와 for 반복문 바인딩 예제 5개

클로저를 활용할 경우 여러 장점이 있지만, 변수가 묶여 반복문이 비정상적으로 구동하는 경우가 있습니다. 예를 들면 아래와 같습니다.

 

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]();
}

 

javascript closure example 1

의도는 1, 2, 3을 순차적으로 출력하는 것입니다. 하지만, 클로저 결과 화면처럼 3이란 숫자만 3번 출력됩니다.

 

문제는 변수 i 가 외부 변수에 바인딩된다는 것입니다. 하지만, 여러 해결책이 있습니다. 하나씩 알아보겠습니다.

 

◆ 인덱스 변수를 묶는 가장 간단하고 읽기 쉬운 방법

for (var i = 0; i < 3; i++) {
    (function(index) {
        console.log('iterator: ' + index);
    })(i);
}

javascript closure example 2

 

◆ 익명 함수가 같은 클로저를 사용하지 않도록 방지

var funcs = [];

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

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

javascript closure example 3

 

◆ for 루프 범위를 매번 갱신하기

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log("test : " + i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

javascript closure example 4

◆ for 반복문 하나로 클로저 문제 해결하기

var funcs = [];

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

javascript closure example 5

 

◆ 쿼리 js (query-js) 사용

/* query js */
var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

/* javascript */
funcs.iterate(function(f){ f(); });

 

Javascript 클로저 바인딩 예제는 여기까지입니다.

 

출처 : 스택오버플로우였습니다. [simple practical example]

---

관련 글

▷ get parameter get attribute 차이, getter setter 관점에서
▷ css 셀렉터(selector 선택자) 띄어쓰기 의미, div id
▷ 자바스크립트 날짜 계산 소스 (Date 함수)

---

ⓒ written by vicddory