initial commit

1 files changed, 154 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..5f4977bfc7
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,154 @@
+---
+title: 함수 표현식
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function</code></strong> 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.</p>
+
+<p>또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> 생성자와 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언(function declaration)</a>을 이용해 함수를 정의할 수도 있습니다.  </p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>};</pre>
+
+<p><a href="/ko/docs/">ES2015</a>에서 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수(arrow functions)</a>를 사용할 수도 있습니다.</p>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수로 전달되는 인수(argument) 의 이름.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수 몸통을 구성하는 문(statement).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는  <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p>
+
+<h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3>
+
+<p>자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.</p>
+
+<pre><code>console.log(notHoisted) // undefined
+//even the variable name is hoisted, the definition wasn't. so it's undefined.
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};</code></pre>
+
+<h3 id="유명(named)_함수_표현식">유명(named) 함수 표현식</h3>
+
+<p>함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. <u><strong>이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다</strong></u>. 이로써 비표준 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> 속성을 사용하는 것을 피할 수도 있습니다.</p>
+
+<pre><code>var math = {
+  'factit': function factorial(n) {
+    console.log(n)
+    if (n &lt;= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+
+math.factit(3) //3;2;1;</code>
+</pre>
+
+<p>함수가 할당된 변수는 <code>name</code> 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수(arrow functions)</a>에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).</p>
+
+<pre><code>var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (errors because baz == undefined)</code>
+</pre>
+
+<p> </p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제는 이름 없는 함수를 정의하고 그 함수를 <code>x</code>에 할당합니다. 함수는 인수의 제곱을 반환합니다:</p>
+
+<pre><code>var x = function(y) {
+   return y * y;
+};</code></pre>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Glossary/Callback_function">callback</a>으로 더 자주 사용됩니다:</p>
+
+<pre><code>button.addEventListener('click', function(event) {
+    console.log('button is clicked!')
+})</code></pre>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.5에서 구현됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+</ul>