<div id="readability-page-1" class="page"><div><h2 id="코드를-변경하지-않는-호이스팅"><a href="#%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B3%80%EA%B2%BD%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85" aria-label="코드를 변경하지 않는 호이스팅 permalink"></a>코드를 변경하지 않는 호이스팅</h2>호이스팅은 ECMAScript 2015 및 그 이전 표준 명세에서 사용된 적이 없는 용어이다. hoist라는 영단어 뜻이 끌어올린다라는 의미에서 유추해볼 수 있듯 hoisting은 변수와 함수를 최상단으로 끌어올린다고 개괄적으로 정의할 수 있다. 이에 호이스팅은 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알려져 있지만, 실제로는 <code>컴파일 단계에서 메모리에 저장될 뿐, 코드 안에서는 그대로 유지</code>된다.호이스팅이 개념이 나오게 된 배경은 자바스크립트가 함수를 실행하기 전에 반드시 선언되어야 한다는 여타 언어들과 달리 이 순서를 지키지 않아도 무방하도록 설계한 데서 유래한다. 정의되지 않은 함수를 어떻게 호출할 수 있는 것인지, 자바스크립트에는 마법이라도 있는 것일까?<h2 id="실행-컨텍스트와-절친인-호이스팅"><a href="#%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EC%99%80-%EC%A0%88%EC%B9%9C%EC%9D%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85" aria-label="실행 컨텍스트와 절친인 호이스팅 permalink"></a>실행 컨텍스트와 절친인 호이스팅</h2>변수나 함수를 뒤늦게 정의해도 사용이 가능한 이유는 실행 컨텍스트에서 현재 컨텍스트 내의 식별자들에 대한 정보 및 외부 환경 정보를 스캔하기 때문이다. 실행 컨텍스트는 다음 포스팅에서 자세히 알아볼 예정이고, 지금은 실행할 코드에 제공할 환경 정보들을 모아놓는 객체로 기억해두고, 이 환경 정보들을 어떻게 수집하는지 간단히 살펴봄으로써 호이스팅을 좀 더 이해할 수 있다.<ul><li>현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨<ul><li>매개변수의 이름 : 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자</li><li>함수 선언 : 선안한 함수가 있는 경우 함수 그 자체</li><li>변수명 : var로 선언된 변수의 식별자</li></ul></li><li><code>컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집</code><ul><li>수집을 마쳤다하더라도 아직 코드들은 실행되기 전 상태이지만</li><li>이미 해당 환경에 속한 코드의 변수명들을 모두 알게 되는 셈</li></ul></li></ul><h2 id="다시-정리해본-호이스팅"><a href="#%EB%8B%A4%EC%8B%9C-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85" aria-label="다시 정리해본 호이스팅 permalink"></a>다시 정리해본 호이스팅</h2><ul><li>엔진의 실제 동작 방식 대신에 <code>자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다</code>라고 생각한다면<ul><li>변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념</li></ul></li><li>자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하자<ul><li>변수 혹은 함수 선언부만 끌어올려지며</li><li>할당부는 그 자리에 그대로 유지됨</li></ul></li><li>함수도 호이스팅 됨<ul><li>자바스크립트의 창시자인 브랜든 아이크가 자바스크립트를 유연하고 배우기 쉬운 언어로 만들고자 해서 탄생한 개념</li><li>덕분에 함수를 선언한 위치와 무관한게 그 함수를 실행할 수 있게 됐지만 오히려 이로 인해 더 많은 혼란을 야기하기도 함</li></ul></li></ul><h2 id="예제를-통해-만나본-호이스팅"><a href="#%EC%98%88%EC%A0%9C%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%A7%8C%EB%82%98%EB%B3%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85" aria-label="예제를 통해 만나본 호이스팅 permalink"></a>예제를 통해 만나본 호이스팅</h2><h3 id="기본-코드를-호이스팅으로-변환해보기"><a href="#%EA%B8%B0%EB%B3%B8-%EC%BD%94%EB%93%9C%EB%A5%BC-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9C%BC%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%B4%EB%B3%B4%EA%B8%B0" aria-label="기본 코드를 호이스팅으로 변환해보기 permalink"></a>기본 코드를 호이스팅으로 변환해보기</h3>코드를 직접 실행해보기 전에 머릿속으로 시뮬레이션 해보자.&lt;예제1 - 호이스팅이 발생할 것 같은 샘플 코드&gt;<div data-language="javascript"><pre><code>function hello() {
	console.log(1, world); // 예상하건데 world?
	var world = "world";
	console.log(2, world); // 예상하건데 world?
	function world() {
		console.log("hello world");
	}
	console.log(3, world); // 예상하건데 f world()?
}
hello();</code></pre></div>예제1을 실행하면 코드내 주석처럼 예상해볼 수 있을 것 같지만, 실행 결과는 완전히 다르다!&lt;결과1&gt;<div data-language="javascript"><pre><code>1 ƒ world() { window.runnerWindow.proxyConsole.log("hello world");}
2 world
3 world</code></pre></div>위 예제1을 실제로 코드가 변하지는 않지만 호이스팅된 것으로 예제2처럼 재표현하여 이해를 도울 수 있다.&lt;예제2 - 호이스팅으로 재표현한 예제1&gt;<div data-language="javascript"><pre><code>function hello() {
	var world;
	var world = function world() {
		console.log("hello world");
	}; // 실행 컨텍스트 수집 대상
	console.log(1, world); // 출력 : f world()
	world = "world"; // 변수 할당 부는 그대로 유지
	console.log(2, world); // 출력 : world
	console.log(3, world); // 출력 : world
}
hello();</code></pre></div><h3 id="함수를-선언하는-다양한-방법---함수-선언문과-함수-표현식"><a href="#%ED%95%A8%EC%88%98%EB%A5%BC-%EC%84%A0%EC%96%B8%ED%95%98%EB%8A%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%B0%A9%EB%B2%95---%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8%EA%B3%BC-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D" aria-label="함수를 선언하는 다양한 방법 함수 선언문과 함수 표현식 permalink"></a>함수를 선언하는 다양한 방법 - 함수 선언문과 함수 표현식</h3>함수를 선언하는 방법에 따라 호이스팅의 결과도 다를 수 있다. 먼저 다양한 함수 선언 방법을 살펴보자.&lt;예제3 - 다양한 함수 선언 방법&gt;<div data-language="javascript"><pre><code>// 함수 선언문
function sayHello() {
	console.log("Hello");
}
sayHello();

