let과 var의 차이

let 과 var의 차이

 

let

 for(let i =0; i<winBalls.length; i++){
    setTimeout(()=>{
    console.log(winBalls[i], i);
        addBall(winBalls[i] ,$result);
    }, (i+1)*1000);
}

 

순서대로 나온다

 

var

for(var i =0; i<winBalls.length; i++){
    setTimeout(()=>{
    	console.log(winBalls[i], i);
        addBall(winBalls[i] ,$result);
    }, (i+1)*1000);
}

공이 1번째부터 순서대로 나오지 않고, undefined 나옴

 

📌var는 함수 스코프, let은 블록 스코프를 가진다

 

 

a는 함수 안에 선언된 변수이므로 함수 바깥에서는 접근할 수 없다

함수를 경계로 접근 여부가 달라지는 것이 함수 스코프

 

var는 함수 스코프(함수만 신경 씀)라서 if 문 안에 들어 있으면 바깥에서 접근할 수 있다

하지만, let은 그렇지 않다

 

 

let이 블록 스코프(블록을 신경 씀)라서 그렇다. 블록은 if 문, for 문, while 문, 함수에서 볼 수 있는 {}를 의미한다.

블록 바깥에서는 블록 안에 있는 let에 접근할 수 없음! const도 let과 마찬가지로 블록 스코프

 

for (var i = 0; i < winBalls.length; i++) {
  setTimeout( () => {
    console.log(winBalls[i], i);
    drawBall(winBalls[i], $result);
  }, 1000 * (i + 1));
}

 

보라색 i와 연두색 i 는 각각 다른 시점에 실행 된다

1000 * (i + 1)는 for문을 돌 때 실행 되고

setTimeout의 콜백함수는 지정 시간 뒤에 호출 된다. for문이 빨리 돌아서 콜백함수가 실행될때는 이미 i가 6이 되어 있음

<var일 때 실행 순서>
i가 0일 때 setTimeout(콜백0, 1000) 실행
i가 1일 때 setTimeout(콜백1, 2000) 실행
i가 2일 때 setTimeout(콜백2, 3000) 실행
i가 3일 때 setTimeout(콜백3, 4000) 실행
i가 4일 때 setTimeout(콜백4, 5000) 실행
i가 5일 때 setTimeout(콜백5, 6000) 실행
i가 6이 됨 
1초 후 콜백0 실행(i는 6) 
2초 후 콜백1 실행(i는 6)
3초 후 콜백2 실행(i는 6) 
4초 후 콜백3 실행(i는 6) 
5초 후 콜백4 실행(i는 6) 
6초 후 콜백5 실행(i는 6)

콜백 함수가 실행될 때 i를 콘솔로 출력하면 6이 나옴

winBalls는 인덱스가 5까지밖에 없으므로 winBalls[6]은 undefined가 나온다

 

let은 블록 내부의 i에 고정이 된다

var는 블록 안에서 고정되지 않음

 

그렇다면, let으로 썼을 때 잘 작동하던 위의 코드를 var로 사용하고 싶다면 어떻게 할까?

//함수를 바로 호출하는 방법 함수를 소괄호로 감싸고 호출
(function(j){
    setTimeout(()=>{
        console.log(winBalls[j], j);
        addBall(winBalls[i] ,$result);
    }, (i+1)*1000);
})(i);

이 때 들어간 j 는 매개변수인데, 함수안에 갇힌다

j는 그 때 그 때 받아오는 i가 된다