자바스크립트_var vs. let vs. const

ujin·2022년 7월 11일

const let let과 const undefined var var문제점 함수 레벨 스코프 호이스팅

모던 딥 자바스크립트

목록 보기

2/6

⚠ var의 문제점

중복 선언 가능

함수 레벨 스코프

변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환

ES6에서 나온 let과 const 키워드는 위의 문제점을 해결

1. 변수 중복 선언 불가

💡let

let 키워드는 변수 중복 선언이 불가능하지만, 재할당은 가능하다.

let name = 'huj';
console.log(name); // huj

let name = 'js'; // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'js';
console.log(name); //js

💡const

반드시 선언과 동시에 초기화를 진행해야 한다.

const도 let과 마찬가지로 재선언이 불가하며, 재할당도 불가한다. 재할당의 경우 원시 값은 불가능하지만, 객체는 가능하다.

// 원시값의 재할당
const name = 'huj';
name = 'js'; // Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
	eng: 'huj',
}
name.eng ='js';

console.log(name); // { eng: "js" }

2. 블록 레벨 스코프

let, const 키워드로 선언한 변수는 모두 코드 블록(ex.함수, if, for, while, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let num = 1;

if (true) {
	let num = 5
}

console.log(num); // 1

var 키워드로 선언했을 때는 5가 나오지만, let 키워드로 선언한 경우 if 문 안에 있는 것은 지역 스코프를 가져 전역에서 console을 찍었을 경우, 전역에 있는 num이 결과 값으로 출력된다. (const 키워드도 let 키워드와 동일)

3. 변수 호이스팅

💡let

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행한다.

선언 단계 먼저 실행 -> 초기화 단계가 실행
=> 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜸

console.log(name); // Uncaught ReferenceError: name is not defined

let name = 'huj';

let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(TDZ) 구간이 존재한다

💡const

const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.

console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'huj';

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 초기화가 되지 않았기 때문에 name is not defined 에러가 나지만, const 키워드로 선언한 경우 선언과 초기화가 동시에 이루어지지 않았기 때문에 Cannot access 'name' before initialization 에러가 난다.