// 익명 함수 표현식
var sayWorld = function () {
	console.log("World");
};
sayWorld();

// 기명 함수 표현식
var sayWelcome = function welcome() {
	console.log("Welcome");
};
sayWelcome();</code></pre></div>예제3에서 보듯 함수를 새롭게 정의할 땐 크게 2가지 방식이 있다.<ul><li><code>함수 선언문</code><ul><li>함수를 선언하기만 하고 별도로 호출하지 않음</li><li>함수명이 반드시 정의되야 함</li></ul></li><li><code>함수 표현식</code><ul><li>정의한 함수를 별도의 변수에 할당하는 것</li><li>함수명이 없는 익명 함수 혹은 기명 함수로 정의 가능</li></ul></li></ul><h3 id="함수-선언문과-함수-표현식의-호이스팅-차이"><a href="#%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8%EA%B3%BC-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EC%B0%A8%EC%9D%B4" aria-label="함수 선언문과 함수 표현식의 호이스팅 차이 permalink"></a>함수 선언문과 함수 표현식의 호이스팅 차이</h3>&lt;예제4 - 함수 선언 방법별 호이스팅을 예측해보기&gt;<div data-language="javascript"><pre><code>console.log(sum(1, 2));
console.log(multiply(3, 4));

// 함수 선언문으로 sum() 를 선언
function sum(a, b) {
	return a + b;
}

