initial commit

1 files changed, 148 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..9d762001e8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,148 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+tags:
+  - Array
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p><code><strong>flatMap()</strong></code> 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다. 이는 깊이 1의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> 이 뒤따르는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> 과 동일하지만, <code>flatMap</code> 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.flatMap(<var>callback(currentValue[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다.
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>배열에서 처리되는 현재 엘리먼트.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>배열에서 처리되고 있는 현재 엘리먼트의 인덱스.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd><code>map</code> 이 호출된 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd><code>callback</code> 실행에서 <code>this</code> 로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>각 엘리먼트가 callback 함수의 결과이고, 깊이 1로 평탄화된 새로운 배열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>callback 함수의 상세 설명은 {{jsxref("Array.prototype.map()")}} 문서를 보시기 바랍니다. <code>flatMap</code> 메소드는 깊이 1의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> 이 뒤따르는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> 과 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="map_과_flatMap"><code>map</code> 과 <code>flatMap</code></h3>
+
+<pre class="brush: js">let arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// 한 레벨만 평탄화됨
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>위 코드는 map 자체만을 사용해서 구현할 수 있지만, 다음은 <code>flatMap</code> 의 유즈케이스를 더 잘 보여주는 예시입니다.</p>
+
+<p>문장의 리스트로부터 단어의 리스트를 생성해봅시다.</p>
+
+<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"];
+
+arr1.map(x=&gt;x.split(" "));
+// [["it's","Sunny","in"],[""],["California"]]
+
+arr1.flatMap(x =&gt; x.split(" ")<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// ["it's","Sunny","in","California"]</span></span></span></span></span></pre>
+
+<p>출력 리스트의 길이는 입력 리스트의 길이와 다를 수 있습니다.</p>
+
+<h3 id="flatMap_을_이용한_아이템_추가_및_제거"><code>flatMap()</code> 을 이용한 아이템 추가 및 제거</h3>
+
+<p><code>flatMap</code>은 <code>map</code>을 하는 과정에서 아이템을 추가하거나 제거하여 아이템 개수를 바꿀 수 있습니다. 다른 말로는 각각의 아이템에 대하여 1:1대응관계 뿐만 아니라 다대다 대응도 가능하다는 것입니다. 이러한 측면에서 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>가 하는 역할의 반대역할을 한다고 볼 수 있습니다. 단순히 아무런 변화를 주고 싶지 않을때에는 원소 하나를 가진 배열을 반환할 수도, 아이템을 추가하고 싶을 때는 다-원소 배열을 반환할 수도, 아이템을 제거하고 싶을 때에는 빈 배열을 반환할 수도 있습니다.</p>
+
+<pre><code>// 다음은 음수는 제거하고 홀수는 1과 짝수로 분리하는 예시입니다.
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =&gt;
+  (n &lt; 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// expected output: [4, 1, 4, 20, 16, 1, 18]</code></pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="대안">대안</h2>
+
+<h3 id="reduce_와_concat"><code>reduce</code> 와 <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+</span></span></span></span></span>
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// 다음과 동일합니다
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span>
+<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span>
+</pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td>
+   <td>Finished (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>