path: root/files/ko/web/javascript/reference/operators/배열/index.html

---
title: 배열 내포
slug: Web/JavaScript/Reference/Operators/배열
tags:
  - JavaScript
  - Non-standard
  - Obsolete
  - Operator
  - Reference
translation_of: Archive/Web/JavaScript/Array_comprehensions
---
<div>{{jsSidebar("Operators")}}</div>

<div class="warning"><strong>표준이 아닙니다. 사용하지 않는 것을 권장합니다!</strong><br>
Array comprehensions 문법은 비표준이며 Firefox 58부터는 제거됩니다. 향후 사용할 수 없게 되기 때문에 사용하지 않는것을 고려해보세요.<br>
{{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}}, and {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div>

<div>{{Obsolete_Header(58)}}</div>

<p><strong>array comprehension </strong>문법은 기존의 배열을 기반으로 새로운 배열을 신속하게 어셈블 할 수 있는 JavaScript 표현식입니다. 그러나 표준 및 Firefox 구현에서 제거되었습니다. 사용하지 마세요!</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">[for (x of iterable) x]
[for (x of iterable) if (condition) x]
[for (x of iterable) for (y of iterable) x + y]
</pre>

<h2 id="Description">Description</h2>

<p>배열의 이해로 넘어가서, 다음 두가지의 요소들이 사용가능하다.</p>

<ul>
 <li>{{jsxref("Statements/for...of", "for...of")}} and</li>
 <li>{{jsxref("Statements/if...else", "if")}}</li>
</ul>

<p>for-of 반복문은 항상 첫번째 요소이다. 여러개의 for-of 반복문이나 if 제어문을 사용할 수 있다.</p>

<p>배열 선언은 ECMAScript 2016에서 이전부터 표준으로 정립되어왔으며, 이는 다른 형태의 데이터(contents)를 이용해서 새로운 배열을 구성할 수 있게 해 준다.</p>

<p>아래의 선언은 숫자로 이루어진 배열 내 각각의 숫자들을 이용해서 double형의 새로운 배열을 만들어준다.</p>

<pre class="brush: js">var numbers = [1, 2, 3, 4];
var doubled = [for (i of numbers) i * 2];
console.log(doubled); // logs 2,4,6,8
</pre>

<p>이것은 {{jsxref("Array.prototype.map", "map()")}} 연산자와 같은 기능을 한다.</p>

<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
</pre>

<p>배열들은 또한 다양한 표현을 통해 몇몇개의 배열 원소들은 선택할 수 도 있다. 아래의 예제는 바로 홀수만 선택하는 예제이다.</p>

<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
var evens = [for (i of numbers) if (i % 2 === 0) i];
console.log(evens); // logs 2,22,30
</pre>

<p>{{jsxref("Array.prototype.filter", "filter()")}} 또한 같은 목적으로 얼마든지 사용가능하다.</p>

<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
</pre>

<p>{{jsxref("Array.prototype.map", "map()")}} 그리고 {{jsxref("Array.prototype.filter", "filter()")}} 스타일과 같은 연산자들은 단한 배열 선언과 결합할 수 있다. 아래는 짝수만 필터링하고, 그 원소들을 2배씩하는 배열들을 만드는 예제이다.</p>

<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
console.log(doubledEvens); // logs 4,44,60
</pre>

<p>배열에서의 [ ] (꺽쇠괄호) 는 범위의 목적으로 암시적인 괄호를 의미한다. {{jsxref("Statements/let","let")}}를 사용하면서 정의된다면, 예제의 i와 같은 변수들이 사용된다. 이는 배열 밖에서 사용할 수 없음을 나타낸다.</p>

<p>배열의 원소에 넣어지는 것은 굳이 배열일 필요는 없다 <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> 물론 가능하다.</p>

<p>심지어 문자열도 배열의 원소로 넣을 수 있다. 필터와 지도 액션과 같은 데에 이용할 수 있다.</p>

<pre class="brush: js">var str = 'abcdef';
var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
</pre>

<p>또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 {{jsxref("Array.prototype.join", "join()")}} 를 사용해야 한다.</p>

<h2 id="Examples">Examples</h2>

<h3 id="단순_배열">단순 배열</h3>

<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
// [1, 4, 9]

var abc = ['A', 'B', 'C'];
[for (letters of abc) letters.toLowerCase()];
// ["a", "b", "c"]</pre>

<h3 id="if문에서의_배열">if문에서의 배열</h3>

<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
[for (year of years) if (year &gt; 2000) year];
// [ 2006, 2010, 2014 ]
[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
// [ 2006], the same as below:
[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
// [ 2006]
</pre>

<h3 id="map과_filter를_비교한_배열">map과 filter를 비교한 배열</h3>

<p>배열문법을 가장 쉽게 이해하는 방법은, 배열에서 {{jsxref("Array.map", "map")}} 그리고 {{jsxref("Array.filter", "filter")}}메소드를 비교하는 것이다.</p>

<pre class="brush: js">var numbers = [1, 2, 3];

numbers.map(function (i) { return i * i });
numbers.map(i =&gt; i * i);
[for (i of numbers) i * i];
// all are [1, 4, 9]

numbers.filter(function (i) { return i &lt; 3 });
numbers.filter(i =&gt; i &lt; 3);
[for (i of numbers) if (i &lt; 3) i];
// all are [1, 2]
</pre>

<h3 id="2개의_배열">2개의 배열</h3>

<p>2개의 배열과 2개의 for-of 반복문을 살펴본다.</p>

<pre class="brush: js">var numbers = [1, 2, 3];
var letters = ['a', 'b', 'c'];

var cross = [for (i of numbers) for (j of letters) i + j];
// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]

var grid = [for (i of numbers) [for (j of letters) i + j]];
// [
//  ["1a", "1b", "1c"],
//  ["2a", "2b", "2c"],
//  ["3a", "3b", "3c"]
// ]

[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'a') i + j]
// ["2b", "2c", "3b", "3c"], the same as below:

[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]
// ["2b", "2c", "3b", "3c"]

[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'a') i + j]]
// [["2b", "2c"], ["3b", "3c"]], not the same as below:

