본문 바로가기
C++ 200제/코딩 IT 정보

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

by vicddory 2019. 6. 20.

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

 

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

댓글