[모던 자바스크립트 딥다이브]_let, const 키워드와 블록 레벨 스코프 어디까지 보고 오셨어요?

var 키워드로 선언한 변수의 문제점

이전에 배웠던 var와 let 그리고 const 키워드에 대해 다시 복습하는 시간이 되겠습니다.

var 키워드는 우리가 알다시피

변수 중복 선언 허용

함수레벨 스코프에서만 지역변수 적용

변수호이스팅

등의 특징이자 문제를 가지고 있습니다.

이것이 문제인 이유는 우리가 변수를 선언하고 값을 이용할때 일정한 규칙이 없다면

값을 추적하기 어려워지고, 이는 우리가 원하는 기능을 구현하는데 걸림돌이 되기 때문입니다.

값을 할당하지 않았는데 오류가 발생하지 않는다는 것은 우리가 어디서 잘못된 코드를 작성했는지 알기 어려워지기 때문에 기본적인 코딩에서 선언 전에 값을 참조하면 안된다는 암묵적인 규칙에 어긋나게 됩니다.

 

let 키워드

위와 같은 var 키워드의 문제점을 보완하고자 새롭게 ES6에 도입된 키워드 입니다.

let 키워드로 변수를 선언한다면, 다시 재선언을 할 수가 없습니다.

이는 변수를 중복해서 사용하지 못하도록 막는 것을 뜻합니다.

그리고 호이스팅 또한 불가능합니다.

일시적 사각지대 때문인데요.(TDZ)

var
선언단계	초기화단계
할당단계

let, const

선언단계

TDZ(Temporal Dead Zone)

초기화단계

할당단계

이렇게 var 키워드에서 새롭게 선언단계와 초기화단계 사이를 구분해줄 TDZ가 생겨서 let과 const는 호이스팅이 되지 않습니다.

그리고 let 키워드로 선언한 변수는 다시 값을 재할당 할 수가 있습니다.

이는 원시값을 변경하는게 아니라 단지 메모리 주소를 바꿔주는 것이라고 배웠죠?

 

const

키워드

let 키워드와 비슷하게 호이스팅이 되지 않고,

값의 재할당 역시도 되지 않습니다.

이처럼 변경이 되지 않기 때문에 상수라고 부르기도 합니다.

하지만 객체타입의 값은 그 안에 들어있는 데이터에는 접근하여 변경할 수 있습니다.

 

정리를 해보자면,

재할당이 필요한 경우에 한정해 let키워드를 사용합니다. 이때 변수의 스코프는 최대한 좁게 만듭니다.

변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드르 사용합니다.

const 키워드는 재할당을 금지하기 때문에 이후 값을 참조할 때 추적의 용이성과 신뢰성이 높습니다.