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

Hoisting 이란?

Hoist는 직역하자면 들어(끌어)올리다 라는 뜻입니다.

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 회상단에 선언하는 것.

 

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언합니다.

자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑고, 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킵니다.

 

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

 

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

 

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

 

예시)

function CatName(name){
	console.log("My Cat`s name is " + name );
}

catName("Coco");
/*
result : "My Cat`s name is Coco"
*/

위 예제처럼 함수 선언 -> 함수 호출 순서로 실행하는게 일반적입니다.

자바스크립트는 아래 예제처럼 함수 호출 -> 함수 선언 순서로도 동작이 가능합니다.

 

catName("Haku");

function catName(name){
	console.log("My Cat`s name is " + name);
}
/*
result : "My Cat`s name is Haku"
*/

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); // 호이스팅 발생
// result : "local"
name = "local";

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

 

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

hamtori(); // result : "Hello"
hamtori2(); // result : undefined

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

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

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

변수에 할당된 함수 표현식은 호이스팅 되지 않습니다.

 

---

Hoisting 우선순위

 

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

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

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

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

 

---

 

Hoisting 사용 시 주의

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

호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있습니다.

let / const 를 사용합니다.

var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있습니다.