var와 let 그리고 호이스팅

1.var의 특징

첫번째,

가장 기본적인 특징으로는 재정의와 재선언이 가능하다.

아래와 같이 같은 변수 이름에 다른 값을 할당할 수 있다는 특징이 있다.

let과 const가 생긴 가장 큰 문제가 아닐까 한다.

var a = 1;
console.log(a)
//expected output : 1
var a = 2;
console.log(a)
//expected output : 2

 

두번째,

var로 선언한 변수는 호이스팅 되면서 변수는 메모리에 할당되지만 아직 값을 가지지 않으며 undefined로 초기화가 된다.

변수를 선언하기 전에 해당 변수를 사용하더라도 오류가 발생하지 않고 undefined가 반환된다.

console.log(a)
//expected output : undefined
var a = 1
console.log(a)
//expected output : 1

 

세번째,

함수만 지역변수로 호이스팅이 되어 함수 내부에서만 사용 가능하고 for, if, while등은 전역변수로 호이스팅 되어 외부에서도 사용이 가능하다.

var a = 1;

function foo() {
  var b = 2;
}
console.log(b);
//expected output : ReferenceError: b is not defined

for(var a = 1; a< 5; a++){
    console.log("for문 안의 콘솔", a);
}
console.log("for문 밖의 콘솔",a);
//expected output : 
//for문 안의 콘솔 1
//for문 안의 콘솔 2
//for문 안의 콘솔 3
//for문 안의 콘솔 4
//for문 밖의 콘솔 5

 

 

2.let의 특징

첫번째,

재정의는 가능하지만 재선언은 불가능하다.

let a = 1;
a = 2;
console.log(a)
//expected output : 2
let a = 3; //Identifier 'a' has already been declared

 

두번째,

let은 var와 다르게 변수가 선언되었지만 값이 초기화 되지는 않는다. 이것을 TDZ라고 한다.

TDZ는 변수가 선언된 위치부터 초기화되기 전까지의 범위를 나타내며, 이 동안에 변수에 접근하려고 하면 에러가 발생한다.

console.log(a)
//expected output : ReferenceError: Cannot access 'a' before initialization
let a = 1;

 

세번째,

let은 함수, for, if, while 등 안에서 사용한 모든 변수가 지역변수로 호이스팅 되어 내부에서만 사용이 가능하다.

for(let a = 1; a< 5; a++){
    console.log("for문 안의 콘솔", a);
}
console.log("for문 밖의 콘솔",a);
//expected output : ReferenceError: a is not defined

 

 

3.호이스팅

위에서 var, let의 특징을 설명하면서 호이스팅에 대해 언급을 했지만 정리 하면

변수와 함수가 선언된 위치와 상관없이 코드 최상단으로 끌어올려지는 것을 의미한다.

var는 let, const와 달리 TDZ가 존재하지 않는다. 

var는 선언 단계와 초기화 단계가 동시에 진행되며 선언과 동시에 undefined로 초기화된다.