[2022.09.15] var, let, const 차이

 

자바스크립트에서 변수 선언 방식은 var, let, const가 있다.

 

ES6 이전에는 var로만 변수 선언을 했었는데 

var에 문제점을 보안하고자 ES6이후 let, const가 나오게 된다.

 

var 키워드의 문제점

• 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

이러한 단점들을 ES6에서 나온 let과 const 키워드로 문제점을 해결했다.

 

1. 변수 중복 선언 불가

let

var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다.

이때 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 재할당 되어 변경되는 부작용이 발생한다.

하지만 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러(SyntaxError)가 발생한다.

 

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

let name = 'tty'
console.log(name) // output: tty

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

name = 'ysy'
console.log(name) // output: ysy

const

const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.

 

const도 let과 마찬가지로 재선언이 불가하고, 재 할당도 불가하다.

재할당의 경우, 원시 값은 불가능하지만 객체는 가능하다.

const 키워드는 재할당을 금지할 뿐, "불변"을 의미하지 않는다.

// 원시값의 재할당
const name = 'tty'
name = 'ysy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'tty',
}
name.eng = 'ysy'

console.log(name) // output: { eng: "ysy" }

 

2. 블록 레벨 스코프

let, const 키워드로 선언한 변수는 모두 코드 블록(ex. 함수, if, for, while, try/catch문 등)을

지역 스코프로 인정하는 블록 레벨 스코프를 따른다. 

 

함수뿐만 아니라 모든 코드 블록 내에 선언된 변수(지역 변수)는
해당 유효 범위(스코프)를 벗어나면 사용할 수 없다.

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

3. 변수 호이스팅

let

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

즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만,

초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

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

let name = 'tty'

따라서 let 키워드로 선언한 변수는 스코프의 시작 지점부터

초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재한다.

 

const

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

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

const name = 'tty'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에

이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 뜬다.

하지만 const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다.

따라서 초기화가 진행되지 않은 상태이기 때문에 Cannot access "name" before initialization에로 문구가 뜬다.

 

 

---

참고자료:

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프

 

GitHub - khakaa/prepare_frontend_interview: 📚 프론트엔드 기술 면접을 위한 핸드북 만들기