[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]]
// [[], ["2b", "2c"], ["3b", "3c"]]
</pre>

<h2 id="명세">명세</h2>

<p>ECMAScript 2015 초안에 있었지만 개정 27(2014년 8월)에서 삭제되었습니다. specification semantics에 대해서는 ES2015의 이전 버전을 참조하세요.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("javascript.operators.array_comprehensions")}}</p>

<h2 id="오래된_JS1.7JS1.8_comprehensions과의_차이점들">오래된 JS1.7/JS1.8 comprehensions과의 차이점들</h2>

<div class="warning">Gecko에서 JS1.7 / JS1.8 comprehensions가 46 버전부터 제거되었습니다. ({{bug(1220564)}}).</div>

<p><strong>이전에 사용된 문법입니다. (더 이상 사용되지 않음!):</strong></p>

<pre class="brush: js example-bad">[X for (Y in Z)]
[X for each (Y in Z)]
[X for (Y of Z)]
</pre>

<p>차이점:</p>

<ul>
 <li>ESNext comprehensions는 전체comprehension 대신 "for"노드마다 하나의 범위를 만듭니다.
  <ul>
   <li>Old: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
   <li>New: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, each iteration creates a fresh binding for x. </code></li>
  </ul>
 </li>
 <li>ESNext comprehensions은 assignment expression대신 "for"로 시작합니다.
  <ul>
   <li>Old: <code>[i * 2 for (i of numbers)]</code></li>
   <li>New: <code>[for (i of numbers) i * 2]</code></li>
  </ul>
 </li>
 <li>ESNext comprehensions는 <code>if</code> 및 <code>for</code> 구성 요소를 여러 개 가질 수 있습니다.</li>
 <li>ESNext comprehensions <code>{{jsxref("Statements/for...of", "for...of")}}</code>에서만 동작하고 <code>{{jsxref("Statements/for...in", "for...in")}}</code>에서는 동작하지 않습니다.</li>
</ul>

<p>버그 업데이트에 대한 제안은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a>를 참조하세요.</p>

<h2 id="더보기">더보기</h2>

<ul>
 <li>{{jsxref("Statements/for...of", "for...of")}}</li>
 <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li>
</ul>