<div id="readability-page-1" class="page"><div><blockquote>
변수의 선언문이 가장 먼저 수행되는 것
</blockquote>
호이스팅이란 변수의 선언문 부분이 Scope의 최상단으로 끌어올려져 수행되는 자바스크립트의 메커니즘이다.
선언문이라 하면 대표적으로 <code>var</code>, <code>let</code>, <code>const</code>, <code>function</code>, <code>function*</code>, <code>class</code> 키워드로 시작되는 코드들을 말한다.
예를들어 <code>var name = 'value'</code> 코드는 ,
<ul>
<li>선언문인 <code>var name</code>과 </li>
<li>할당문인 <code>a = 'value'</code>로 </li>
</ul>
나눌 수 있다.
호이스팅이 발생하게되면 선언문인 <code>var name</code>부분만 최상단에서 먼저 수행하게 된다. 
이는 변수가 선언되기 전에도 에러없이 호출이 가능해지는 결과를 만든다.
<pre><code>console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined
console.log(d); // undefined
console.log(e); // function e () { }

var a = 1;
var b = 2;
var c = 3;
var d = function () {}
function e () { }
</code></pre>
위의코드는 호이스팅이 발생하여 실제로 아래순서로 동작한다.
<pre><code>var a;
var b;
var c;
var d;
function e () { console.log('function d'); }


console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined
console.log(d); // undefined
console.log(e); // function e () { }

a = 1;
b = 2;
c = 3;
e = function () {}</code></pre>
<hr>
<h2 id="변수의-호이스팅">변수의 호이스팅</h2>
변수는 <code>var</code>, <code>let/const</code> 키워드를 이용하여 선언할 수 있다. 
이 둘은 다양한 차이점들이 있지만, 호이스팅측면에서의 차이점은 <code>let/const</code>변수는 호이스팅이 발생하더라도 참조가 불가능하다는 점이다.
<pre><code>console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization 
console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization 

var a = 1;
let b = 2;
const c = 3;</code></pre>
이유를 알아보기전에, 변수에 값이 할당되는 과정을 알고가야한다. 
변수는 선언되어 값이 할당되기까지 3단계를 거친다.
<blockquote>
<ol>
<li>선언 (메모리영역 할당)</li>
<li>초기화 (할당된 메모리영역 초기화)</li>
<li>값의 대입 (메모리영역에 값을 저장)</li>
</ol>
</blockquote>
<code>var</code>와 <code>let/const</code> 키워드는 변수의 초기화시점이 다르다는 차이가있다.
<h2 id="var">var</h2>
<pre><code>var a = 3;</code></pre>
<code>var a</code>선언문에서 변수가 선언되고 초기화된다. (선언, 초기화) 
<code>a = 3</code> 대입문에서 값의 대입이 이루어진다. (할당)
<h2 id="letconst">let/const</h2>
<pre><code>let /*const*/ b = 5</code></pre>
<code>let b</code>, <code>const b</code> 변수를 선언한다. (선언) 
<code>b = 3</code> 에서 변수를 초기화한 후 할당된다. (초기화, 할당)
javascript에서 초기화를 하지 않은 변수는 참조가 불가능하기때문에, 값을 할당되는 과정에서 초기화가 이루어지는 <code>let/const</code> 키워드의 변수들은 참조가 불가능하게된다.
변수가 선언되어 초기화되기까지를 일시적 사각지대라고 부른다. 
즉, 일시적 사각지대(TDZ) 구간에 있는 변수는 참조가 불가능하다.
<hr>
<h2 id="함수의-호이스팅">함수의 호이스팅</h2>
함수는 <a href="/javascript/%ED%95%A8%EC%88%98">이전 포스팅</a>에서 다뤘듯이, <code>함수표현식</code>과 <code>함수선언문</code>으로 정의할 수 있다.
<pre><code>console.log(a); // function a() {}
console.log(b);// undefined

function a () {}
var b = function () {};</code></pre>
<h2 id="함수표현식">함수표현식</h2>
<code>함수표현식</code>은 변수의 호이스팅과 동일하게 동작한다. 
따라서 선언문인 <code>var b</code>와 대입문인 <code>b = function () {};</code>로 나뉘어지고, 호이스팅으로 인해 선언문이 먼저 선언된다. 
위 코드에서 <code>함수표현식</code>으로 정의한 b는 <code>undefined</code>로 참조가 된다.
<h2 id="함수선언문">함수선언문</h2>
<code>함수선언문</code>은 선언, 초기화 및 할당까지 모두 한번에 이루어진다. 
따라서 <code>함수선언문</code>으로 정의한 a는 실제값인 <code>funciton a() {}</code>가 참조되고 있다.
반면에 <code>함수표현식</code>은 선언문인 <code>var b</code>와, 표현식인 <code>b = function () {};</code>로 나뉘어집니다.\ 
따라서 <code>var b</code> 가 먼저 동작하여 선언, 초기화 까지만 이루어지고, <code>undefined</code>로 참조가 됩니다.
<hr>
<h2 id="결론">결론</h2>
변수의 선언, 초기화, 할당이 어떤시점이 이루어지냐를 파악하는게 핵심이다.
<ul>
<li>함수표현식, 변수선언문 
- const, let: 최상단에서 선언이 이루어짐 
- var: 최상단에서 선언, 초기화가 이루어짐</li>
<li>함수선언문: 선언, 초기화, 할당이 이루어짐</li>
</ul>
<hr>
<h2 id="참고문헌">참고문헌</h2>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Glossary/Hoisting">https://developer.mozilla.org/ko/docs/Glossary/Hoisting</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types">https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types</a></li>
<li><a href="https://poiemaweb.com/js-data-type-variable#21-%EB%B3%80%EC%88%98%EC%9D%98-%EC%84%A0%EC%96%B8">https://poiemaweb.com/js-data-type-variable#21-%EB%B3%80%EC%88%98%EC%9D%98-%EC%84%A0%EC%96%B8</a></li>
<li><a href="https://poiemaweb.com/es6-block-scope">https://poiemaweb.com/es6-block-scope</a></li>
</ul></div></div>

