var를 지양하자

Created

May 26, 2024 07:25 AM

Tags

1장 변수 다루기

let, const

ES 2015년부터 나온 개념 이전에는 var만 사용했다.

큰 차이점으로는 아래와 같다.

var 는 함수 스코프를 가짐

let, cont 는 블록 단위의 스코프 및 추가적으로 TDZ을 통해 더욱 안전한 개발이 가능.

TDZ(Temporal Dead Zone)

JavaScript에서 let과 const 변수 선언이 호이스팅되지만, 선언 전에 해당 변수에 접근하려고 하면 참조 오류(ReferenceError)가 발생하는 구역을 말함.

TDZ는 변수가 초기화되기 전까지 존재하며, 변수의 선언 위치부터 초기화까지의 영역.

TDZ의 작동 방식

호이스팅 (Hoisting):

JavaScript의 변수 선언은 함수나 블록의 맨 위로 끌어올려짐.

var로 선언된 변수는 선언과 초기화가 함께 호이스팅되지만, let과 const는 선언만 호이스팅되고 초기화는 원래 코드 위치에서 수행.

TDZ 발생:

let과 const로 선언된 변수는 블록의 맨 위로 호이스팅되지만, 초기화되지 않아서 TDZ에 들어감.

TDZ 동안 해당 변수에 접근하면 참조 오류가 발생.

초기화 이후:

변수가 선언된 이후 초기화되면 TDZ는 끝나고, 변수는 정상적으로 접근할 수 있음.

예시


console.log(myVar); // undefined (var 변수는 호이스팅되어 초기화됨)
var myVar = 3;

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 2;

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 1;

선언의 차이점

아래처럼 var는 매우 편리하지만 코드가 많아진다면 디버깅이 어렵고 휴먼에러를 유발하기 쉽다.


var name = '이름' // 가능
var name = '이름'

let name = '이름' // 불가능
let name = '이름'

const name = '이름' // 불가능
const name = '이름'

할당의 차이점


var name = '이름' // 재할당 가능
name = '이름'

let name = '이름' // 재할당 가능
name = '이름'

const name = '이름' // 불가능
name = '이름'