[자바스크립트] 호이스팅(Hoisting)이란?

자바스크립트는 동기적이다

호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행된다

 

호이스팅(Hoisting)이란?

자바스크립트 코드에 선언된 함수 및 변수 코드가 실제로 이동하지는 않지만 최상단으로 끌어올린 것처럼 동작하는 것을 호이스팅이라고 한다. 스코프 내부 어디서든 변수 선언(var, let, const)은 최상위에 선언된 것 처럼 행동하는 것을 말하며 호이스팅은 스코프 단위로 일어난다.

호이스팅의 대상

• var 변수 선언, 함수 선언만 호이스팅이 되며 할당은 호이스팅이 발생하지 않는다
• let/const 변수의 선언도 호이스팅이 일어나지만 TDZ(Temporary Dead Zone)에 영향을 받기 때문에 호이스팅이 발생하지 않는것처럼 보인다
• let/const 변수 선언과 함수 표현에서는 호이스팅이 발생하지 않는다

var 변수 선언

var는 선언하기전에 사용할 수 있다

console.log(name) // maple

var name = 'maple' // var 변수 선언은 호이스팅이 된다

선언만 호이스팅이되고 할당은 호이스팅이 되지 않는다

var name // var 변수 선언은 호이스팅

console.log(name) // undefined

name = 'maple' // var 변수 할당은 호이스팅이 되지 않음

함수 선언식(Function Declaration)

• 일반적인 함수 선언
• 호이스팅이되서 코드 맨 앞줄에 자동으로 선언이된다

sayHi(); // 아래에 있는 함수가 호이스팅이 되었기때문에 sayHi()는 출력 가능

function sayHi() { 
  console.log("Hi");
}

 

호이스팅의 대상이 아닌것

let/const 변수 선언

let/const 변수의 선언도 호이스팅이 일어나지만 TDZ(Temporary Dead Zone)에 영향을 받기 때문에 호이스팅이 발생하지 않는것처럼 보인다

let name = 'maple'
const nickname = 'syrup'

함수 표현식(Function Expression)

• 함수를 변수에 저장
• 일반 함수와 다르게 호이스팅이 되지 않는다

sayHello(); // Uncaught TypeError: sayHello is not a function

let sayHello = function() {
  console.log("hello");
};

 

---

 

📘 참고

 

• 코딩앙마: 자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)