array comprehension 문법은 기존의 배열을 기반으로 새로운 배열을 신속하게 어셈블 할 수 있는 JavaScript 표현식입니다. 그러나 표준 및 Firefox 구현에서 제거되었습니다. 사용하지 마세요!
[for (x of iterable) x] [for (x of iterable) if (condition) x] [for (x of iterable) for (y of iterable) x + y]
배열의 이해로 넘어가서, 다음 두가지의 요소들이 사용가능하다.
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
이것은 {{jsxref("Array.prototype.map", "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
{{jsxref("Array.prototype.filter", "filter()")}} 또한 같은 목적으로 얼마든지 사용가능하다.
var evens = numbers.filter(i => i % 2 === 0);
{{jsxref("Array.prototype.map", "map()")}} 그리고 {{jsxref("Array.prototype.filter", "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
배열에서의 [ ] (꺽쇠괄호) 는 범위의 목적으로 암시적인 괄호를 의미한다. {{jsxref("Statements/let","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'
또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 {{jsxref("Array.prototype.join", "join()")}} 를 사용해야 한다.
[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"]
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]
배열문법을 가장 쉽게 이해하는 방법은, 배열에서 {{jsxref("Array.map", "map")}} 그리고 {{jsxref("Array.filter", "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개의 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의 이전 버전을 참조하세요.
{{Compat("javascript.operators.array_comprehensions")}}
이전에 사용된 문법입니다. (더 이상 사용되지 않음!):
[X for (Y in Z)] [X for each (Y in Z)] [X for (Y of Z)]
차이점:
[()=>x for (x of [0, 1, 2])][1]() // 2[for (x of [0, 1, 2]) ()=>x][1]() // 1, each iteration creates a fresh binding for x. [i * 2 for (i of numbers)][for (i of numbers) i * 2]if 및 for 구성 요소를 여러 개 가질 수 있습니다.{{jsxref("Statements/for...of", "for...of")}}에서만 동작하고 {{jsxref("Statements/for...in", "for...in")}}에서는 동작하지 않습니다.버그 업데이트에 대한 제안은 Bug 1220564, comment 42를 참조하세요.