// 함수 표현식으로 multiply() 를 선언
var multiply = function (a, b) {
	return a * b;
};</code></pre></div>함수 선언문과 함수 표현식으로 정의한 예제4를 실행하면 sum()과 multiply()가 잘 실행될까? 결과2를 확인해보자.&lt;결과2&gt;<div data-language="javascript"><pre><code>VM388:2 Uncaught TypeError: multiply is not a function
 at &lt;anonymous&gt;:2:13</code></pre></div>어째서 multiply는 함수가 아니라는 오류가 발생한 것일까? sum()도 동일하게 코드상 호출부분 이후에 정의했는데 말이다. 그건 바로 <code>호이스팅</code>때문이다. 다음 예제5는 예제4를 호이스팅으로 재표현한 코드다.&lt;예제5 - 함수 선언 방법별 호이스팅으로 재표현한 예제4&gt;<div data-language="javascript"><pre><code>// 함수 선언문은 전체를 호이스팅 한다.
var sum = function sum(a, b) {
	return a + b;
};

// 함수 표현식은 변수만 호이스팅하고,
var multiply;

console.log(sum(1, 2));
console.log(multiply(3, 4));

// 함수 표현식에서 할당부는 제 위치에 유지한다.
multiply = function (a, b) {
	return a * b;
};</code></pre></div>호이스팅으로 재표현한 예제5를 보면 함수 역시도 변수와 마찬가지로 선언부는 맨 위로 올리지만, 할당부는 원래 선언한 위치에 유지한다. 그래서 이 <code>console.log(multiply(3, 4));</code> 부분에서 선언만 하고 함수가 할당되기 전인 변수 multiply를 함수처럼 호출해서 에러가 발생하게 된다. 위 예제5는 함수 선언문과 함수 표현식이 어떤 차이가 있는지 보여준다. 한가지 더 예제6을 살펴보자.<h3 id="함수-선언문의-호이스팅-사이드-이펙트"><a href="#%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8%EC%9D%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EC%82%AC%EC%9D%B4%EB%93%9C-%EC%9D%B4%ED%8E%99%ED%8A%B8" aria-label="함수 선언문의 호이스팅 사이드 이펙트 permalink"></a>함수 선언문의 호이스팅 사이드 이펙트</h3>같은 함수를 하나의 컨텍스트에서 함수 선언문 형태로 중복 선언 한 경우 어떤 영향이 있을까? 예제6을 통해 살펴보자.&lt;예제6 - 같은 이름으로 중복 정의한 함수 선언문&gt;<div data-language="javascript"><pre><code>console.log(sum(1, 2)); // return 3?

// 첫번째 sum 함수 선언문
function sum(a, b) {
	return a + b;
}

// ... (중략)

console.log(sum(3, 4)); // return 7?
// 두번째 sum 함수 선언문
function sum(a, b) {
	return `${a} + ${b} = ${a + b}`;
}</code></pre></div>예제6의 경우 순서대로 호이스팅되면서 나중에 선언한 두번째 sum()으로 overriding된다. 흔한 케이스는 아니지만 코드가 어떻게 작성되어있는지에 따라 이 경우 오류 없이 지나칠 수 있고 찾기 힘든 버그로 둔갑할 수도 있다.&lt;예제7 - 호이스팅으로 재표현한 예제6&gt;<div data-language="javascript"><pre><code>var sum = function sum(a, b) {
	return a + b;
};
var sum = function sum(a, b) {
	return `${a} + ${b} = ${a + b}`;
};

console.log(sum(1, 2));
console.log(sum(3, 4));</code></pre></div>&lt;결과3&gt;<hr>막연히 변수를 위로 끌어올린다고만 알고 있었던 호이스팅을 직접 예제를 통해 정리하니 명쾌해졌다. 호이스팅은 앞서 언급한 대로 혼자서 단독 작동하는 것이 아니라 실행 컨텍스트로 인해 움직인다. 다음에는 이 실행 컨텍스트에 대해 공유할 예정이다 :)<h5 id="references"><a href="#references" aria-label="references permalink"></a>References</h5><ul><li><a href="https://developer.mozilla.org/ko/docs/Glossary/Hoisting">Hoisting | MDN</a></li><li><a href="https://coupa.ng/bQhYRC">코어 자바스크립트</a></li></ul></div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</div>

아웃풋 트레이닝

BAEKDEV

