var, let, const 차이점 / 호이스팅이란? / null, undefinded

var, let, const 차이점

var​: 재선언(O), 재할당(O)

var(variable)는  변수 선언 후 재선언이 가능하고 재할당도 가능하다.

let​: 재선언(X), 재할당(O)

let는  변수 선언 후 재선언이 불가능하고 재할당만 가능하다.

let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록을 스스로의 스코프로 가집니다. 이런 점에서는 let이 var와 유사합니다. 그러나 둘의 중요한 차이는, var의 경우 스코프가 '자신을 선언한 블록'이 아니라, 자신의 선언을 포함하는 함수라는 점입니다.

const​(constant ): 재선언(X), 재할당(X)

const는  변수 선언 후 재선언 및 재할당 불가능하다.

 

호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

console.log(foo); // undefined var foo;

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

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.
참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데 var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만,

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다. // ​따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. // 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

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

let foo; // 변수 선언문에서 초기화 단계가 실행된다. console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다. console.log(foo); // 1

 

정리

그렇다면, 어떤 변수 선언 방식을 써야할까?
변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.
그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

1. 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.

2. 재할당이필요없는상수와객체에는const를사용한다.

 

null, undefinded 차이점

null, undefined는 둘 다 변수에 값이 없는 것을 나타내지만, 둘의 의미는 꽤 다르다.
1. null
null은 NULL의 심볼이며, 의도를 갖고 변수에 null을 할당하여 값이 없다는 것을 나타낸다. null이 할당된 변수의 타입을 확인해 보면 object인걸 확인할 수 있다.

let a = null; console.log(a); // null

console.log(typeof a); // object

2. undefined

변수를 선언하고 값을 할당하기 전의 형태(값)라고 볼 수 있다. (*변수에 값이 할당되어 있지 않음.)
let b;
console.log(b); // undefined

undefined가 나오는 경우의 예시
존재하지 않는 객체의 프로퍼티를 읽을려고 할 때 let obj = {};
console.log(obj.a); // undefined
존재하지 않는 배열에 엘리먼트를 읽을려고 할 때 let arr = [1, 2, 3];
console.log(arr[10]); // undefined

 

정리

●  undefined: 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태이다. 타입을 확인해 보면 'undefined' 이다.

●  null: 변수를 선언하고 'null'이라는 빈 값을 할당한 경우이다. 타입을 확인해 보면 'object' 이다.

추가: undeclared

● undeclared: 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태이다. 타입을 확인해 보면 'undefined' 이다.