[JavaScript] var, let, const 자세하게 비교하기

작성 목적

최근 면접을 보면서 받은 질문이고 아주 기초적인 내용이지만 답변을 깔끔하게 못했음

개념을 알고는 있지만 설명하는 연습을 많이 안 해본게 가장 큰 원인이라는 생각이 들어서

설명하는 연습을 해보기 위해서 글을 작성했다.

 

단순히 var, let,const 키워드만 정리하는게 아니라

TDZ, 호이스팅, 스코프와 같은 관련 개념도 함께 다룸

---

var, let, const 차이점 정리표

	선언	재선언	재할당
var	undefined로 초기화	가능	가능
let	초기화 x	불가능	가능
const	초기화 x	불가능	불가능

---

재선언

이미 선언된 변수명을 다시 선언하는 것

var 변수1; // var 첫번째 선언
var 변수1; // var 두번째 선언 : ok

let 변수2; // let 첫번째 선언
let 변수2; // let 두번째 선언 -> 출력 : Indentifier "변수2" has already been declared 

const 변수3; // const 첫번째 선언
const 변수3; // const 두번째 선언 -> 출력 : Indentifier "변수3" has already been declared

var는 재선언 가능하지만

let과 const 는 이미 선언된 변수명은 재선언이 불가능함

---

재할당

변수에 값을 다시 할당하는 것

var 변수1 = "값 할당";
변수1 = "다른 값 할당"; // ok

let 변수2 = "값 할당";
변수2 = "다른 값 할당"; // ok

const 변수3 = "값 할당";
변수3 = "다른 값 할당"; // 출력: TypeError: Assigment ot constant variable.

var, let 으로 선언된 변수는 값 재할당 가능함

const로 선언된 변수는 재할당 불가능하다

(수식에서 변하지 않는 값을 뜻하는 상수 constant를 선언하는 키워드임)

---

호이스팅

변수와 함수 선언부가 함수의 최상단으로 끌어올려지는 것처럼 동작하는 것을 말함

var로 변수를 선언하면 함수 최상단에서 작성된 것처럼 동작하는 것 때문에

값 할당전에 참조하면 undefined로 참조가 된다.

예측할 수 없는 에러를 피하기 위해서 let, const로 변수를 선언하는 것이 좋음

(let, const도 호이스팅은 발생하지만 할당전에 참조하면 에러 발생)

---

var 호이스팅

console.log(변수); // 출력: undefined

var 변수 = "할당";

console.log(변수); // 출력: "할당"

---

TDZ

Temperal Dead Zone : 호이스팅이 발생한 변수를 값 할당전까지 일시적으로 참조할 수 없는 영역을 말 함
(let, const 로 선언한 변수도 호이스팅이 발생하긴 하지만 일시적으로 참조할 수 없는 TDZ가 발생함)

console.log(변수); // 출력: ReferenceError: message is not defined

let 변수 = "할당";

console.log(변수) // 할당

TDZ 설명용

위 코드에서 빗금친 영역이 할당전 참조가 불가능한 영역 TDZ임

let처럼 const도 할당전에는 참조가 불가능하다

 

---

스코프

변수를 참조할 수 있는 영역을 말함
자바스크립트는 변수가 선언된 위치에 따라 스코프가 결정되는 정적 스코프를 따르는 언어이다.
var, let, const 어떤 키워드로 변수가 선언되었냐에 따라 스코프의 영역이 바뀌기도 함

---

함수스코프 -  var

var로 선언된 변수와 함수에 참조할 수 있는 영역

function 함수() {
  var 변수 = "함수에서 값 할당";

  if(true) {
    var 변수 = "if문에서에서 값 할당";
  }

  console.log(변수); // 출력: "if문에서 값 할당"
}

함수();

→ var로 선언된 변수와 함수는 선언된 함수내에서 참조가능하다.

---

블록 스코프 - let, const

for, if, while등 중괄호 '{}' 내에서 let, const로 선언된 변수와 함수에 참조할 수 있는 영역

function 함수() {
  let 변수 = "함수에서 값 할당";

  if(true) {
    let 변수 = "if문에서에서 값 할당";
  }

  console.log(변수); // 출력: "함수에서 값 할당"
}

함수();

→ let과 const로 선언된 변수와 함수는 중괄호내에서만 참조가능하다.

함수의 '변수Let'과 if문의 '변수Let'은 이름만 같지 다른 변수이다 (동명이인과 같은 개념이라고 이해하면 됨)

---

마무리

코어 자바스크립트와 딥다이브를 보고 외웠던 내용을 백지에서부터 직접 작성해봤다.

배웠던 내용은 출력해보는 과정을 가져야 좀 더 머릿속에 확실하게 남는 것 같다.

다음에는 실행컨텍스트, 클로저, 비동기 프로그래밍, HTTP 등 면접 때 질문받앗던 개념 위주로

하루에 하나씩 포스팅 하면서 복습해야겠다.