[Javascript] let, var, const

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

 

https://medium.com/launch-school/javascript-es6-var-let-const-9645f543f7cb

 

Q. What are the differences between variables created using let, var or const?

 

 

A.

 

var은 자바스크립트에서 기본적으로 변수를 선언하는 방식입니다. var를 이용해서 전역 스코프에 변수를 선언하면, 해당 스코프의 변수로, 함수 스코프에 변수를 선언하면 함수 스코프의 변수로 할당되게 됩니다. var를 통해 선언한 변수는 참조형이든, 원시형이든 상관없이 그 값을 바꿀 수 있습니다. 

 

 

또한 var은 변수를 재선언할 수 있다는 독특한 특성을 지니고 있습니다. 따라서 다음과 같은 코드도 에러를 내뿜지 않습니다.

var foo = 2;
var foo = 3;

 

 

let, const는 블록 스코프를 지원하기 위해 ES6에서 새롭게 도입된 문법입니다. 해당 키워드를 사용하여 변수를 선언하면 그 변수의 스코프는 해당 블록 스코프에서만 유효합니다. 또한 var과 다르게 한번 선언한 변수는 다시 선언할 경우에 에러를 내뿜습니다. 즉, 재선언이 불가능하다는 특성을 지니고 있습니다. 

 

 

let과 const는 'immutable'을 기준으로 차이를 보입니다. let으로 선언한 변수는 immutable하지 않아도 되기 때문에 변수를 선언한 이후에 이 값을 재할당할 수 있습니다. 하지만, const로 선언한 변수는 immutable하기 때문에 변수를 선언한 이후에 이 값을 재할당할 수 없습니다. 이때 "재할당" 이라는 것은 객체 타입의 경우 Reference가 바뀌는 것이기 때문에 const로 생성된 객체의 key를 추가하거나 제거하는 등의 동작은 여전히 사용 가능합니다

 

 

호이스팅시에 var값은 초기값이 없는 경우 'undefined'라는 값을 자동으로 할당해주지만, let, const의 경우 초기 값을 자동으로 할당하지 않고 값을 넣어주지 않으면, 값을 넣어주기 전까지 메모리를 할당하지 않습니다. 이렇게 변수가 선언되고 해당 변수에 값이 선언되기 전까지를 TDZ라고 하는데, let, const의 경우 이 TDZ에서 변수에 접근하려 할 경우에 에러를 내뿜습니다.

 

 

Reference

yeoulcoding.tistory.com/155

[Javscript] 함수 스코프 vs 블록 스코프

poiemaweb.com/es6-block-scope

let, const | PoiemaWeb