javascript 변수 : var / let / const

var

• ES6 이전에 사용되던 변수 선언 키워드
• var로 선언된 변수는 함수 스코프(function scope)를 가집니다. 즉, 변수 선언이 함수 내에서 이루어지면 그 함수 내에서만 유효합니다. 함수 외부에서는 전역 변수로 취급됩니다.
• var로 선언된 변수는 선언이 코드 상단으로 끌어올려지는 호이스팅 현상이 발생합니다. 선언만 호이스팅되고, 초기화는 원래 위치에서 이루어집니다.
• 같은 스코프 내에서 동일한 이름으로 여러 번 var를 재선언이 가능합니다.

let

• ES6에서 새로 도입된 변수 선언 키워드로, var의 문제를 개선하기 위해 만들어졌습니다.
• let으로 선언된 변수는 블록 스코프(block scope)를 가집니다. 즉, 코드 블록 내에서만 유효하고, 블록 외부에서는 접근할 수 없습니다.
• let도 호이스팅은 되지만, 변수 초기화가 이루어지기 전까지는 접근할 수 없습니다. 
• 같은 스코프 내에서 동일한 이름으로 let을 재선언할 수 없습니다.

const

• ES6에서 도입된 키워드로, 변수의 값이 변하지 않도록 보장하는데 사용됩니다.
• const로 선언된 변수도 let과 마찬가지로 블록 스코프(block scope)를 가집니다.
• const도 호이스팅이 발생하지만, 초기화되기 전에 값을 사용할 수 없습니다.
• const로 선언한 변수는 재선언도 불가능하고, 값의 재할당도 불가능합니다. 하지만 객체나 배열을 const로 선언하면 해당 객체나 배열의 내용(속성/요소)은 수정할 수 있습니다.

Hosting

• 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 과정입니다. 즉, 코드에서 변수를 선언하기 전에 접근하려고 해도, 자바스크립트 엔진은 변수를 미리 선언한 것으로 간주하여 해당 변수를 사용할 수 있게 됩니다. 
  • var
    • var로 선언된 변수는 선언만 호이스팅됩니다. 즉, 변수 선언이 코드 상단으로 끌어올려지지만, 초기화는 원래 위치에서 일어납니다.
  • let, const
    • let과 const도 호이스팅은 되지만, 변수 초기화가 일어나기 전에 해당 변수에 접근하려고 하면 오류가 발생합니다. 이를 Temporal Dead Zone (TDZ)이라고 부릅니다.
  • 함수
    • 함수 선언식(함수 리터럴로 선언된 함수)은 전체가 호이스팅됩니다. 즉, 함수 선언이 코드의 위로 끌어올려져, 선언된 함수는 정의되기 전에 호출할 수 있습니다.
    • 반면에, 함수 표현식으로 선언된 함수는 호이스팅되지 않거나, 변수처럼 선언만 호이스팅되고 초기화가 뒤따릅니다.

declaration(); // "Hello!"
expression(); // TypeError: expression is not a function

function declaration() { // 함수 선언식 ( 호이스팅 가능 )
  console.log("Hello!");
}

const expression = function () { // 함수 표현식 ( 호이스팅 되지만, 초기화 되기 전에 사용 할 수 없습니다. )
  console.log("Hello!");
};

정리

	var	let	const
Scope	함수 스코프	블록 스코프	블록 스코프
재선언	O ( 가능 )	X ( 불가능 )	X ( 불가능 )
재할당	O ( 가능 )	O ( 가능 )	X ( 불가능 )
호이스팅	전부 호이스팅이 가능하나, 초기화는 선언된 위치에서 일어납니다.
초기화 전에 접근	`undefined` 으로 접근 가능	X ( TDZ 오류 발생 )	X ( TDZ 오류 발생 )
사용 시점	전역 접근이 가능한 변수는 의도치 않은 버그를 일으킬 가능성이 높기 때문에 사용하지 말자!	값이 변하는 경우	값이 변하지 않는 경우 ( 객체/배열은 내부 수정은 가능하다. )