JavaScript 질문-for 루프와 전역 변수 관련

Question

``` var func = []; // 함수의 배열을 생성하는 for 루프의 i는 전역 변수다. for (var i = 0; i < 3; i++) { func.push(function () { console.log(i); }); } console.log(func); // 배열에서 함수를 꺼내어 호출한다. for (var j = 0; j < 3; j++) { func[j](); } /* 실행결과: [Log] Array (3) => console.log(func); 0 function () { console.log(i); } 1 function () { console.log(i); } 2 function () { console.log(i); } [Log] 3(3)=> for (var j = 0; j < 3; j++) { func[j](); } 3 3 3 */ ``` 자바스크립트 클로저를 공부하다가 이해가 되지 않는 부분이 있어서 질문을 남깁니다. 첫 번째 for 루프에서 func 배열에 인덱스 숫자를 콘솔에 출력하는 함수를 순차적으로 집어넣는 로직을 작성해서 두 번째 for 루프에서 그것을 호출시키는 로직을 작성했는데 0, 1, 2가 아니라 보기와 같이 3, 3, 3 이렇게 출력되었습니다. 이렇게 출력되는 원인을 찾아봤더니 첫 번째 for 루프에 선언된 초기식 변수 var i가 전역 변수이기 때문이라는 설명이 있었습니다. 그러면 var i의 변수값이 두 번째 for 루프의 초기식인 var j에 영향을 미쳤다는 얘기로 보면 되는건가요?

이승현 · Accepted Answer

안녕하세요.

var로 변수를 선언하면, 전역변수가 됩니다.
그래서 각 func[j]()를 부르는 순간에 console.log(i)를 실행합니다.
따라서, 그 때의 전역변수 i 값을 출력하게 됩니다.

i를 사용한 for 문에서, i가 3인 상태로 끝나게 됩니다.
그 후, j를 사용한 for 문에서, func[0](), func[1](), func[2]()를 호출하기 때문에,
3이 출력됩니다.

그래서 원하시는 방법으로 진행하시려면,

for (let i = 0; i < 3; i++) {
  func.push(function () {
    console.log(i);
  });
}

위와 같이 let을 사용하면 됩니다.
이렇게 하면 i는 for loop 안에서만 의미 있는 값이 됩니다.
그래서 console.log(i)의 i는 i를 위한 for loop내에서의 값이 됩니다.