aboutsummaryrefslogtreecommitdiff
path: root/files/ko/glossary/hoisting
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/glossary/hoisting')
-rw-r--r--files/ko/glossary/hoisting/index.html73
1 files changed, 73 insertions, 0 deletions
diff --git a/files/ko/glossary/hoisting/index.html b/files/ko/glossary/hoisting/index.html
new file mode 100644
index 0000000000..dfadd7361e
--- /dev/null
+++ b/files/ko/glossary/hoisting/index.html
@@ -0,0 +1,73 @@
+---
+title: Hoisting
+slug: Glossary/Hoisting
+tags:
+ - CodingScripting
+ - Glossary
+ - JavaScript
+translation_of: Glossary/Hoisting
+---
+<p>호이스팅(hoisting)은 <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 언어 명세</a> 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다.</p>
+
+<p>예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 <u>컴파일</u> 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="기술_예제">기술 예제</h3>
+
+<p>JavaScript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">function catName(name) {
+ console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+위 코드의 결과는: "My cat's name is Tigger"
+*/</pre>
+
+<p>위 코드 스니펫은 통상적으로 작동하는 코드를 작성하는 법에 관해 기술합니다. 이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다:</p>
+
+<pre class="brush: js">catName("Chloe");
+
+function catName(name) {
+ console.log("My cat's name is " + name);
+}
+/*
+위 코드의 결과는: "My cat's name is Chloe"
+*/</pre>
+
+<p>비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 JavaScript에서 컨텍스트 실행이 작동하는 방식 때문입니다.</p>
+
+<p>Hoisting은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.</p>
+
+<h3 id="기술_예제_2">기술 예제</h3>
+
+<pre class="brush: js">num = 6;
+num + 7;
+var num;
+/* num이 선언되지 않더라도 에러를 내지 않습니다 */
+
+</pre>
+
+<p>JavaScript는 초기화가 아닌 선언만 끌어올립니다(hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면, 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.</p>
+
+<pre class="brush: js">var x = 1; // x 초기화
+console.log(x + " " + y); // '1 undefined'
+var y = 2;
+
+
+// 아래 코드는 이전 코드와 같은 방식으로 동작합니다.
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+</pre>
+
+<h3 id="기술_레퍼런스">기술 레퍼런스</h3>
+
+<ul>
+ <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com 코스</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li>
+</ul>