자바스크립트 변수 var, let, const의 차이

var, let, const의 차이는 면접에서 들은 질문인데 헛소리한 나를 위해 복습한다…울고싶넹😂😂

들어가기 전에 알아야 할 것은 scope!

  • scope는 변수가 사용되는 영역이다.

let name = '박지현';
let go = '할 수 이따';

//여기서 name, go의 scope는 전역이다.

function example() {
  let name = '콜라겐';
  let go = '드세요';

  //여기서 name, go의 scope는 함수 example의 안이다. 밖을 나가면 쥬금!
}

그럼 let, var, const를 구분해보자.

1. let

let은 scope(영역) 내에서 변수 선언을 딱 한번만 할 수 있고 초기화가 몇 번이고 가능하다.

let num = 2;
console.log(num); //2

num = 3;
console.log(num); //3

num = 4;
console.log(num); //4

//다른 scope 내에서는 똑같은 변수명이라 할지라도 또 선언이 가능하다.
function example() {
  let num = 20;
  console.log(num);
}

example(); //20

console.log(num); //4

2. var

미친자다. 변수를 선언하지 않았음에도 값을 넣을 수 있다. 또한 한 번 선언된 변수를 다시 선언할 수 있다.


//변수 재선언 가능
var num = 3;
var num = 4;

console.log(num); //4

//변수 호이스팅 발생
console.log(num2); //undefined
var num2;
num2 = 3;

//변수 선언을 하지 않고도 값을 넣을 수 있다.
num2 = 4;
console.log(num2); //4 이게된다..
  • 변수 호이스팅이란? 변수를 어느 위치에서 선언하든 상관없이 선언을 맨 위로 끌어 올려버리는 것이다. 하지만 초기화 한 값은 그 자리에 그대로 있는 것이 함정!

3. const

상수를 위한 자료형이다. 한 번 선언되면 값을 바꿀 수 없다.


  const num3 = 5;
  console.log(num3);

  num3 = 6; //불가능!!

정리

var - 재선언이 가능하다. 변수 호이스팅을 통해 선언 위치와 상관없이 항상 선언을 위로 끌어올린다.
let - scope 외의 영역에서 재선언 불가능. 변수가 속한 scope의 최상단으로 변수 호이스팅이 가능하긴 하지만! 변수가 선언 되어서 초기화 되기 전까지는 TDZ(Temporal Dead Zone)에 속한다. 여기서 TDZ는 바람직한 코딩을 위한 안전장치와 같은 것이다. 그래서 var와 달리 let, const는 선언되기 이전에 출력을 할 수 없다.
const - 마찬가지로 재선언이 불가능하고 값을 또 넣을 수 없다. let과 동일하게 선언 되어서 초기화 되기 전까지는 TDZ에 속한다.

💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