호이스팅이 뭘까 ?

아래 코드를 한번 실행 해보자

console.log(a)
var a = 1;
console.log(a)

⬇️⬇️⬇️
undefined
1

위 코드를 보면 a가 선언되기 전에 a를 출력했는데 에러가 발생하지 않고 'undefined'가 출력된다.
왜 에러가 뜨지않고 undefined가 출력될까 ?

호이스팅

호이스팅(Hoisting)은 'Hoist(감아올리다) + ing' 뜻처럼 함수 안에 있는 선언들을 모두 끌올해서 해당 함수의 유효 범위의 최상단에 선언하는 것을 말함.

JavaScript가 컨텍스트 내부 전체를 한 번 훑으며 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의 식별자 등을 순서대로 수집함.

호이스팅 대상

• var
• 함수 (함수 표현식은 호이스팅이 되지 않는다.)
• 선언식의 함수만 호이스팅이 된다.
• let, const의 키워드로 변수, 함수를 선언 및 정의할시 호이스팅X

선언식 함수

clickEvent() / "안녕하세요"

function clickEvent() {
  console.log("안녕하세요")
}

표현식 함수

clickEventShow()

var clickEventShow = function clickFunc() {
  console.log("안녕하세요")
}

에러발생 / 호이스팅이 되지 않음

정리

이처럼 변수 및 함수의 선언문이 코드의 최상두로 끌어 올려진 것처럼 동작하는 현상을 호이스팅 이라고 한다.