[JS] var와 let의 차이

변수는 스코프(scope, 범위) 라는 것을 가집니다.
var은 함수 스코프, let은 블록 스코프를 가집니다.

var

function b() {
	var a = 1;
}
console.log(a); // Uncaught ReferenceError: a is not defined

a를 출력하면 에러가 발생합니다. a는 함수 안에 선언된 변수이므로 함수 바깥에서는 접근할 수 없습니다. 이렇듯 함수를 경계로 접근 여부가 달라지는 것을 함수 스코프라고 합니다.

if 문 안에 var을 넣었을 경우 입니다.

if (true) {
	var a = 1;
}
console.log(a); // 1

var은 함수 스코프(함수만 신경 씀)라서 if 문 안에 들어 있으면 바깥에서 접근할 수 있습니다.

let

if 문 안에 let을 넣었을 경우 입니다.

if (true) {
	let a = 1;
}
console.log(a); // Uncaught ReferenceError: a is not defined

let의 경우에는 에러가 발생합니다. 바로 let이 블록 스코프(블록을 신경 씀)라서 그렇습니다.
블록은 if 문, for 문 while 문, 함수에서 볼 수 있는 {}를 의미합니다. 블록 바깥에서는 블록 안에 있는 let에 접근할 수 없습니다. const도 let과 마찬가지로 블록 스코프를 가집니다.

var와 let의 for 문

for(var i = 0; i < 5; i++) {}
console.log(i); // 5

var은 블록과 관계가 없어서 문제없이 돌아갑니다. for 문이 끝났을 때 i가 5가 되어 있다는 점에 주목하세요.

for(let i = 0; i < 5; i++) {}
console.log(i); // Uncaught ReferenceError: i is not defined

let은 에러가 발생합니다. for 문 블록 바깥에서 접근했기 때문입니다.