[기술면접 | JS] var, let, const

요약

var, let, const는 JavaScript에서 변수를 선언하는 키워드이다.

var 키워드는 ES5 이전까지 유일했던 변수 선언 키워드이고, 변수의 선언과 동시에 초기화가 함께 진행되는 특징이 있다.

let, const 키워드는 ES6 이후 추가된 변수 선언 키워드로, 변수의 선언과 초기화가 분리되어 진행되는 특징이 있다.

let, const는 선언 이후 초기화가 진행되기 전까지 TDZ에 존재하여 접근할 수 없다.
var는 초기화가 함께 진행되기 때문에 호이스팅이 되어 선언문 이전에도 접근할 수 있다.

var 키워드란?

JavaScript ES5 이전까지 유일했던 변수 선언 키워드

var 키워드의 특징 및 문제점

1. 변수 중복 선언 허용

   var x = 1;
   var y = 1;
   
   var x = 100; // 동일한 스코프에서 var 키워드로 같은 식별자를 선언함.
   // 이때, 초기화문이 함께 동작되었기 때문에 var 키워드는 없는 것으로
   // 인식되며, x의 값이 100으로 할당된다.
   var y; // 초기화문이 없는 중복 선언은 무시된다.

   • 위의 예시처럼 동일한 변수를 중복으로 선언하면 초기화문의 유무에 따라 결과값이 달라진다.
   • 초기화문이 있다면 var 키워드는 없는 것처럼 동작되고 변수의 값에 새로운 값이 할당되게 된다.
   • 초기화문이 없다면 아무 일도 일어나지 않는다.
   • 따라서, 기존에 선언한 값의 변화가 일어날 수 있다.

2. 함수 레벨 스코프

   • var 키워드 변수는 오로지 함수 레벨 스코프만을 따른다.
   • 따라서 if문, for문과 같은 블록 레벨 스코프에서 선언되더라도 외부에서 사용할 수 있는 전역 변수가 된다.
   • 이렇게 전역 변수를 남발하게 되면 중복 선언되는 문제가 야기될 수 있다.

3. 변수 호이스팅

   • var 키워드 변수는 호이스팅이 발생하여 undefined가 미리 할당되고, 변수를 선언하기 이전의 코드에서 변수를 호출할 수 있다.
   • 물론 undefined가 나와서 코드의 의미는 없지만, 가독성을 해치고 프로그램의 흐름상 전혀 맞지 않는 맥락의 코드가 나타날 수 있다.

위와 같은 특징들로 인해 ES6에서는 다른 프로그래밍 언어와 비슷한 변수의 역할을 하는 let과 const가 추가되었다.

let 키워드

ES6 이후 추가된 변수 선언 키워드

let 키워드 특징

1. 변수 중복 선언 금지
   • let 키워드는 같은 블록 레벨 스코프에서 선언된 동일한 이름의 식별자가 있다면 문법 에러를 발생시킨다.
2. 블록 레벨 스코프
   • let 키워드는 블록 레벨 스코프를 따른다.
   • 따라서 if문, for문, {}문 등 여러가지 코드 블록의 스코프를 따르게 된다.
3. 변수 호이스팅
   • let은 호이스팅이 동작되기는 하지만, var와 조금 다르다.
   • var 키워드는 변수의 선언, 초기화가 동시에 일어나서 undefined라는 값을 가져올 수 있지만, let 키워드는 호이스팅이 동작될 때 선언만 진행된다.
   • 이때, 선언된 let 키워드는 변수 선언문을 만나기 전까지는 undefined로 초기화가 되지 않는다. 따라서, TDZ(일시적 사각지대)로 인해 ReferenceError를 동작시키게 된다.
4. 전역 객체와 let
   • var 키워드로 선언된 변수, 함수, 어떤 키워드도 가지지 않은 변수들은 모두 암묵적 전역으로써 전역 객체 window의 프로퍼티가 된다.
   • 따라서 window.변수, window.함수 와 같이 접근할 수 있으며 이 window는 생략이 가능하기 때문에 우리는 일반적인 코드 작성 방식으로 사용할 수 있게 된다.
   • 하지만, let 키워드는 window의 프로퍼티가 되지 않는다.

const 키워드

ES6 이후 추가된 변수 선언 키워드

const 키워드 특징

1. let 키워드와 대부분 동일하다.
2. 선언과 초기화
   • const 키워드는 “반드시 선언과 동시에 초기화” 해야 한다.
   • 초기화를 함께 하지 않으면 Syntax Error를 발생시키게 된다.
3. 재할당 금지
   • const 변수는 재할당이 금지된다.
   • 이는 상수를 표현할 때의 특징으로 const 키워드는 상수를 표현하는 변수 키워드라고 생각해도 좋다.
   • 일반적으로 상수로 표현할때는 변수 이름을 대문자로 작성하고 단어끼리의 연결은 언더바로 표현한다.(Snake_Case)
4. const 키워드와 객체
   • const 키워드에 원시 값을 할당하면 다시 변경할 수 없지만(재할당이 안되기 때문) 객체를 할당한 경우에는 값을 변경할 수 있다.
   • const는 불변이 아니다. 따라서 객체의 프로퍼티 추가, 삭제, 변경을 통해 값을 변경하는 것이 가능하다.

var vs let vs const

ES6를 사용한다면 var 사용은 지양해야 하고,
재할당이 필요한 경우에는 let 을 사용해야 하며,
상수 원시 값이나 객체에는 const 키워드를 사용하는 것이 좋다.

선언과 초기화

var 키워드는 선언과 동시에 초기화가 이루어진다. 초기화가 일어날 때 “undefined” 가 할당되며, 변수 선언문 이전에 변수에 접근할 수 있게 된다.

그러나 let, const 키워드는 선언과 초기화가 분리되어 진행된다. 선언이 될 때 가 할당되어 초기화 이전에는 해당 변수에 접근할 수 없다. 이때 TDZ에 변수가 들어가 있다고 표현한다.

또한, const 키워드는 반드시 선언과 초기화를 동시에 진행해야 한다. 이는 const의 특징인 “재할당 금지” 에 의한 규칙이다.

TDZ

Temporal Dead Zone의 약자로 변수의 스코프 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.

변수가 선언되어 변수의 스코프가 생성되었으나, 초기화가 되지 않아 접근을 할 수 없는 구간을 의미한다.