MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Non-standard. Do not use!
The array comprehensions is non-standard. For future-facing usages, consider using Array.prototype.map, Array.prototype.filter, arrow functions, and spread syntax.

배열 선언은 현재 가지고 있는 표현을 기반으로 새로운 배열을 빠르게 구성하고자고자 할 때 필요한 자바스크립트 표현이다. 선언은 다양한 프로그래밍 언어에 존재하고 있으므로 중요하다고 볼 수 있다.

ECMAScript4로 표현된 예제를 기반한 과거의 배열 선언 문법에서 그 차이점들을 아래를 통해 살펴보아라. 

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에서 이전부터 표준화 정립되어왔다, 이들은 다른 컨텐츠들로 부터 새로운 배열을 구성하는데 도움을 준다.

아래의 선언은 숫자로 이루어진 배열들을 다루고 이 숫자들 각각의 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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 30 (30) No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support 30.0 (30) No support No support No support

 

SpiderMonkey-specific implementation notes

  • let as an identifier is not supported as let is currently only available to JS version 1.7 and XUL scripts tags.
  • Destructuring in comprehensions is not supported yet (bug 980828).

Differences to the older JS1.7/JS1.8 comprehensions

JS1.7/JS1.8 comprehensions are removed from Gecko starting with version 46 (bug 1220564).

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

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

차이점:

  • ESNext comprehensions create one scope per "for" node instead of the comprehension as a whole.
    • 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 start with "for" instead of the assignment expression.
    • Old: [i * 2 for (i of numbers)]
    • New: [for (i of numbers) i * 2]
  • ESNext comprehensions can have multiple if and for components.
  • ESNext comprehensions only work with for...of and not with for...in iterations.

See Bug 1220564, comment 42 for suggestions on updating code.

더보기

문서 태그 및 공헌자

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