ginameee.log

Jangchun Lee

변수의 선언문이 가장 먼저 수행되는 것
호이스팅이란 변수의 선언문 부분이 Scope의 최상단으로 끌어올려져 수행되는 자바스크립트의 메커니즘이다.
선언문이라 하면 대표적으로 var, let, const, function, function*, class 키워드로 시작되는 코드들을 말한다.
예를들어 var name = 'value' 코드는 ,
선언문인 var name과 
할당문인 a = 'value'로 
나눌 수 있다.
호이스팅이 발생하게되면 선언문인 var name부분만 최상단에서 먼저 수행하게 된다.
이는 변수가 선언되기 전에도 에러없이 호출이 가능해지는 결과를 만든다.
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined
console.log(d); // undefined
console.log(e); // function e () { }
var a = 1;
var b = 2;
var c = 3;
var d = function () {}
function e () { }
위의코드는 호이스팅이 발생하여 실제로 아래순서로 동작한다.
var a;
var b;
var c;
var d;
function e () { console.log('function d'); }
console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined
console.log(d); // undefined
console.log(e); // function e () { }
a = 1;
b = 2;
c = 3;
e = function () {}
변수의 호이스팅
변수는 var, let/const 키워드를 이용하여 선언할 수 있다.
이 둘은 다양한 차이점들이 있지만, 호이스팅측면에서의 차이점은 let/const변수는 호이스팅이 발생하더라도 참조가 불가능하다는 점이다.
console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization 
console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization 
var a = 1;
let b = 2;
const c = 3;
이유를 알아보기전에, 변수에 값이 할당되는 과정을 알고가야한다.
변수는 선언되어 값이 할당되기까지 3단계를 거친다.
선언 (메모리영역 할당)
초기화 (할당된 메모리영역 초기화)
값의 대입 (메모리영역에 값을 저장)
var와 let/const 키워드는 변수의 초기화시점이 다르다는 차이가있다.
var
var a = 3;
var a선언문에서 변수가 선언되고 초기화된다. (선언, 초기화)
a = 3 대입문에서 값의 대입이 이루어진다. (할당)
let/const
let /*const*/ b = 5
let b, const b  변수를 선언한다. (선언)
b = 3 에서 변수를 초기화한 후 할당된다. (초기화, 할당)
javascript에서 초기화를 하지 않은 변수는 참조가 불가능하기때문에, 값을 할당되는 과정에서 초기화가 이루어지는 let/const 키워드의 변수들은 참조가 불가능하게된다.
변수가 선언되어 초기화되기까지를 일시적 사각지대라고 부른다.
즉, 일시적 사각지대(TDZ) 구간에 있는 변수는 참조가 불가능하다.
함수의 호이스팅
함수는 이전 포스팅에서 다뤘듯이, 함수표현식과 함수선언문으로 정의할 수 있다.
console.log(a); // function a() {}
console.log(b);// undefined
function a () {}
var b = function () {};
함수표현식
함수표현식은 변수의 호이스팅과 동일하게 동작한다.
따라서 선언문인 var b와 대입문인 b = function () {};로 나뉘어지고, 호이스팅으로 인해 선언문이 먼저 선언된다.
위 코드에서 함수표현식으로 정의한 b는  undefined로 참조가 된다.
함수선언문
함수선언문은 선언, 초기화 및 할당까지 모두 한번에 이루어진다.
따라서 함수선언문으로 정의한 a는 실제값인 funciton a() {}가 참조되고 있다.
반면에 함수표현식은 선언문인 var b와, 표현식인 b = function () {};로 나뉘어집니다.
따라서 var b 가 먼저 동작하여 선언, 초기화 까지만 이루어지고, undefined로 참조가 됩니다.
결론
변수의 선언, 초기화, 할당이 어떤시점이 이루어지냐를 파악하는게 핵심이다.
함수표현식, 변수선언문
const, let: 최상단에서 선언이 이루어짐
var: 최상단에서 선언, 초기화가 이루어짐
함수선언문: 선언, 초기화, 할당이 이루어짐
참고문헌
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types
https://poiemaweb.com/js-data-type-variable#21-%EB%B3%80%EC%88%98%EC%9D%98-%EC%84%A0%EC%96%B8
https://poiemaweb.com/es6-block-scope

Hoisting

댓글