호이스팅(hoisting) / what is hoisting

INTRO

자바스크립트를 공부하다보면 꼭 듣게 되는 hoisting이 무엇인 지 알아보자!

---

hoisting이란?

함수 선언문과 var로 변수를 할당할 때 이 선언들을 모두 끌어올려서 함수 유효 범위 최상단에 선언되는 것이다
- 메모리 상에는 영향이 없다
- 클래스는 hoisting되지 않는다 ➡️ 반드시 선언 후에 사용할 수 있다

• javascript parser에 의해 내부적으로 이루어지는 것이다

(cf) 함수 선언문

function foo () {
	// 함수 정의부
}

(cf) 함수 표현식 ➡️ hoisting이 발생하지 않는다

var foo = function () {
	// 함수 정의부
}

---

hoisting 예시

예시 1

function foo() {
    func1();

    function func1() {
        console.log('hello world');
    }
}
foo(); // 'hello world'

예시 2

function foo() {
    func1(name);

    function func1(name) {
        console.log('hello ', name);
    }

    var name = 'john'
}
foo(); // hello undefined

• name 변수가 선언된 것만 호이스팅 되지, 할당된 값은 호이스팅되지 않아 undefined 처리가 된 것이다

예시 3

• 위 예시에서 var을 let으로만 바꿈

function foo() {
    func1(name); // Uncaught ReferenceError: Cannot access 'name' before initialization

    function func1(name) {
        console.log('hello ', name);
    }

    let name = 'john' // 바꾼 부분
}
foo(); 

예시 4

• 함수 선언문을 함수 표현식으로 변경

function foo() {
    func1(name); // Uncaught ReferenceError: func1 is not defined

    func1 = function (name) {
        console.log('hello ', name);
    }

    var name = 'john'
}
foo(); 

---

hoisting 방지

1. var을 삼가한다

• ES6 부터는 var 사용을 권장하지 않는다
• 그 대신 let 을 사용하도록 하는데, 아직 ES5 이하 버전으로 개발된 코드도 많기 때문에 알아둘 필요는 있다

2. 함수 표현식을 사용한다.

• 함수 표현식에서는 hoisting이 발생하지 않기 때문이다

---

참고 자료

[Javascript] 호이스팅(Hoisting)이란
자바스크립트 완벽 가이드/ 데이비드 플래네건 지음/ 한빛미디어, O'REILLY