var, const, let - JavaScript

특성	var (default)	const	let
재선언	O	X	X
재할당	O	X	O
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
호이스팅	선언 + 초기화 호이스팅	선언만 호이스팅(TDZ)	선언만 호이스팅(TDZ)
window 객체 속성	전역 변수는 window 속성이 됨 (window.변수 로 접근가능)	window 속성 아님	window 속성 아님

💡 ES6(ES2015)부터 도입된 const, let은 변수의 스코프와 생명주기를 더 예측가능하게 만들어주므로 특별한 이유가 없다면 var 대신 const, let 사용

스코프

• 함수 레벨 스코프(Function scope)
  • 함수 내부에서 선언된 변수는 함수 내부에서만 유효
  • var 키워드로 선언된 변수와 function 선언에 적용
  • 함수 외부에서는 접근 불가능
  • 블록({})은 스코프 생성 X
• 블록 레벨 스코프(Block Scope)
  • 중괄호({}) 내부에서 선언된 변수는 해당 블록 내부에서만 유효
  • const, let 키워드로 선언된 변수에 적용
  • 함수, if 문, for 문, while 문 등 모든 블록에서 적용
  • 블록 외부에서는 접근 불가능

호이스팅(Hoisting)

• 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 할당되는 현상
• JavaScript엔진이 코드를 실행하기 전에 변수와 함수 선언을 스코프의 최상단으로 끌어올림
• 선언만 끌어 올려지고, 할당은 원래 위치에서 실행됨

🔎var 호이스팅

• var 변수는 선언과 초기화가 함께 호이스팅됨
• 선언 전에 접근해도 undefined 로 초기화되어 있음
• 값 할당은 코드 실행 시점에 이루어짐

🔎let, const 호이스팅

• let, consst도 호이스팅되지만 TDZ(Temporal Dead Zone) 영향을 받음
• 선언은 호이스팅 되지만, 초기화는 호이스팅되지 않음(reference error)
• 선언부에 도달하기 전까지 접근 불가능한 상태(TDZ)에 있음

🔎함수 호이스팅

• 함수 선언문
  • 함수 전체가 호이스팅됨
  • 선언전에도 호출가능

    sayHello(); 
    funtion sayHello(){ return "Hello!"; }

• 함수 표현식
  • 변수만 호이스팅됨(var, let, const 규칙에 따라)
  • 할당은 호이스팅되지 않음

    sayHi(); // **TypeError**: sayHi is not a function 
    var sayHi= function(){ return "Hi!"; };