initial commit

1 files changed, 239 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/functions/default_parameters/index.html b/files/ko/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..2783b65844
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,239 @@
+---
+title: 기본값 매개변수
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+  - ECMAScript2015
+  - ECMAScript6
+  - Functions
+  - JavaScript
+  - 기본값 매개변수
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p> 기본값 함수 매개변수 (<strong>default function parameter</strong>)를 사용하면 값이 없거나 <code>undefined</code>가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</p>
+
+<div class="hidden">
+<p>위의 상호작용가능한 예제의 소스는 깃허브 저장소에 저장됩니다. 상호작용 예제 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론(clone)하여 풀 리퀘스트(pull request) 를 보내주세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = <em>defaultValue1</em> ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>JavaScript에서, 함수의 매개변수는 <code>{{jsxref("undefined")}}</code>가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수 가 필요할 때 입니다.</p>
+
+<p>과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 <code>undefined</code>인 경우 값을 할당하는 것이었습니다.</p>
+
+<p>다음 예제에서, <code>multiply</code>호출시 <code>b</code>에 할당된  값이 없다면, <code>b</code> 값은 <code>a*b</code>를 평가할 때 <code>undefined</code>일 거고 <code>multiply</code> 호출은 <code>NaN</code>이 반환됩니다. </p>
+
+<pre class="notranslate"><code>function multiply(a, b) {
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // NaN !</code></pre>
+
+<p>이를 방지하기 위해서, 아래 두번째 줄과 같이  <code>multiply</code> 함수가 오직 한 개의 인수만 있다면  <code>b</code>를  <code>1</code>로 설정하는 방식을 사용하곤 했습니다.</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1
+  return a*b
+}
+
+multiply(5, 2)   // 10
+multiply(5)      // 5
+</pre>
+
+<p>ES2015의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 <code>b</code>의 기본값으로 <code>1</code> 로 설정할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b = 1) {
+  return a*b
+}
+
+multiply(5, 2)          // 10
+multiply(5)             // 5
+multiply(5, undefined)  // 5
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="undefined_vs._다른_거짓같은_값falsy_values_전달하기"><code>undefined</code> vs. 다른 거짓같은 값(falsy values) 전달하기</h3>
+
+<p>아래 예제중 두 번째 호출에서, 설사 두 번째 인수를 호출할 때 명시해서 <code>undefined</code> (<code>null</code> 혹은 {{glossary("falsy")}} 값이 아니긴 하지만 )로 설정하더라도 , <code>num</code> 인수의 값은 여전히 기본값입니다.</p>
+
+<pre class="brush: js notranslate">function test(num = 1) {
+  console.log(typeof num)
+}
+
+test()            // 'number' (num 은 1로 설정됨)
+test(undefined)   // 'number' (num 이 역시 1로 설정됨)
+
+// 다른 falsy values로 테스트 하기:
+test('')          // 'string' (num 은 ''로 설정됨)
+test(null)        // 'object' (num 은 null로 설정됨)
+</pre>
+
+<h3 id="호출_시_평가">호출 시 평가</h3>
+
+<p>기본 인수는 <em>호출</em> <em>시 </em>에 평가됩니다, 그래서 Python의 경우 와는 달리, 함수가 호출될 때마다 새로운 객체가 생성됩니다.</p>
+
+<pre class="brush: js notranslate">function append(value, array = []) {
+  array.push(value)
+  return array
+}
+
+append(1)  // [1]
+append(2)  // [2], [1, 2]가 아니라
+
+</pre>
+
+<p>이는 심지어 함수 및 변수에도 적용됩니다:</p>
+
+<pre class="brush: js notranslate">function callSomething(thing = something()) {
+  return thing
+}
+
+let numberOfTimesCalled = 0
+function something(){
+  numberOfTimesCalled += 1
+  return numberOfTimesCalled
+}
+
+callSomething()  // 1
+callSomething()  // 2
+</pre>
+
+<h3 id="앞쪽_매개변수는_뒷쪽의_매개변수_기본값에_사용할_수_있습니다">앞쪽 매개변수는 뒷쪽의 매개변수 기본값에 사용할 수 있습니다</h3>
+
+<p>매개 변수가 여러개일 때 앞쪽에( 왼쪽 부분) 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에  바로 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) {
+  return [name, greeting, message]
+}
+
+greet('David', 'Hi')                      // ["David", "Hi", "HiDavid"]
+greet('David', 'Hi', 'Happy Birthday!')   // ["David", "Hi", "Happy Birthday!"]
+</pre>
+
+<p>이 기능은,  얼마나 많은 경계 조건(edge case)를 다룰수 있는지 보여주는, 아래 예제로 거의 설명 가능합니다.</p>
+
+<pre class="brush: js notranslate">function go() {
+  return ':P'
+}
+
+// 함수 정의가 간단해짐
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g]
+}
+
+// 함수 정의가 길고 장황함
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+// 아래와 같이 함수 호출하면 동일한 결과를 보임
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="유효범위_효과_Scope_Effects">유효범위 효과 (Scope Effects)</h3>
+
+<p>한개 이상의 매개변수에 기본값이 지정되면 특별히 매개변수 목록내의 식별자들(identifiers) 대상으로, <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">두번째 스코프</a> (Environment Record) 가 생성됩니다.</p>
+
+<p>이 말은 함수 내부에 선언된 함수와 변수들은 매개변수 기본값 초기화시에 참조할 수  없다는 말입니다; 그렇게 하려고 하면 실행시간 에러인 {{jsxref("ReferenceError")}} 를 유발합니다.</p>
+
+<p>이 말은 또한 함수 내부에서 <code>var</code> 로 선언된 변수는 동일한 이름을 가진 매개변수를 가리게 되는, 중첩 <code>var</code> 선언 으로 인한 일반적인 동작이 일어나지 않는다는 말입니다.</p>
+
+<p>아래 함수는 호출되면 <code>ReferenceError</code> 를 발생시킵니다. 매개변수 기본값이 함수 내부의 자식 유효범위를 참조할 수 없기 때문입니다.</p>
+
+<pre class="brush: js example-bad notranslate">function f(a = go()) { // `f`가 호출 되면 `ReferenceError` 발생
+  function go() { return ':P' }
+}</pre>
+
+<p>...그리고 아래 함수는 <code>undefined</code> 를 프린트 하는데,  <code>var a</code> 가 함수 내부 대상의 유효범위내에서만 효과를 가지기 때문입니다. ( 매개변수 목록이 대상인 부모 스코프가 아니라)</p>
+
+<pre class="brush: js example-bad notranslate">function f(a, b = () =&gt; console.log(a)) {
+  var a = 1
+  b() // `undefined`를 인쇄하는데, 매개변수 기본값이 자체 스코프에 있기 때문입니다
+} </pre>
+
+<h3 id="기본값_매개변수_뒤쪽의_기본값_없는_매개변수">기본값 매개변수 뒤쪽의 기본값 없는 매개변수</h3>
+
+<p>매개변수는 여전히 왼쪽에서 오른쪽으로 설정됩니다. 아래 예제에서 뒷쪽에 기본값이 없는 매개변수가 있지만 기본값 매개변수를 덮어씁니다.</p>
+
+<pre class="brush: js notranslate">function f(x=1, y) {
+  return [x, y];
+}
+
+f()   // [1, undefined]
+f(2)  // [2, undefined]
+</pre>
+
+<h3 id="기본값_할당_있는_해체된_매개변수">기본값 할당 있는 해체된 매개변수</h3>
+
+<p>기본값 할당을 {{jsxref("Operators/Destructuring_assignment", "destructuring assignment", "", 1)}} 표기와 함께 사용할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z
+}
+
+f()  // 6</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>이 페이지의 호환성 표는 구조화된 데이타로 부터 생성됩니다. 해당 데이타 업데이트에 기여하고 싶다면 이 깃허브 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 체크아웃 해서 풀 리퀘스트를 보내주세요.</p>
+</div>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li>
+</ul>