var, let, const + null, undefined, undeclared, NaN

🔗 참고

1. 자바스크립트 Deep Dive
2. Github: var, let, const의 차이점
3. Github: null, undefined, undeclared, NaN

📌 var, let, const

var

var 키워드로 선언한 변수는 중복 선언이 가능하다(재선언, 재할당 가능). 또한 var 키워드로 선언한 변수는 오직 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다.

var x = 1;

if(true){
  // x는 전역 변수, 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
  var x = 10;
}

console.log(x) // 10

var i = 10;

// i는 전역 변수. 중복 선언됨.
for (var i = 0; i < 5; i++){
  console.log(i) // 0 1 2 3 4
}

console.log(i) // 5

var 키워드는 의도치 않게 변수 선언에서 오류가 생겨 개발자가 예상하지 못하는 오류가 발생할 가능성이 높다. 따라서 ES6에서는 새로운 변수 키워드 let과 const를 도입했다.

let

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. 즉 변수에 재할당은 가능하나 재선언은 불가능하다.

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따른다. 하지만 let 키워드로 선언한 변수는 모든 코드 블록(함수, 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.

var 키워드로 선언한 변수와는 달리 let 변수로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

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

let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러가 발생한다. var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 '선언 단계'와 '초기화 단계'가 한번에 진행된다. 그러나 let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보이지만 그렇지 않다.

let foo = 1;

{
  console.log(foo); // 참조 에러: foo가 초기화 되기 이전에 접근
  let foo = 2;
}

let 키워드로 선언한 변수도 호이스팅이 발생하므로 참조 에러가 발생.

const

const 키워드는 상수를 선언하기 위해 사용한다. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. const 키워드로 선언한 변수는 let과 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.

var vs. let vs. const

• var는 변수 재선언, 재할당 모두 가능.
• let는 변수 재선언은 불가능, 재할당은 가능.
• const는 변수 재선언, 재할당 모두 불가능.
• var는 함수 레벨 스코프이고, let, const는 블록 레벨 스코프이다.

📌 null, undefined, undeclared, NaN

1. null : 빈 값. null이라는 빈 값을 할당했을 때, 생기는 타입이다.
2. undefined : 정의되지 않음. var 선언문의 경우, 호이스팅 되었을 때, 변수 선언과 초기화가 동시에 일어나기 때문에, 변수가 undefined 된다.(타입 결정 안됨)
3. undeclared : 선언되지 않음. let, const 선언문의 경우, 호이스팅 되었을 때, 변수 선언과 초기화가 따로 이루어지기에, 변수가 undeclared되어 에러가 생긴다.
4. NaN : 표현 불가능한 수치형 결과이다.

console.log(data); // undefined
const data = 'data';

console.log(data); // error - undeclared
let data = 'data';

typeof 1 / 0; // NaN