코드를 변경하지 않는 호이스팅
호이스팅은 ECMAScript 2015 및 그 이전 표준 명세에서 사용된 적이 없는 용어이다. hoist라는 영단어 뜻이 끌어올린다라는 의미에서 유추해볼 수 있듯 hoisting은 변수와 함수를 최상단으로 끌어올린다고 개괄적으로 정의할 수 있다. 이에 호이스팅은 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알려져 있지만, 실제로는 컴파일 단계에서 메모리에 저장될 뿐, 코드 안에서는 그대로 유지된다.
호이스팅이 개념이 나오게 된 배경은 자바스크립트가 함수를 실행하기 전에 반드시 선언되어야 한다는 여타 언어들과 달리 이 순서를 지키지 않아도 무방하도록 설계한 데서 유래한다. 정의되지 않은 함수를 어떻게 호출할 수 있는 것인지, 자바스크립트에는 마법이라도 있는 것일까?
실행 컨텍스트와 절친인 호이스팅
변수나 함수를 뒤늦게 정의해도 사용이 가능한 이유는 실행 컨텍스트에서 현재 컨텍스트 내의 식별자들에 대한 정보 및 외부 환경 정보를 스캔하기 때문이다. 실행 컨텍스트는 다음 포스팅에서 자세히 알아볼 예정이고, 지금은 실행할 코드에 제공할 환경 정보들을 모아놓는 객체로 기억해두고, 이 환경 정보들을 어떻게 수집하는지 간단히 살펴봄으로써 호이스팅을 좀 더 이해할 수 있다.
현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
매개변수의 이름 : 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자
함수 선언 : 선안한 함수가 있는 경우 함수 그 자체
변수명 : var로 선언된 변수의 식별자
컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집
수집을 마쳤다하더라도 아직 코드들은 실행되기 전 상태이지만
이미 해당 환경에 속한 코드의 변수명들을 모두 알게 되는 셈
다시 정리해본 호이스팅
엔진의 실제 동작 방식 대신에 자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다라고 생각한다면
변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념
자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하자
변수 혹은 함수 선언부만 끌어올려지며
할당부는 그 자리에 그대로 유지됨
함수도 호이스팅 됨
자바스크립트의 창시자인 브랜든 아이크가 자바스크립트를 유연하고 배우기 쉬운 언어로 만들고자 해서 탄생한 개념
덕분에 함수를 선언한 위치와 무관한게 그 함수를 실행할 수 있게 됐지만 오히려 이로 인해 더 많은 혼란을 야기하기도 함
예제를 통해 만나본 호이스팅
기본 코드를 호이스팅으로 변환해보기
코드를 직접 실행해보기 전에 머릿속으로 시뮬레이션 해보자.
<예제1 - 호이스팅이 발생할 것 같은 샘플 코드>
function hello() {
 console.log(1, world); // 예상하건데 world?
 var world = "world";
 console.log(2, world); // 예상하건데 world?
 function world() {
 console.log("hello world");
 }
 console.log(3, world); // 예상하건데 f world()?
}
hello();
예제1을 실행하면 코드내 주석처럼 예상해볼 수 있을 것 같지만, 실행 결과는 완전히 다르다!
<결과1>
1 ƒ world() { window.runnerWindow.proxyConsole.log("hello world");}
2 world
3 world
위 예제1을 실제로 코드가 변하지는 않지만 호이스팅된 것으로 예제2처럼 재표현하여 이해를 도울 수 있다.
<예제2 - 호이스팅으로 재표현한 예제1>
function hello() {
 var world;
 var world = function world() {
 console.log("hello world");
 }; // 실행 컨텍스트 수집 대상
 console.log(1, world); // 출력 : f world()
 world = "world"; // 변수 할당 부는 그대로 유지
 console.log(2, world); // 출력 : world
 console.log(3, world); // 출력 : world
}
hello();
함수를 선언하는 다양한 방법 - 함수 선언문과 함수 표현식
함수를 선언하는 방법에 따라 호이스팅의 결과도 다를 수 있다. 먼저 다양한 함수 선언 방법을 살펴보자.
<예제3 - 다양한 함수 선언 방법>
// 함수 선언문
function sayHello() {
 console.log("Hello");
}
sayHello();
// 익명 함수 표현식
var sayWorld = function () {
 console.log("World");
};
sayWorld();
// 기명 함수 표현식
var sayWelcome = function welcome() {
 console.log("Welcome");
};
sayWelcome();
예제3에서 보듯 함수를 새롭게 정의할 땐 크게 2가지 방식이 있다.
함수 선언문
함수를 선언하기만 하고 별도로 호출하지 않음
함수명이 반드시 정의되야 함
함수 표현식
정의한 함수를 별도의 변수에 할당하는 것
함수명이 없는 익명 함수 혹은 기명 함수로 정의 가능
함수 선언문과 함수 표현식의 호이스팅 차이
<예제4 - 함수 선언 방법별 호이스팅을 예측해보기>
console.log(sum(1, 2));
console.log(multiply(3, 4));
// 함수 선언문으로 sum() 를 선언
function sum(a, b) {
 return a + b;
}
// 함수 표현식으로 multiply() 를 선언
var multiply = function (a, b) {
 return a * b;
};
함수 선언문과 함수 표현식으로 정의한 예제4를 실행하면 sum()과 multiply()가 잘 실행될까? 결과2를 확인해보자.
<결과2>
VM388:2 Uncaught TypeError: multiply is not a function
 at <anonymous>:2:13
