[Javascript] 호이스팅(Hoisting)이란?

 

호이스팅(Hoisting)이란?

- 함수 안에 있는 선언을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다

- 자바스크립트 함수는 실행되기 전에 함수 안에 선언된 변수값을 모아서 최상단에 선언한다.

- 따라서 변수를 어느 위치에 선언하든지 함수의 가장 위로 끌어올려져서 실행된다.

 

실행순서:

1. 자바스크립트 Parser가 함수 실행 저 해당 함수를 한 번 훑는다

2. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 먼저 실행시킨다.

 

주의사항:

- 유효범위: 함수블록 {}안에서 유효

- 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리한다.

- 실제 메모리에서는 변화가 없다.

 

호이스팅 대상

var 로 선언된 변수와 함수선언문만 호이스팅이 일어난다

- var 변수/함수의 선언만 위로 끌어올려지며, 선언 후 할당된 값은 끌어올려지지 않는다

- let/const 변수 선언/함수는 호이스팅이 발생하지 않는다.

 

변수선언 예시)

// 실제 코드
console.log("hello");
var myname = "Jaehyung"; // var 변수 
let myname2 = "Dayoung"; // let 변수 


// JS Parser 내부의 호이스팅(Hoisting)의 결과
var myname; // var 변수 
console.log("hello");
myname = "Jaehyung";
let myname2 = "Dayoung"; // let 변수

 

변수선언 예시2)

// 실제 코드
console.log(name); // undefined
console.log(name2); // Error: Uncaught ReferenceError: bar is not defined
var name = "Jaehyung";
let name2 = "Dayoung";


// JS Parser 내부의 호이스팅(Hoisting)의 결과
var name;
console.log(name);
console.log(name2);
name = "Jaehyung";
let name2 = "Dayoung";

위 예시처럼 var 변수는 호이스팅으로 인해 우선적으로 가장 위에서 선언이 되고 후에 할당이 되지만, let 변수는 호이스팅이 적용되지 않는다.

 

함수선언 예시)

// 실제 코드
foo();
foo2();

// 함수선언문
function foo() { 
	console.log("hello");
}

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

// JS Parser 내부의 호이스팅(Hoisting)의 결과
var foo2;

// [Hoisting] 함수선언문
function foo() { 
	console.log("hello");
}

foo(); // hello
foo2(); // ERROR!! 아직 할당이 되지 않았다 

foo2 = function() { 
	console.log("hello2");
}

주의:

- 호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야한다.

- 함수선언문 (function foo(){ })은 함수 자체가 호이스팅이 된다.

- 함수표현식 (var foo2 = function() { })은 호이스팅이 일어날때 foo2변수에 대한 선언만 호이스팅되고 할당은 후에 된다.

 

호이스팅 우선순위

// 실제 코드
var myName = "hi";
function myName() {
	console.log("yuddomack");
}
function yourName() {
	console.log("everyone");
}
var yourName = "bye";


// JS Parser 내부의 호이스팅(Hoisting)의 결과
var myName; 
var yourName; 

function myName() {
	console.log("yuddomack");
}
function yourName() {
	console.log("everyone");
}
myName = "hi";
yourName = "bye";

같은 이름을 가진 변수와 함수가 있다면 호이스팅시 변수 선언이 함수 선언보다 더 위로 끌어올려진다.

 

 

결론

- 코드의 가독성과 유지보수를 위해 최대한 호이스팅이 일어나지 않도록한다.

- 이를 위해서 함수와 변수를 가급적 코드 상단부에 선언하고, var대신 let/const를 사용한다.