[javascript] var, let 비교할 수 있는 코드

const callback = [];
for (var i = 0; i <= 5; i++) {
  callback.push(() => 5);
}

callback.forEach((cb) => console.log(cb())); // 출력: 5 5 5 5 5 5

const callback = [];
for (let i = 0; i <= 5; i++) {
  callback.push(() => i);
}

callback.forEach((cb) => console.log(cb())); // 출력: 0 1 2 3 4 5

위 두 코드의 차이점은 for문 안의 var, let 이다.

var를 쓰면 5만 5번 출력되고

let을 쓰면 0부터 5까지 출력된다 (왜지)

 

---

 

위 코드들에서 배열에 push로 화살표 함수를 넣는 것부터 이해가 안됐다.

반복문써서 배열에 push할땐 callback.push(2) 이렇게 숫자만 직접적으로 넣어봤기때무네...

 

const arr = [];
arr.push(() => 1); 
arr.push(() => 2);

console.log(arr) //[ [Function (anonymous)], [Function (anonymous)] ] 출력됨

arr 배열에 화살표 함수로 1, 2를 넣어봤는데

배열을 출력해보니 1, 2가 출력되지 않는다 

찾아보니 화살표 함수를 배열에 추가한 경우 forEach( ) 메소드를 사용하면 배열의 모든 요소를 꺼낼 수 있으므로 화살표 함수를 실행시킬 수 있다고 한다.

 

const arr = [];
arr.push(() => 1);
arr.push(() => 2);

arr.forEach((a)=>console.log(a())) //1, 2 출력됨

배열의 요소가 숫자가 아닌 화살표 함수이므로

forEach로 console.log 할때 a( ) 를 해줘야 한다 (a 넣으면 또 [Function (anonymous)] 두번 출력 됨)

 

우선 배열에 화살표 함수 넣는 건 그래도 이해가 됐고

 

var - 재선언, 재할당 모두 가능

let - 재선언 불가능, 재할당 가능

내가 아는 둘의 차이점이 재선언인데 재선언 때문에 결과가 달라진 것 같진 않은데 아직 이해가 안되는데 어떻게 해야되는데

 

 

재선언때문이 아니였다.

var은 전역 스코프에서 선언되고 

let은 블록 스코프에서 선언된다

*전역 스코프 : 어떤 함수나 블록 내부가 아닌 스크립트 전체에서 유효한 범위

*블록 스코프 : 중괄호로 감싸진 블록 내에서 선언된 변수가 해당 블록 내부에서만 유효한 범위

 

그래서 var 키워드로 만들어진 변수 i는 전역 스코프에서 선언되기 때문에

for문에서 사용한 i 변수는 callback배열의 각 요소에 대한 화살표 함수에서 참조할 때 이미 5로 변경된 전역변수 i를 참조한다 따라서 callback 배열에 추가된 화살표 함수는 항상 5를 반환한다

두번째 코드에서 let 키워드로 만들어진 변수 i는 블록 스코프에서 선언되어 해당 변수는 선언된 블록 내에서만 유효하기 때문에 for문에서 사용한 i 변수는 callback 배열의 각 요소에 대한 화살표 함수에서 새로운 변수 i 를 참조한다

따라서 callback 배열에 추가된 화살표 함수는 0~5까지의 숫자를 반환한다. ^_ㅠ