호이스팅(Hoisting) 정리

호이스팅 이란

변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다.

호이스팅 현상이 발생하는 이유

javascript는 코드가 실행될 때 실행 컨텍스트가 생성된다.

이 때, 실행 컨텍스트 내부 변수 객체에서 현재 컨텍스트에 사용되는 변수 또는 함수를 생성한다.

변수가 생성되는 과정은 3단계로 나뉜다.

1. 변수 선언

2. 변수 초기화

3. 변수에 사용자가 지정한 값으로 초기화

여기서 3. 변수에 지정한 값 할당은 해당 실행 컨텍스트의 변수 객체 생성이 완료된 뒤에 실행된다.

즉, 변수의 선언 + 초기화 와 사용자가 지정한 값 초기화가 발생되는 환경이 나뉘어 발생된다.

함수의 경우에는 함수 선언문인지  함수 표현식 형태인지 따라 생성과정에 차이가 있다.

함수 선언문의 경우에는 변수 객체가 만들어지는 과정에서 함수 선언, 초기화, 사용자 지정 값으로 초기화  3단계가 모두 발생한다. 

즉, 실행 단계에서 함수 선언문보다 함수 호출이 먼저 발생해도 에러가 나지 않고 정상적으로 실행된다.

함수 표현식의 경우에는 익명함수를 생성하여 변수에 할당하는 방식이다. (변수 호이스팅 적용)

즉, 실행 단계에서 함수 표현식보다 함수 호출이 먼저 발생하게 된다면 TypeError 가 발생한다.

변수 호이스팅 예제 코드

console.log('이름: ', name);
 
var name = "Dubbing";
 
console.log('이름: ', name);

코드의 실행결과는 아래와 같다.

변수 선언보다 사용이 먼저 되었으나 호이스팅으로 인해 에러가 발생하지 않는다.

예제 코드가 실행되면 실행 컨텍스트 내부에 변수 객체에는 name 변수가 선언되고 값은 undefined 로 초기화 된다.

변수 객체 생성이 마무리 되면 1번 라인이 실행되며, 이 때 변수 name 의 값은  undefined 로 초기화 되어있으므로 undefined 가 출력된다.

3번 라인에서 사용자가 지정한 값으로 초기화가 이루어진다.

5번 라인이 실행되는 시점에 변수 name 은 Dubbing 으로 초기화가 이루어졌으므로 Dubbing 이 출력된다.

함수 호이스팅 예제 코드

printName("Dubbing"); // 에러가 발생하지 않음
 
// 함수 선언문 형태 (함수 호이스팅 발생)
function printName(name) {
  console.log('이름: ', name);
}
 
 
printAge(20); // TypeError 가 발생한다.
 
// 함수 표현식 형태 (변수 호이스팅 발생)
var printAge = function(age) {
  console.log('나이: ', age);
}
 
// printAge(20); // 정상 실행된다.

참고

- https://poiemaweb.com/js-function

- 인사이드 자바스크립트