var: 함수 스코프

var 키워드는 함수 스코프(function scope)만 지원하고 블록 스코프(block scope)는 지원하지 않는다.

스코프는 변수의 유효 범위와 관련이 있다.

• 함수 스코프 : 유효 범위가 함수 내부
• 블록 스코프 : 유효 범위가 블록({ }) 내부

 // 함수 내부에서 var 키워드로 선언한 apple 변수를 함수 외부에서 사용하여 오류 발생
func()
function func() {
  var apple = 5
  console.log(apple)
}
console.log(apple) // Uncaught ReferenceError: apple is not defined

var 키워드는 블록 스코프를 지원하지 않으므로, 블록 내부에서 var 키워드로 변수를 선언해도 블록 외부에서 사용할 수 있다.

var apple = 3
{
	var apple = 5
	console.log(apple) // 5
}
console.log(apple) // 5

마지막 코드에서 3이 출력될 것 같지만, var는 함수 스코프만 지원하므로 재할당한 값인 5가 출력된다.

이처럼 var 키워드는 블록 스코프를 무시하므로 개발자의 실수로 인해 오류가 발생할 수 있고 디버깅을 어렵게 한다. 그래서 ES6부터 변수의 유효 범위를 명확하게 하고자 var 대신에 let과 const 키워드가 추가되었다.

let과 const: 블록 스코프

let과 const 키워드는 블록 스코프를 지원한다. 즉, 변수의 유효 범위를 블록 내부로 제한하므로 블록 외부에서는 사용할 수 없다. let 선언 변수는 변수값을 언제든지 변경할 수 있지만(mutable), const는 변경이 불가능하다(immutable).

{
	let apple = 3
	console.log(apple) // 3
	apple = 5
	console.log(apple) // 5
	let apple = 7 // error
}
console.log(apple) // error

const와 let을 우선적으로 사용하고, var는 전역 변수가 꼭 필요할 때 최상위 수준에서만 예외로 사용하도록 하자.