[개발] 호이스팅이란?

1.호이스팅(Hoisting)이란?

자바스크립트 엔진은 코드를 실행하기 전 변수선언과 함수선언을 먼저 메모리에 올려두는 과정을 거침

실제 코드 작성 순서와 실행 순서가 달라질 수 있음

이 과정을 호이스팅(끌어 올리기) 라고 부른다.

2. 자바스크립트 실행 과정: 컴파일과 실행

자바스크립트는 코드를 한 줄씩 바로 실행 하는 것이 아닌,

먼저 컴파일 단계에서 변수와 함수 언언을 찾아 메모리에 등록

• 변수/상수 선언(var, let, const)
• 함수 선언(function)

컴파일이 끝난 뒤, 코드가 순서대로 실행

2. 함수 선언문과 호이스

함수 선언문 전체가 메모리에 올라감

greet()

function greet() {

  console.log("안녕하세요!");

}

• 함수 선언문은 컴파일 단계에서 함수 전체 코드가 메모리에 등록
• 그렇기에 함수 위치가 함수 정의 위에 있어도 실행 오류 발생 안함

3. 변수 호이스팅:var vs let/const 차이

var

console.log(x); // undefined

var x = 10;

console.log(x); // 10

• var 변수는 선언만 컴파일 단계에서 끌어올려지고, 할당은 실행 단계에서 이루어짐
• console.log(x); 첫번째 호출은 선언된 상태지만 값이 할당되기 전이라 undifined 가 출력

let, const

console.log(y); // ReferenceError: Cannot access 'y' before initialization

let y = 20;

• let과 const도 선언이 호이스팅 됨
• 그러나 선언 이전에 일시적 사각지대(Temporal Dead Zone, TDZ)에 있어 접근시 에러 발생
• let과 const는 선언 전 사용시 오류 발생

4. 함수 표현식과 화살표 함수와 호이스팅

greet(); // ReferenceError: Cannot access 'greet' before initialization

const greet = function() {

  console.log("안녕하세요!");

};

greetArrow(); // ReferenceError: Cannot access 'greetArrow' before initialization

const greetArrow = () => {

  console.log("안녕하세요! 화살표 함수입니다.");

};

• 함수 표현식과 화살표 함수는 모두 변수에 함수를 할당 하는방식
• 변수 선언은 호이스팅 되지만 함수 값 할당은 변수 선언 이후에 이루어짐
• 때문에 변수 선언 이전에 호출시 ReferenceEorror 발생

정리

함수 정의 방식	호이스팅 대상	호출 가능 시점
함수 선언문	함수 전체	선언 이전 호출 가능
함수 표현식	변수 선언만	변수 선언 이후 호출 가능
화살표 함수	변수 선언만	변수 선언 이후 호출 가능