let과 var의 비교

연습1

let a = 1
function f () {
  console.log(a, b, c)//#1
	let b = 2
	console.log(a, b, c)//#2
	if (true) {
		let c = 3
		console.log(a, b, c)//#3
	}
	console.log(a, b, c)//#4
}
f()

각각의 console.log(a, b, c)의 값은 어떻게 될까?

• #1
  전역객체에서 a =1이 정의되었으므로 a만 출력가능하다.
  b는 호이스팅에 의해서 let b만 선언되어 있고 값은 정의되지 않았으므로 undefined이다.
• #2
  위와 같으나 b = 2가 선언되었으므로 a와 b는 출력 가능하다.
  c는 아직 선언되지 않았으므로 출력 불가능하다.
• #3
  if문에 들어와서 c=3으로 선언되었으므로 a, b, c모두 출력가능하다.
• #4
  c는 if문 안에서만 사용이 가능하므로 a와 b만이 출력 가능하다.

<여기서 알 수 있는점>

let은 block scope에 영향을 받는다.
let은 TDG에 갇힌다.

연습2

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}

funcs.forEach(function (f) {
  f()
})

forEach의 특성

먼저 forEach의 특성부터 살펴보자

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

arr.forEach(function (element) {
	console.log(element)
})

이 특성과 같이 element는 arr에 들어있는 값들을 function의 매개변수로 사용하는 것이다.

해설

그렇다면 위의 코드들은 어떤식으로 작동하며 값은 뭐가나오는지 알아보자.
1. funcs = []이 정의된다.
2. for문을 돌며 funcs안에 function(){}이 10개 들어간다. (그러나 function안의 내용은 실행되지 않는다. 함수를 실행한적이 없고 그냥 funcs안에 넣어주기만 했기 때문이다.)
3. for문을 다 돌면 i는 10이 된다.
i=9일때 for안의 내용은 실행이 되고 그 다음 i<10을 만족하므로 i=10이 되지만 i<10을 만족하지 못하므로 for안의 내용은 실행되지 않는다.
4. forEach가 실행되면 funcs안의 함수들이 실행된다. i는 var로 선언했으므로 block scope의 영향을 받지않는다 그러므로 i=10을 console.log(i)에 적용할 수 있다.

결과: 10이 10번나온다.

위의 문제에서 0~9까지의 숫자가 나오게 하려면 어떻게 할까?

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push((function (v) {
    return function () {
      console.log(v)
    }
  })(i)) //즉시실행함수
  //i를 매개변수로 v로 바로 넘겨준다.
}
funcs.forEach(function (f) {
  f()
})

방법은 funcs에 function(v)를 넣으면서 매개변수를 i로 하는 함수를 실행시켜준다.
그러면 funcs에는 function(){ console.log(i)}가 10개 담기게 될 것이다.
물론 i는 0~9까지 숫자가 담길 것이다.

let funcs = []
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
	  console.log(i)
  })
}
funcs.forEach(function (f) {
  f()
})

let을 사용할시 block scope에 의해서 for문의 i값마다 각각의 스코프를 실행한다.

funcs.push(function () {
	  console.log(i)
  })

즉 이 부분을 i값마다 생성한다.
그러므로 i의 값이 0~9까지 차례로 들어갈 수 있다.
결과: 0~9