📌 Hoisting(호이스팅)이란?

• 함수 안에 선언된 변수들을 유효 범위의 최상단으로 끌어올려 선언하는 것
• 쉽게 말해, 어떠한 함수 안에 변수나 함수가 아래쪽에 존재하는 경우 JavaScript Parser가 필요한 값들을 제일 위로 끌어올리는 것을 의미한다.

JavaScript 호이스팅 과정

1. JavaScript Parser가 함수가 실행되기 전 해당 함수 전체를 한 번 훑는다.
2. 함수 안에 존재하는 필요한 변수 및 함수들에 대한 정보를 기억하고 있다가 실행시킨다.
   -> 실제로 해당 코드가 상단으로 끌어올려지는 것은 아니고, JavaScript Parser가 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다.

호이스팅 대상

• var로 선언된 변수와 함수 선언문에서만 호이스팅이 일어난다. let이나 const같은 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는다.
• 할당의 경우에는 호이스팅되지 않는다. 예를 들어 var로 num변수가 선언된 이후 num=100과 같이 할당이 되었을 경우에는 호이스팅이 발생하지 않는다.

Example - var변수 호이스팅

/* 작성된 코드 */
console.log("안녕하세요")
var name = "철수"
let friend = "영희"
console.log(name, friend)

/* Javascript Parser 내부의 호이스팅 결과 */
var name					//var변수가 호이스팅됨
console.log("안녕하세요")
name = "철수"				   //변수에 할당
let friend = "영희"		   //let변수는 호이스팅되지 않음.
console.log(name, friend)

위의 코드가 직접 작성한 코드라고 할 때 Javascript Parser내부에서 호이스팅된 결과는 아래와 같은 코드의 형태를 띈다. Javascript Parser안에서 var변수로 선언된 name은 호이스팅과정을 거쳐 맨 위에 선언되게 되고 기존에 선언된 자리에는 값의 할당이 일어난다. let변수는 호이스팅되지 못하므로 변화가 없다.

Example - 함수 호이스팅

/* 작성된 코드 */
function marathon(runner) {
  var status = isRunning()
  console.log(`${runner}님은 ${status}`)
      
  function isRunning() {
    return '달리는 중입니다.'
  }
}

marathon("철수")

/* Javascript Parser 내부의 호이스팅 결과 */
function marathon(runner) {
  var status					//var변수 호이스팅됨
  
  function isRunning() {		//함수선언문 호이스팅됨
    return '달리는 중입니다.'
  }
  
  status = isRunning()			//변수에 할당
  console.log(`${runner}님은 ${status}`)
}

marathon("철수")

위의 코드가 직접 작성한 코드라고 할 때 Javascript Parser내부에서 호이스팅된 결과는 아래와 같은 코드의 형태를 띈다. Javascript Parser안에서 아래쪽에 선언된 isRunning()이라는 함수는 상단으로 끌어올라와져 선언된다. 이 때 var로 선언된 status 또한 상단으로 함께 끌어올라와진 것을 확인할 수 있다. 이후에 status 변수에 isRunning()함수는 할당된다.

---

📌 정리

우리가 작성한 코드 내부에서 JavaScript Parser는 호이스팅 과정을 통해 var변수와 함수 선언문을 최상단으로 끌어올려 실행시킨다는 것을 알 수 있었다.