[JS] var, let, const, 호이스팅에 대해서

var는 함수레벨의 스코프이고 중복선언이 가능하다.

가장 간단한 예시로는 아래의 코드로 설명할 수 있다.

var a = 10;
console.log(a) // 10
var a = 20;
console.log(a) // 20

• var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하고 마지막에 할당된 값이 변수에 저장된다. 위의 코드를 보면 에러없이 각자 다른 출력값을 보여주는 것을 볼 수 있다.

• 이러한 점은 변수를 유연하게 사용할 수 있다는 장점이 될 수도 있지만, 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 크고, 특히 코드량이 많아졌을 때, 동일한 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생하는지 파악하기 힘들고 값이 바뀔 우려가 있다.

• 이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let 과 const이다.

let은 블록레벨의 스코프이고 재할당은 가능하지만 중복선언은 불가하다.

let 역시 간단한 코드로 설명할 수 있다.

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

let a = 20;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared

a = 20;
console.log(a); // 20

• var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지가 출력되고, 중복 선언이 불가능하다는 것을 볼 수 있다.

• a = 20 과 같이 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당은 가능하다.

const는 블록레벨의 스코프이고 재할당과 중복선언이 불가능하다

const a = 10;
console.log(a); // 10

const a = 20;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared

a = 20;
console.log(a);
// Uncaught TypeError: Assignment to constant variable

• let과 const의 차이점은 불변의 여부이다. let은 변수에 다른 값을 재할당 할 수 있지만, const는 재할당 시 에러메시지가 출력되는 것을 볼 수 있다.

스코프

🙌 아래는 함수레벨 스코프(var)에 대한 예시이다.

function hi() {
	if (true) {
    	var a = 5;
        console.log(a); // 5
    }
    console.log(a); // 5
}

func(); // 5
console.log(a); // ReferenceError: a is not defined

• 위처럼 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이고 함수 외부에서 선언한 변수는 모두 전역 변수로 취급되는 것이다.

🙌 블록레벨 스코프(let, const)

function hi() {
	if (true) {
    	let a = 5;
        console.log(a); // 5
    }
    console.log(a); // ReferenceError: a is not defined
}

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

• 위처럼 함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수로 취급되는 것이다.

✈ 호이스팅

먼저 말할 것은, 호이스팅은 var / let / const 모두에게서 일어난다는 것이다.

하지만 호이스팅에서 var와 let,const의 차이점은 분명히 존재한다.

🙌 var의 호이스팅

console.log(a); // undefined

var a = 5;
console.log(a); // 5

• 변수 a 가 선언되기 전에 참조되었음에도 에러가 발생하지 않는다. 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined 로 초기화를 해두었기 때문이다.
• 선언하지않는 변수를 참조했음에도 불구하고 에러가 발생하지 않고 undefined를 출력하는 것은 개발자에게 큰 혼란을 줄 수 있기때문에 ES6이후 let,const가 나오게 된 것에 대한 하나의 이유이다.

🙌 let,const의 호이스팅

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

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

• 변수 a 가 선언되기 전에 참조하니 에러가 발생한다. 이는 호이스팅이 발생하지 않는 것이 아니라, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone) 에 빠졌기 때문에 보이는 현상이다.
• 함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행하기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것이다.