initial commit

1 files changed, 185 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html
new file mode 100644
index 0000000000..aeaded7640
--- /dev/null
+++ b/files/ko/web/javascript/reference/trailing_commas/index.html
@@ -0,0 +1,185 @@
+---
+title: Trailing commas
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - Comma
+  - ECMAScript
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Language feature
+  - Syntax
+  - Trailing comma
+  - 구문
+  - 자바스크립트
+  - 콤마
+  - 트레일링 콤마
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><strong>Trailing commas</strong> ("final commas"라고도 불립니다)는 새로운 엘리먼트나 매개변수, 속성을 JavaScript 코드에 추가할 때 유용합니다. 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄을 수정 없이 그대로 복사해 쓸 수 있습니다. 이외에도 버전 관리 이력이 간단해지고 코드 편집이 더 편해진다는 장점이 있습니다.</p>
+
+<p>JavaScript는 초기부터 배열 리터럴에 trailing comma를 허용했으며, ECMAScript 5부터는 객체 리터럴, ECMAScript 2017부터는 함수의 매개변수에도 허용하기 시작했습니다.</p>
+
+<p>그러나 {{Glossary("JSON")}}에서는 trailing comma를 허용하지 않습니다.</p>
+
+<h2 id="리터럴에서의_trailing_comma">리터럴에서의 trailing comma</h2>
+
+<h3 id="배열">배열</h3>
+
+<p>JavaScript는 배열에 나타나는 trailing comma를 무시합니다.</p>
+
+<pre class="brush: js notranslate">var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3</pre>
+
+<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다<sup>sparse</sup>고 합니다(조밀한<sup>dense</sup> 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
+arr.length; // 5
+</pre>
+
+<h3 id="객체">객체</h3>
+
+<p>ECMAScript 5부터는 객체 리터럴에도 trailing comma를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};</pre>
+
+<h2 id="함수에서의_trailing_comma">함수에서의 trailing comma</h2>
+
+<p>ECMAScript 2017에서는 함수의 매개변수 목록에 trailing comma를 허용합니다.</p>
+
+<h3 id="매개변수_정의">매개변수 정의</h3>
+
+<p>아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 <code>length</code> 속성이나 <code>arguments</code> 객체에 영향을 주지 않습니다.</p>
+
+<pre class="brush: js notranslate">function f(p) {}
+function f(p,) {}
+
+(p) =&gt; {};
+(p,) =&gt; {};
+</pre>
+
+<p>Trailing comma는 클래스나 객체의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">메소드 정의</a>에도 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">class C {
+  one(a,) {},
+  two(a, b,) {},
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+</pre>
+
+<h3 id="함수_호출">함수 호출</h3>
+
+<p>아래의 두 함수 호출은 모두 유효하며, 서로 같습니다.</p>
+
+<pre class="brush: js notranslate">f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+</pre>
+
+<h3 id="잘못된_trailing_comma">잘못된 trailing comma</h3>
+
+<p>함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest 매개변수</a>를 사용할 때는 trailing comma를 사용할 수 없습니다.</p>
+
+<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
+(,) =&gt; {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
+</pre>
+
+<h2 id="구조_분해_할당에서의_trailing_comma">구조 분해 할당에서의 trailing comma</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>의 좌변에도 trailing comma를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Trailing comma가 있는 배열 구조 분해
+[a, b,] = [1, 2];
+
+// Trailing comma가 있는 객체 구조 분해
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+</pre>
+
+<p>Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다.</p>
+
+<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h2 id="JSON에서의_trailing_comma">JSON에서의 trailing comma</h2>
+
+<p>객체 안에서의 trailing comma는 ECMAScript 5에 와서야 추가되었습니다. JSON은 ES5 이전의 JavaScript 문법을 기초로 하므로 <strong>JSON에서는 trailing comma를 사용할 수 없습니다</strong>.</p>
+
+<p>아래의 두 줄 모두 <code>SyntaxError</code>를 발생합니다.</p>
+
+<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다.</p>
+
+<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</pre>
+
+<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('ES5.1')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>객체 리터럴 trailing comma 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017에서 함수 trailing comma 추가</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
+</ul>