호이스팅 (Hoisting)

호이스팅 (Hoisting)

 

호이스팅(Hoisting)의 뜻은 영어로 ‘끌어올리다, 게양하다’ 라는 뜻으로 자바스크립트가 실행될 때 끌어올려지는 현상을 말한다. 그렇다면 무엇이 끌어올려지느냐?!!

 

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

 

잠깐, 함수표현식과 함수선언문을 짚고 넘어가자.

 

함수표현식

const sayHello = function() {
	console.log('Hello!');
}

 

함수선언문

function sayHello() {
	console.log('Hello!')
}

 

호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 왜 호이스팅 현상이 일어나느냐고 묻는다면, 자바스크립트의 문법을 해석하는 parser가 그렇게 동작하도록 설계되었다. 자바스크립트 parser가 자바스크립트 문서를 읽을 때 전체적으로 문서를 한번 훑는다. 이 때, 변수 선언과 함수 선언문 같이 미리 알고 있어야 할 정보들을 기억한다. 이 기억하는 현상이 개발자에게는 코드 순서상 끌어올려지는 것처럼 느껴진다. 실제로 자바스크립트 문서가 변하거나 메모리가 변하는 것은 아니다. parser가 해석할 때만 끌어올려져 실행된다.

그리고 할당은 호이스팅되지 않는다.

 

호이스팅 예시

console.log('Hello!')

let a = 1;
var b = 2;

const myName = function() {
	console.log('My name is Sophia.')
}

function sayHello() {
	console.log('Hello')
}

호이스팅 결과

var b;

function sayHello() {
	console.log('Hello')
}

console.log('Hello!')

let a = 1;
b = 2;

const myName = function() {
	console.log('My name is Sophia.')
}

 

호이스팅이 일어나 코드가 꼬이는 것을 방지하기 위해 다음을 명심하자.

 

• 함수 선언문은 되도록 유효범위 안에 최상단에 작성하자.
• var 대신 const와 let 을 사용하자.