[Javscript] 호이스팅(Hoisting)

• 호이스팅은 코드가 실행하기 전 '변수선언', '함수선언' 이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.
• 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.
• 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
• 코드 실행 전 이미 '변수선언', '함수선언' 이 저장되어 있기 때문에 선언문보다 '참조', '호출' 이 먼저 나와도 오류없이 동작한다.

자바스크립트 실행 컨텍스트에 의한 위의 현상을 호이스팅이라고 할 수 있다.

 

변수는 3단계에 걸쳐 생성되는데,

 

1단계 : 선언 단계 (Declartion phase)

• 변수를 실행 컨텍스트의 변수 객체에 등록한다.
• 이 변수 객체는 스코프가 참조하는 대상이 된다.

2단계 : 초기화 단계 (Initializtion phase)

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이 단계에서는 변수는 undifined 로 초기화 된다.

3단계 : 할당 단계 (Assignment phase)

• undefinded 로 초기화된 변수에 실제 값을 할당한다.

! Ex. 호이스팅 예시

 

- 변수 선언에서의 호이스팅 예

// 호이스팅 때문에 선언이 끌어올려져서 오류 안남.
console.log(text); // (선언 + 초기화 된 상태)
text = 'Hanamon!'; // (선언 + 초기화 + 할당 된 상태)
var text;
console.log(text);

// 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남.
console.log(text); // (선언 된 상태, 초기화(메모리 공간 확보와 undefined로 초기화) 안되서 참조 불가능 -> 에러남)
let text; // 여기서 초기화 단계가 실행됨

const text; // 에러남. 주의! 애초에 const 키워드로 재할당 불가능! 그래서 선언과 동시에 할당해야함

 

- 함수 선언에서의 호이스팅 예시

foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.

function foo1() {
  console.log('Hello');
}

var foo2 = function() {
  console.log('world');
}

============================================================================================
출처 : https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬

============================================================================================