호이스팅

console.log(letKeyword)
let letKeyword = 'let is safe'

위처럼 코드를 작성하면
letKeyword is not defined 라는 에러가 발생함
간단히 설명하면 선언하기 전에 사용하려고 하여 찾을수 없기에 발생하는 에러

console.log(varKeyword)
var letKeyword = 'var is not safe'

위처럼 var를 사용하면
undefined 라는 내용을 출력함 ( 에러가 발생하지 않음 )

var를 사용하면 에러를 코드 작성시에 방지할 수 없음.

위 같은 차이점이 발생하는 이유가 호이스팅 때문
호이스팅은 위로 끌어 올려주는것.
자바 스크립트는 코드를 실행하기전에 한번 해석하는 절차를 거침
해석하고 재배열을하게됨.
위 let 과 var 모두 선언하며 값을 할당 하였지만 코드를 해석하는 과정에서 var의 경우는 선언부와 할당부를 나누어서 선언부가 최상단으로 올라오게됨
즉

var letKeyword ;
console.log(varKeyword)
letKeyword = 'var is not safe'

이런식으로 코드가 자동적으로 수정이된다는 것.

---

함수의 호이스팅

함수또한 호이스팅이 발생함.

function fn1 () {
  console.log('hoistion occurred')
}

const fn2 = function () {
  console.log('error occurred')
}

두개의 함수가 존재할 때
fn2는 호이스팅이 발생하지 않음
fn1은 호이스팅이 발생함.
그래서 fn2는 함수 선언보다 위에서 호출하면 에러가 발생함.

변수의 호이스팅

let 과 const는 호이스팅이 안될까?
변수를 선언하는 단계는 3단계정도로 나눌 수 있다.
선언단계 -> 초기화 단계 -> 할당 단계

선언 단계

선언한 변수를 식별자(변수명)가 담기는 객체에 할당하는 단계

초기화 단계

변수에 할당할 메모리 공간을 부여하는 단계

할당 단계

정의된 변수에 데이터가 할당되는 단계

TDZ ( Temporal Dead Zone )

선언되고, 메모리에 할당되기 그 사이 ( 메모리가 아직 부여되지 않은 상태 )
이때 참조를 하려고 하기 때문에 에러가 발생하는것.
let과 const 는 선언단계와 초기화 단계가 분리됨.

해석 단계에서 선언단계까지만 가고 실제 코드가 해당 부분까지 진행되어야 초기화 단계를 거치기 때문에 실제 코드 내에서 선언보다 위에서 참조를 하면 TDZ 존에 있기 때문에 에러가 발생함.

즉 호이스팅이 발생하지 않는게 아닌 선언단계만 올라가기 때문.

그에비해 var 의 경우에는

선언과 초기화가 함께 올라간다고 보면됨.
TDZ 단계가 없다고 보면됨.
함수도 동일함.