호이스팅 - 이도영

호이스팅(Hoisting)이란

JS에서 변수와 함수 선언을 해당 스코프의 상단으로 끌어올리는 동작을 의미한다. 즉 코드가 실행 전에 변수와 함수 선언문이 메모리에 먼저 등록되는 것처럼 동작한다. 

 

JS엔진은 코드를 실행하기 전에 컴파일 단계에서 변수와 함수 선언을 찾아 메모리에 저장한다. 이로 인해 변수와 함수를 선언하기 전에도 해당 변수와 함수를 참조할 수 있는 현상이 발생된다.

 

호이스팅 중 두가지가 있다.

함수 호이스팅과 변수 호이스팅

 

함수 호이스팅이란 ?

JS에서 함수 선언문이나 함수 표현식을 코드 상단으로 끌어올리는 동작이다. 즉 함수를 선언하기 전에 해당 함수를 호출하는 현상

 

함수 선언문

sayHello(); // 호출 가능

function sayHello() {
  console.log("Hello!");
}

위 코드에서 sayHello를 선언하기 전에 해당 함수를 호출 했는데도 오류가 발생하지 않고 Hello라는 메세지가 출력이 되는데, 이는 함수 호이스팅으로 인해 가능한 것이다. JS엔진에서는 코드를 해석할 때 함수 선언문을 먼저 찾고, 해당 함수를 메모리에 등록하여 호출할 수 있도록 한다.

 

하지만 함수 표현식을 사용할 때는 함수 호이스팅이 발생하지 않는다. 함수 표현식은 변수에 함수를 할당하는 방식으로 작성한다. 변수는 호이스팅이 되지만, 함수 표현식 자체는 호이스팅이 되지 않는다. 따라서 함수 표현식을 변수에 할당하기 전에 호출하면 오류가 발생한다.

sayHello(); // 오류 발생

var sayHello = function() {
  console.log("Hello!");
};

 

위 코드에서 함수 표현식을 변수 sayHello에 할당하기 전에 해당 함수를 호출하면 오류가 발생한다. 함수 호이스팅을 사용할 때 코드의 가독성 및 유지보수를 위해 함수 선언문을 상단에 작성하는 것이 좋다.

 

변수 호이스팅이란?

JS에서 변수 선언이 해당 스코프의 상단으로 끌어올리는 동작이다. 즉 변수를 선언하기 전에 해당 변수를 참조할 수 있는 현상을 말한다.

변수 호이스팅은 단계에 따라 다르다.

1. 변수 선언(Delaration) : 변수의 이름을 식별자로 선언하는 단계

2. 변수 초기화(Initialization) : 변수에 값을 할당하는 단계

 

변수 호이스팅에서는 변수 선언 단계만 끌어 올려진다. 변수 초기화는 원래 위치에서 이루어진다.

console.log(message); // undefined

var message = "Hello!";
console.log(message); // "Hello!"

위 코드에서는 변수 massage는 선언하기 전에 참조 되었지만, 오류가 발행하지 않고 'undefined'가 출력된다. 이는 변수 호이스팅으로 인해 가능한 동작이다. JS엔진은 변수 선언을 먼저 찾고, 해당 변수를 메모리에 등록하여 할당될 값에 대한 공간을 확보한다. 따라서 변수 선언  전에 변수를 참조해도 오류가 발생하지 않고 'undefined'로 초기화 된다.

 

let, const 

함수 표현식

console.log(message); // ReferenceError: Cannot access 'message' before initialization
let message = "Hello!";
console.log(message); // "Hello!"

위의 코드에서 let으로 변수 message를 선언하고, 해당 변수를 선언하기 전에 참조하면 ReferenceError가 발생합니다. 이는 let 변수도 호이스팅되지만, 변수가 선언되기 전까지는 접근할 수 없는 일시적인 사각 지역에 있기 때문입니다.

 

 

 

 

 

 

 

 

참조 : https://minprogramming.tistory.com/entry/%ED%95%AD%ED%95%B4-99-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-2%EC%9D%BC%EC%B0%A8