변수 선언 키워드 비교(let, const, var)

JavaScript 변수 선언 키워드는 let, const, 그리고 var가 있습니다. ES6 이전에는 var 키워드를 활용하여 변수를 선언하였습니다. 허나 var 키워드의 단점으로 인해 발생하는 문제점을 해결하기 위해 ES6 부터는 let, const 키워드가 추가되었습니다. 이 키워드들의 특징에 대해 알아보겠습니다.

변수 선언 키워드 (var)

var

• ES6 이전에 변수를 선언할 때 사용되던 키워드입니다.
• var로 선언한 변수는 재선언 및 재할당이 가능합니다.

  var name = 'kim';
  
  var name = 'hong';  // 재선언 가능
  
  console.log(name);  // hong

• 함수 스코프입니다. 아래 예제 코드를 보게 되면, for문이 끝난 후에도 변수 i 에 접근하여 사용할 수 있습니다.

function func() {
  for (var i = 0; i < 10; i++) {
    console.log(i); // 0 ~ 9
  }
  console.log(i); // 10
}

func();

• 호이스팅으로 인해 변수 선언 이전의 위치에서 접근 시 undefined를 반환합니다.

console.log(name);  // undefined

var name = 'hong'; 

호이스팅(Hoisting)

호이스팅이란 변수를 선언 이전에 참조할 수 있는 현상입니다. 인터프리터는 스크립트 실행 시, 함수와 변수의 선언부를 먼저 실행시켜 메모리 주소값을 선언합니다.
var 로 선언한 변수는 호이스팅 시 undefined 로 변수를 초기화 합니다.
그러나 let, const 로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않습니다. → 변수에 접근 시 ReferenceError 발생

console.log(name);  // undefined
console.log(name2);  // ReferenceError 발생!!

var name = 'hong'
let name2 = 'kim'

변수 선언 키워드 (let, const)

ES6 이후 부터 변수 선언 키워드인 let, const 가 추가되었습니다.

var 키워드의 블록 스코프, 호이스팅 관련한 특성 때문에 ES6 이후부터는 변수 선언 시 var 대신 const와 let을 사용하는 것을 권장합니다.

let, const 키워드는 다음과 같은 공통점을 가지고 있습니다.

• 변수 재선언이 불가능합니다.
• 블록 스코프입니다. 아래 예제를 보시면 let 키워드로 선언된 변수 b 의 경우 if 블록 밖에서 접근하려고 하면 ReferenceError가 발생합니다.

  let a = 2;
  
  if (true) {
    let b = 3;
  }
  console.log(a + b);  // ReferenceError!

• 호이스팅 시 var 키워드와는 다르게 변수를 초기화 하지 않습니다. 따라서, 선언 이전에 변수에 접근하면 에러가 발생합니다.

두 키워드의 차이점은 다음과 같습니다.

• let : 재할당 가능
• const : 재할당 불가능

요약

키워드	재선언	재할당	스코프	비고
var	O	O	함수 스코프
let	X	O	블록 스코프	ES6부터 도입
const	X	X	블록 스코프	ES6부터 도입