[JS] var, let, const 차이점

 

1. 변수 선언 방식

var

전역 변수 (재선언 O, 재할당 O)

var name = 'javascript'
console.log(name) //javascript

var name = 'html'
console.log(name) //html

 

변수를 한번 선언하고 다시 중복선언했지만 에러가 나지 않고 값 출력

코드가 길어지면 어디서 에러가 났는지 알 수 없고 어디서 값이 변경되었는지 알기 힘들다.

 

이를 보완하기 위해 ES6에서 나온 let, const가 있다.

 

let

지역 변수 (재선언 X, 재할당 O)

let name = 'javascript'
console.log(name) //javascript

let name = 'html'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'css'
console.log(name) //css

 

재선언 시 위와 같이 SyntaxError로 name이 이미 선언되었다는 걸 알 수 있지만,

재할당이 가능하다.

 

const

상수, 변치 않는 값을 갖는 변수 (재선언 X, 재할당 X)

const name = 'javascript'
console.log(name) //javascript

const name = 'html';
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'css';
console.log(name)
//Uncaught TypeError: Assignment to constant variable.

 

const는 재선언도, 재할당도 불가능하다.

 

2. 호이스팅

호이스팅이란? 범위 내에 있는 모든 변수를 최상단으로 끌어올리는 것처럼 동작하여 다른 코드보다 먼저 실행된다.

(var, let, const 외에 class, function 등의 식별자들도 호이스팅 O)

 

var

변수에 초깃값을 지정하지 않아도 값이 설정될 때까지 undefined를 출력하기 때문에 에러가 나지 않는다.

console.log(name) // undefined
var name = 'javascript'

// 호이스팅
var name // undefined
console.log(name)
name = 'javascript'

 

맨 위 코드처럼 입력 시 호이스팅이 되면서 아래 코드 처럼 해석하기 때문

 

let, const

let, const는 호이스팅이 안 되는 것은 아니지만 var와 다른 방식으로 호이스팅이 이루어진다.

console.log(name); // Uncaught ReferenceError: num is not defined
let name = 'javascript';
console.log(name);

//호이스팅
let name;
console.log(name); //TDZ
name = 'javascript';
console.log(name); // javascript

 

let과 const는 호이스팅이 되면 일시적 사각지대(Temporal Dead Zone)에 빠져 변수값을 참조할 수 없는 구간이 생긴다.

 

var는 호이스팅과 동시에 undefined로 초기화되지만,

let, const는 일시적 사각지대에 있는 변수를 참조하게 되면 ReferenceError가 발생한다.

 

🔎 Temporal Dead Zone이란?

스코프 시작부터 변수가 초기화될 때까지의 구간.
변수 초기화와 동시에 변수는 TDZ밖으로 나오게 된다.

 

3. 스코프

var

함수 레벨 스코프 (함수 내에 선언된 변수는 함수 내에서만 유효)

 

let, const

블록 레벨 스코프

(함수, 블록 내에서 선언된 변수는 그 블록 내에서만 유효. 만약 바깥에서 변수를 선언했는데 블록 안 에서 못찾을 시 바깥에서 찾게 됨)