표준이 아닙니다. 사용하지 않는 것을 권장합니다!
Array comprehensions 문법은 비표준이며 Firefox 58부터는 제거됩니다. 향후 사용할 수 없게 되기 때문에 사용하지 않는것을 고려해보세요.
Array.prototype.map, Array.prototype.filter, arrow functions, and spread syntax.


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

현재 구현한 코드중에 array comprehension이 있다면 다른코드로 변경하시기 바랍니다.

Syntax

[for (x of iterable) x]
[for (x of iterable) if (condition) x]
[for (x of iterable) for (y of iterable) x + y]

Description

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

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

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

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

var numbers = [1, 2, 3, 4];
var doubled = [for (i of numbers) i * 2];
console.log(doubled); // logs 2,4,6,8

이것은 map() 연산자와 같은 기능을 한다.

var doubled = numbers.map(i => i * 2);

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

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

filter() 또한 같은 목적으로 얼마든지 사용가능하다.

var evens = numbers.filter(i => i % 2 === 0);

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

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

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

배열의 원소에 넣어지는 것은 굳이 배열일 필요는 없다 iterators and generators 물론 가능하다.

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

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'

또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 join() 를 사용해야 한다.

Examples

단순 배열

[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"]

if문에서의 배열

var years = [1954, 1974, 1990, 2006, 2010, 2014];
[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]
[for (year of years) if (year > 2000) if (year < 2010) year];
// [ 2006], the same as below:
[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006] 

map과 filter를 비교한 배열

배열문법을 가장 쉽게 이해하는 방법은, 배열에서 map 그리고 filter메소드를 비교하는 것이다.

var numbers = [1, 2, 3];

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

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

2개의 배열

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

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 > 1) for (j of letters) if(j > 'a') i + j]
// ["2b", "2c", "3b", "3c"], the same as below:

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

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

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

명세

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic support
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 30 — 58IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support 30 — 58Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support Nonodejs No support No

Legend

No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

오래된 JS1.7/JS1.8 comprehensions과의 차이점들

Gecko에서 JS1.7 / JS1.8 comprehensions가 46 버전부터 제거되었습니다. (bug 1220564).

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

[X for (Y in Z)]
[X for each (Y in Z)]
[X for (Y of Z)]

차이점:

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

버그 업데이트에 대한 제안은 Bug 1220564, comment 42를 참조하세요.

더보기

문서 태그 및 공헌자

이 페이지의 공헌자: teoli, limkukhyun, JeonghoonChoi, hyojeongson, ChanghwaLee
최종 변경자: teoli,