let / const / var 그리고 scope

scope

각 상수나 변수 등의 요소들이 허용된 영역, 범위를 scope라 한다.
특정 함수나 클래스의 블럭 안에 선언되지 않은 전역 변수들은 전역 스코프에 속한다.

const / let

• const : 선언할 때 바로 값을 넣어줘야 하고, 이후 값을 바꿀 수 없는 상수.
• let : 선언과 값 정의를 따로 할 수 있고 값도 변경할 수 있다.
  하지만 선언을 다시 하지는 못한다.
• ES6, ECMA 2015 버전부터 생긴 구문들이다. (그 전에는 var만 사용했다.)
• 선언하기 이전에 사용하려 하면 Reference Error가 발생한다.
• const와 let도 hoisting은 되지만 선언되어서 초기화되기 전에는 Temporal Dead Zone(TDZ)이라는 영역에 속하게 되어, 이 때 변수를 호출하면 오류가 발생한다.

var

• 값을 변경할 수 있고 다시 선언하는 것도 가능하다.
• JS가 발전하기 이전의 흔적이라고 할 수도 있지만 독특한 특성을 활용할 수도 있다.
• 사용 이후에 선언하더라도 에러 없이 코드가 동작한다. 다만 선언만 끌어올려졌기 때문에 값은 비어있다. (hoisting)

=> 언어의 자유도가 높다는 건 당장 개발할 때 편할 수 있다.
하지만 오류를 찾아서 해결해야 할 때는 디버깅이 지옥이 될 수 있다.

함수 스코프에 의한 var의 문제점

다음은 let을 활용한 간단한 for문 예시 코드이다.

function countWithLet() {
  //0에서 4까지 for loop을 돌면서
  for (let i = 0; i < 5; i++) {
    //'1초 뒤 i를 출력하라'는 지시를 내린다.
    setTimeout(function () {
      //i를 출력
      console.log(i);
    }, 1000);
  }
}

countWithLet();

0
1
2
3
4

같은 코드를 var를 활용해서 다시 예시 코드를 구현했다.

function countWithVar() {
  //0에서 4까지 for loop을 돌면서
  for (var i = 0; i < 5; i++) {
    //'1초 뒤 i를 출력하라'는 지시를 내린다.
    setTimeout(function () {
      //i를 출력
      console.log(i);
    }, 1000);
  }
}

countWithVar();

5
5
5
5
5

let은 for문 안에서 선언되고 for문 안이 활동 영역으로 고정되지만 var의 경우는 함수의 범위가 다음과 같다.

function countWithVar () {
  // 여기부터~
  for (var i = 0; i < 5; i++) {
    ...
    ...
  }
  // 여기까지!!
}

위의 예시 코드를 다시 살펴보자면, 함수 내에서 공유되는 i는 이미 5가 되어버렸고, 5를 다 같이 출력하게 되는 것이다.

※ 참고 자료 : 얄코 - Scope가 뭔가요?