어째서 multiply는 함수가 아니라는 오류가 발생한 것일까? sum()도 동일하게 코드상 호출부분 이후에 정의했는데 말이다. 그건 바로 호이스팅때문이다. 다음 예제5는 예제4를 호이스팅으로 재표현한 코드다.
<예제5 - 함수 선언 방법별 호이스팅으로 재표현한 예제4>
// 함수 선언문은 전체를 호이스팅 한다.
var sum = function sum(a, b) {
 return a + b;
};
// 함수 표현식은 변수만 호이스팅하고,
var multiply;
console.log(sum(1, 2));
console.log(multiply(3, 4));
// 함수 표현식에서 할당부는 제 위치에 유지한다.
multiply = function (a, b) {
 return a * b;
};
호이스팅으로 재표현한 예제5를 보면 함수 역시도 변수와 마찬가지로 선언부는 맨 위로 올리지만, 할당부는 원래 선언한 위치에 유지한다. 그래서 이 console.log(multiply(3, 4)); 부분에서 선언만 하고 함수가 할당되기 전인 변수 multiply를 함수처럼 호출해서 에러가 발생하게 된다. 위 예제5는 함수 선언문과 함수 표현식이 어떤 차이가 있는지 보여준다. 한가지 더 예제6을 살펴보자.
함수 선언문의 호이스팅 사이드 이펙트
같은 함수를 하나의 컨텍스트에서 함수 선언문 형태로 중복 선언 한 경우 어떤 영향이 있을까? 예제6을 통해 살펴보자.
<예제6 - 같은 이름으로 중복 정의한 함수 선언문>
console.log(sum(1, 2)); // return 3?
// 첫번째 sum 함수 선언문
function sum(a, b) {
 return a + b;
}
// ... (중략)
console.log(sum(3, 4)); // return 7?
// 두번째 sum 함수 선언문
function sum(a, b) {
 return `${a} + ${b} = ${a + b}`;
}
예제6의 경우 순서대로 호이스팅되면서 나중에 선언한 두번째 sum()으로 overriding된다. 흔한 케이스는 아니지만 코드가 어떻게 작성되어있는지에 따라 이 경우 오류 없이 지나칠 수 있고 찾기 힘든 버그로 둔갑할 수도 있다.
<예제7 - 호이스팅으로 재표현한 예제6>
var sum = function sum(a, b) {
 return a + b;
};
var sum = function sum(a, b) {
 return `${a} + ${b} = ${a + b}`;
};
console.log(sum(1, 2));
console.log(sum(3, 4));
<결과3>
1 + 2 = 3
3 + 4 = 7
막연히 변수를 위로 끌어올린다고만 알고 있었던 호이스팅을 직접 예제를 통해 정리하니 명쾌해졌다. 호이스팅은 앞서 언급한 대로 혼자서 단독 작동하는 것이 아니라 실행 컨텍스트로 인해 움직인다. 다음에는 이 실행 컨텍스트에 대해 공유할 예정이다 :)
References
Hoisting | MDN
코어 자바스크립트

예제로 만나보는 자바스크립트 호이스팅(hoisting)

댓글