[TIL] 기록 51일차

Today I Learned

• Hackerrank에 있는 JavaScript 문제를 몇가지 풀어봤다. 이곳에 정리했다.

• 클로저에 대해서 이해하려고 노력중이다. 일단 그 중에 꽤나 자주 쓰이는(?) Classic한 예제를 이해하는데 성공했다.

  var arr = []
  
  for(var i=0; i<5; i++){
      arr[i] = () => {
          return i
      }
  }
  
  for(var index in arr) {
      console.log(arr[index]())
  }

이 코드의 결과는 0, 1, 2, 3, 4 가 출력될 거라는 내 예상과는 다르게 아래와 같았다.

그 이유는 i가 return된 scope에는 변수 i에 대한 선언이 없기 때문에 그 상위 scope의 전역변수 i 값인 5를 참조했기 때문이다. i 변수를 var가 아닌 let으로 선언한다면 어떻게 될까?

var arr = []

for(let i=0; i<5; i++){
    arr[i] = () => {
        return i
    }
}

for(var index in arr) {
    console.log(arr[index]())
}

놀랍게도 코드는 아래와 같이 정상적으로 동작한다.

그 이유는 let으로 변수를 선언하면 새로운 scope를 형성하고, 전역변수의 i가 아닌 let scope 안에서의 i 값을 참조하기 때문이다.

// var 선언
for(var i=0; i<5; i++){
    arr[i] = ()=>{
        return i
    }
}
console.log(i) // 5

// let 선언
for(var i=0; i<5; i++){
    arr[i] = ()=>{
        return i
    }
}
console.log(i) // i is not defined