JS 변수 선언

프론트엔드 기술면접에서 var를 사용하지 않고 const와 let만을 사용하여 작성하라는 문제가 나왔다는 글을 읽었다.

객체지향 프로그래밍만 사용하다가 자바스크립트를 사용하니까, 아직 변수에 정확한 타입 지정을 하지 않는게 익숙하지 않아서 무작정 var만 사용했는데 약점을 들킨 기분이었다.

var, let, const를 정확히 정리해보자.

---

❗ var와 let,const는 변수 선언과 호이스팅에서 차이점이 존재한다.

변수 선언

자바스크립트는 엄격한 타입 언어(Java, C++ 등)가 아닌 느슨한 타입 언어로 변수 선언시 var, const, let 세 가지 키워드를 사용한다. 각각의 키워드는 재선언과 재할당에서 다른 점들이 있다.

1. var

var name="abc";
console.log(name); // abc
var name="efg";
console.log(name); // efg

var는 변수 선언 방식에서 문제점을 가지고 있다. 동일한 변수명으로 재선언해도 오류가 나지 않으며 값이 출력된다. 유연한 변수 선언 방식으로 편리하지만 코드량이 많아지면 오류를 찾기 매우 힘들어진다.

2. let, const

let name="abc";
console.log(name); //abc
let name="efg"; //error(Cannot redeclare block-scoped variable 'name')
name="efg";
console.log(name); //efg

const name="abc";
console.log(name); //abc
const name="efg"; //error(Cannot redeclare block-scoped variable 'name')
name="efg" //error(Uncaught TypeError TypeError: Assignment to constant variable.)

var의 단점을 보완하고자 let과 const가 추가되었다. let과 const 모두 재선언이 불가하다는 공통점이 있지만, let은 재할당(Immutable)이 가능하고 const는 재할당이 불가하다는 차이점이 존재한다.

호이스팅(Hoisting)

호이스팅이란 특정 선언문을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. 자바스크립트에서는 모든 선언을 호이스팅한다.

변수는 선언, 초기화, 할당 단계를 거치는데 var는 선언, 초기화 과정이 함께 이뤄지지만 let, const는 선언과 초기화 과정이 나누어 진행된다.

1. var

console.log(name); // abc
var name="abc";

var로 작성하면 선언과 초기화가 같이 진행되기 때문에 위의 코드같이 오류가 발생하지 않고서 초기화 값이 출력된다.

2. let, const

console.log(name); //error(Uncaught ReferenceError: Cannot access 'name' before initialization)
let name="abc";

console.log(name); //error(Uncaught ReferenceError: Cannot access 'name' before initialization)
const name="abc";

반면에 let,const는 선언이 되더라도 초기화 전까지는 Temporal Dead Zone(TDZ, 일시적 사각지대)에 변수가 놓이게 된다. 따라서 호이스팅은 일어나지만 변수가 초기화 되기 전이므로 에러가 발생하게 된다.

---

📌 참고자료
https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90