스코프와 호이스팅에서 알아보는 var, let, const 차이점

var

ES6 이전 사용하던 변수 선언 키워드이다.
ES6 이후 let과 const가 도입되면서 잘 사용하지 않는다.

스코프

var의 스코프는 함수 스코프(Function Scope) 로 var로 선언한 변수는 함수 내에서만 유효하다. 즉, 함수 내에 선언된 변수는 함수 외부에서 접근할 수 없다.
함수 내에서만 유효한 스코프를 가지기 때문에 if, for같이 블록 스코프인 구문 내에 변수를 선언하면 외부에서 var변수에 접근할 수 있다.

console.log(a); // undefined 출력(에러발생 X)
var a = 5;

function example() {
	var b = 7;
  	if(true) {
    	var c = 10;
    } 
  	console.log(c); // 10 출력
}

console.log(b); // 오류: example 함수 내에 존재하는 변수로 출력되지 않음

호이스팅

var로 선언한 변수는 선언된 위치와 상관없이 함수 또는 전역 스코프의 최상단으로 호이스팅된다.
초기화는 호이스팅되지 않아 초기화 전에 변수에 접근할 경우 변수는 undefined 값을 가지고 있다.

console.log(a); // undefined 출력 (변수 호이스팅)
var a = 10;
console.log(a); // 10 출력

중복선언 & 재할당

같은 스코프내에서 var 변수는 중복선언할 수 있다. 중복선언을 할 경우 변수의 값을 덮어쓴다.

var a = 5;
var b = 10;
console.log(b); // 10 출력

같은 스코프내에서 var 변수는 재할당도 가능하다.

var a = 5;
a = 10;
console.log(10); // 10 출력

let과 const

스코프

let 과 const 는 블록 스코프 를 가진다.
블록 스코프는 { } (중괄호) 를 기준으로 스코프를 가진다.
if for 등 블록 스코프를 가지는 구문 내에서 선언된 let 이나 const 변수는 블록 외부에서 접근할 수 없다.

if(true) {
	let a = 5;
}
console.log(a); // 오류: ReferenceError 발생

호이스팅

let 과 const 는 변수 호이스팅은 되지만,
초기화 전에 접근할 경우 ReferenceError를 발생시킨다.

function testHoisting() {
	console.log(a);
}

let a = 10;
testHoisting(); // 10 출력

function testHoisting() {
	console.log(a);
}

testHoisting(); // 오류: ReferenceError 발생
let a = 10;

중복선언

let 과 const 는 선언하고 나면 중복선언이 불가능하다.
let 은 선언했을 경우 재할당이 가능하고,
const 는 선언하고 나서 재할당이 불가능하다.

그래서 let 은 값을 초기화하지 않고 선언할 수 있지만

const 는 재할당이 불가능하기 때문에 초기화 없이 변수를 선언할 수 없다.

---

var, const, let 요약

선언	스코프	호이스팅	중복선언	재할당
var	함수 스코프	O	O	O
let	블록 스코프	△ (변수 호이스팅되지만, 초기화 전에 변수를 참조할 수 없음)	X	O
const	블록 스코프	△ (변수 호이스팅되지만, 초기화 전에 변수를 참조할 수 없음)	X	X