JavaScript - let

in JS on 공부, Javascript, Let


let a = 1
function f(){
  console.log(a, b, c) // a=1, b는 hoisting으로 끌어올려진 상태에서 tdz에 걸리고, not defined, c error
  let b = 2
  console.log(a, b, c) // c error
  if(true){
    let c = 3
    console.log(a, b, c)
  }
  console.log(a, b, c) //c error
}

let은 var와 다르게 블럭 스코프에 갇히고, TDZ가 있다.

재할당 가능

let a =1
a = 2

반복문 내에서의 함수 실행시

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

위의 코드는 10이 10번 나온다. 배열에는 아래와 같이 들어간다.

[
  function(){ console.log(i); },
  ...
]

위의 애는 forEach를 할 때 실행이 된다. 실행 컨텍스트는 실행할 때 열린다. 그래서 i가 10이 된 상태에서 10번 실행되는 것이다.

그러면 0부터 9까지 나오게 하려면 각 for문 안에서 i, 값을 살아있게 해줘야 한다.

var funcs = []
for(var i=0; i<10; i++){
  funcs.push(function(v){
    return function(){ //즉시 실행함수를 만들어 버린다.
      console.log(v) 
    }
  }){i} //i를 미리 넘겨준다.
}
funcs.forEach(function(f){
  f()
})

근데 아래와 같이 해줘도 같은 결과가 나온다.

let funcs = []
for(var i=0; i<10; i++){ //자체가 블록 스코프
  funcs.push(function(){ //각각의 i마다 별도로 존재
    console.log(i)
  })
}
funcs.forEach(function(f){
  f()
})

메모리 소모를 덜 하게 된 것이다.