[JavaScript] var, let, const의 차이점 / 스코프 / 변수 호이스팅

var, let, const의 차이를 알기 전에..

먼저 var, let, const 차이를 알기 전에 스코프에 대해서 알아야 합니다.

스코프란 간단하게 변수를 사용할 수 있는 위치를 의미합니다. 

 

스코프란??

JavaScript에서는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지 유형의 스코프가 있습니다.

전역 스코프는 코드의 어느 곳에서나 접근할 수 있는 변수를 말합니다.

전역 스코프에서 선언된 변수는 어디서든 참조할 수 있습니다.

지역 스코프는 함수 내에서 선언된 변수를 말합니다.

함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.

또한, 함수 내부에서는 외부 스코프에서 선언된 변수를 참조할 수 있습니다.

 

var, let, const의 차이

자바스크립트는 ES5 이전까진 var라는 변수를 사용했습니다.

var 키워드로 선언한 변수는 중복선언이 가능하고 전역 스코프로 인정되어 동일한 이름의 변수가 이미 선언되어 있는걸 모르고 변수를 중복 선언하면 먼저 선언된 변수 값이 변경되는 부작용(변수 호이스팅)이 발생합니다.

이러한 단점을 보완하고자 ES6에서 let, const의 새로운 변수 선언 키워드가 나왔습니다.

let과 const는 모든 코드 블럭(함수, if문, for문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let은 중복 선언 불가, 재할당이 가능하며, const는 중복 선언 불가, 재할당 불가하다.

 

	스코프	변수 선언	변수 할당
var	전역 스코프	중복 선언 가능	재할당 가능
let	블록 스코프	중복 선언 불가	재할당 가능
const	블록 스코프	중복 선언 불가	재할당 불가

변수 호이스팅이란??

변수를 선언하기 전에 해당 변수를 참조할 수 있다는 것을 의미합니다.

즉, 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려지는 것을 말합니다.

console.log(x); // undefined가 출력됩니다.
x = 10; // 변수에 값을 할당합니다.

변수 x가 선언되기 전에 변수를 참조하면, 해당 변수는 undefined로 초기화됩니다.

이런 동작 방식 때문에, 변수 호이스팅은 코드의 실행 결과를 예측하기 어렵게 만들 수 있습니다.

ES6 이후에는 let과 const 키워드를 사용하여 변수를 선언하면, 변수 호이스팅이 발생하지 않습니다.

따라서, 가능하면 var 키워드를 사용하지 않고 let과 const 키워드를 사용하여 변수를 선언하는 것이 좋습니다.

결론, var는 쓰지말자!!

---

이 글을 읽고 관련된 아래의 내용도 찾아보면 좋습니다!

• 스코프 체인
• 동적 스코프 / 정적(렉시컬) 스코프
• TDZ (Temporal DeadZone)