Hoisting (호이스팅) - JavaScript

Hoisting이란?

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

 

Hoisting 요약

- 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것이다.
- var로 선언한 변수의 경우 호이스팅이 일어나면 undefined로 변수를 초기화한다.
- 실제로 코드가 상단으로 옮겨지는 것은 아니며 내부적으로 끌어올려 처리하는 것이다.
- 함수의 경우 함수 선언식 대신 함수 표현식을 사용하면 호이스팅되지 않는다.
- 변수 선언은 가급적 var 대신 let과 const를 사용하도록 한다.

 

함수 선언식 Hoisting

JavaScript가 코드를 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것이다.

function hello(name) {
    console.log('hello~' + name)
}

hello('gayeon')

//hello~gayeon

아래 코드는 함수를 작성하기 전에 함수를 호출하였지만 똑같이 동작한다.

hello('gayeon')

function hello(name){
  console.log('hello~' + name)
}

//hello~gayeon

 

함수 선언식 vs 함수 표현식

함수 표현식을 이용하면 함수의 호이스팅을 방지할 수 있다.

함수 표현식은 변수에 함수를 정의하는 것으로 함수의 이름은 없어도 된다.

hello('gayeon')

const hello = function(name) {
  console.log('hello~' + name)
}

// ReferenceError: hello is not defined

 

var 변수 hoisting

Hoisting은 변수 선언에서도 마찬가지로 동작한다.

num += 1
var num = 0
//num이 선언되지 않더라도 에러를 내지 않음

Hoist는 초기화가 아닌 선언만 끌어올린다. 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면, 그 값은 undefined로 지정된다.
위 코드에서 `console.log(num)`을 하면 0이 입력됨

 

let, const를 사용하여 hoisting이 되는 것을 방지할 수 있다.

num += 1
let num = 0

console.log(num) // ReferenceError: num is not defined

그러나 let, const에선 호이스팅이 발생하지 않는 것처럼 보이지만, 그렇지 않다.

let num = 1

{
  console.log(num)
  let num = 2
} // ReferenceError: Cannot access 'num' before initialization

호이스팅이 발생하지 않았다면 전역변수의 num을 출력해야 하지만, 호이스팅이 발생했기 때문에 참조 에러가 발생했다.

그러므로 let, const를 사용하면 호이스팅이 발생하지 않는 것처럼 동작할 뿐, 호이스팅은 발생한다.

 

Hoisting의 우선순위

var 변수 > 함수
변수가 함수보다 더 위로 끌어올려진다.

 

Hoisting 주의점

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
• var 대신 let/const 사용하기
• 함수 선언문 대신 함수 표현식 사용하기
• 함수와 변수를 가급적 상단에 사용한다.

 

 

 

---

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting