[JavaScript] 호이스팅(Hoisting)이란? (호이스팅의 개념과 예제)

🎣 Hoisting

🐟 Hoisting 이란?

Hoist는 직역하면 들어(끌어)올리다 라는 뜻이다.
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

 

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 의 최상단에 선언한다.
자바 스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑고,
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.

유효 범위 : 함수 블록(중괄호 : {}) 안에서 유효

 

즉, Hoisting이란 자바 스크립트 Parser가 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.

 

🚨 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
🚨 실제 메모리에선 변화가 없다.

 

예)

function catName(name) {
    console.log("My cat's name is " + name);
}

catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

위 예제처럼 함수 선언 → 함수 호출 순서로 실행하는 게 일반적이다.
자바스크립트는 아래 예제처럼 함수 호출 → 함수 선언 순서로도 동작이 가능하다.

catName("Chloe");

function catName(name) {
    console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

Hoisting은 데이터 타입 및 변수와도 잘 작동한다.
변수는 선언하기 전에 초기화 사용될 수 있다.
하지만 초기화 없이는 사용할 수 없다.

 

예)

num = 6; // 초기화
num + 7;
var num; // 선언
// num이 먼저 선언되지 않더라도 에러를 내지 않는다.

자바스크립트는 초기화가 아닌 선언만 끌어올린다.
변수를 선언한 뒤 나중에 초기화 시켜 사용한다면, 그 값은 undefined로 지정된다.

var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;

var x = 1; // x  초기화
var y; // y 선언
console.log(x + " " + y); // '1 undefined'
y = 2; // y 초기화

🐟 Hoisting 대상

🚨 var 변수/함수 선언문 에서만 호이스팅이 일어난다.
🚨 var 변수/함수의 선언만 위로 끌어올려지며, 할당은 끌어올려지지 않는다.
🚨 let, const 변수 선언과 함수표현식에선 호이스팅이 발생하지 않는다.

 

예) var vs let

var name;
console.log(name); // 호이스팅 발생
// output : "jin"
name = "jin";

let name2;
console.log(name2); // 호이스팅 발생 X
// output : undefined
name2 = "jin";

예) 함수 표현식 vs 함수 선언문

foo(); // output: "hello"
foo2(); // undefined

function foo() { // 함수선언문
        console.log("hello");
}
var foo2 = function() { // 함수표현식
        console.log("hello2");
}

호이스팅은 함수 선언문과 함수 표현식에서 서로 다르게 동작하기 때문에 주의해야한다.
변수에 할당된 함수표현식은 호이스팅되지 않는다.

🐟 Hoisting 우선순위

• var 변수 선언 vs 함수 선언문
  • var 변수 선언이 함수 선언문보다 위로 끌어올려진다.
• 값이 할당되어있지 않은 var vs 값이 할당되어 있는 var
  • 값이 할당되어 있지 않은 변수의 경우, 함수선언문이 변수를 덮어쓴다.
  • 값이 할당되어 있는 변수의 경우, 변수가 함수선언문을 덮어쓴다.

var myName = "Heee"; // 값 할당 
var yourName; // 값 할당 X

function myName() { // 같은 이름의 함수 선언
    console.log("myName Function");
}
function yourName() { // 같은 이름의 함수 선언
    console.log("yourName Function");
}

console.log(typeof myName); // > "string"
console.log(typeof yourName); // > "function"

🐟 Hoisting 사용 시 주의

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

let / const 를 사용한다.
var 를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다.

 

 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting - 용어 사전 | MDN

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog