호이스팅이 뭔가요?

• 런타임(프로그래밍 언어가 구동되는 환경) 이전에 자바스크립트는 실행 컨텍스트를 생성하는데, 실행 컨텍스트의 생성 단계에서 실행 할 코드를 읽어서 코드를 실행하는데 필요한 변수나 함수를 메모리에 등록합니다.
• 그래서 실제로 코드가 실행 될 때, 변수 선언이 어디에 존재하던지 상관없이 변수를 참조할 수 있습니다.
• 이걸 변수 선언이 코드의 가장 위로 올려보내진 것 처럼 보인다 해서 호이스팅이라고 부릅니다.
  
  

var

재선언O 재할당O 범위 function

• var 키워드는 새로운 변수를 생성하기 위한 키워드입니다.
• var 키워드로 선언된 변수는 선언만 하고 초기화 하지 않아도, 기본적으로 자바스크립트 엔진에 의해 undefined라는 값으로 초기화 되는 특징이 있습니다.

var 문제점

• 변수를 중복으로 선언할 수 있고,

• 블록 레벨이 아닌 함수 레벨 스코프를 가지고 있습니다.
  

• 그리고 변수 호이스팅에 의해 var 키워드로 선언된 변수는 선언과 동시에 undefined로 초기화되어 선언부가 참조되는 위치보다 아래에 있어도 참조할 수 있는 문제점이 있습니다.

let

재선언X 재할당O 범위{ 블록 레벨 }

var 키워드의 단점을 보완하기 위해 ES6에서 도입된 새로운 키워드

• 같은 스코프 내에서 중복 선언을 허용하지 않는다. 변수 중복 선언 금지
• var 키워드의 함수 레벨이 아닌 블록 레벨 스코프를 가집니다.
  => 함수 뿐만 아니라 모든 코드 블록 내에 선언된 변수(지역 변수)는 해당 유효 범위(스코프)를 벗어나면 사용할 수 없다.
• let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
  => var 키워드는 선언과 동시에 undefined로 초기화 되는 반면, let 키워드는 선언과 초기화 단계가 분리되어 진행됩니다. 그래서 초기화 이전에 변수를 참조하게 되면 참조 에러가 발생합니다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ: Temporal Dead Zone) 라 부른다.

호이스팅이란 자바 스크립트 함수가 실행되기 전 함수 내 필요한 변값들을 모아 유효 범위의 최상단에서 선언한 것처럼 동작하는 방식을 말하는데요. var로 선언된 변수는 호이스팅 시 변수 선언만 최상단으로 끌어올려지며, 초기화는 그대로 남아 있어 접근 시 undefined 값을 반환합니다. let과 const 역시 호이스팅되지만 '임시적 사각지대(TDZ)’ 때문에 선언 이전 변수 접근 시도 시 ReferenceError가 발생합니다.

const

재선언X 재할당X 범위{ 블록 레벨 }

• let 키워드와 마찬가지로 ES6에서 추가된 문법
• const 키워드는 상수(constant)를 선언하기 위해 사용하지만, 반드시 상수만을 위해 사용하지는 않는다. const 키워드의 특징은 let과 대부분 동일

const 특징

• 선언과 동시에 초기화 해야한다
  

• 한번 초기화 된 값에 재할당 금지
  var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 불가능하지만 객체 내부의 속성 변경은 가능