Array.prototype.flatMap()

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평평화합니다. 이는 깊이 1의 flat 이 뒤따르는 map 과 동일하지만, flatMap 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.

구문

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

매개변수

callback
새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다.
 
currentValue
배열에서 처리되는 현재 엘리먼트.
indexOptional
배열에서 처리되고 있는 현재 엘리먼트의 인덱스.
arrayOptional
map 이 호출된 배열.
thisArgOptional
callback 실행에서 this 로 사용할 값.

반환 값

각 엘리먼트가 callback 함수의 결과이고, 깊이 1로 평평화된 새로운 배열.

설명

callback 함수의 상세 설명은 Array.prototype.map() 문서를 보시기 바랍니다. flatMap 메소드는 깊이 1의 flat 이 뒤따르는 map 과 동일합니다.

예제

mapflatMap

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평평화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

위 코드는 map 자체만을 사용해서 구현할 수 있지만, 다음은 flatMap 의 유즈케이스를 더 잘 보여주는 예시입니다.

문장의 리스트로부터 단어의 리스트를 생성해봅시다.

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x=>x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in","California"]

출력 리스트의 길이는 입력 리스트의 길이와 다를 수 있습니다.

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

대안

reduceconcat

var arr1 = [1, 2, 3, 4];

arr1.flatMap(x => [x * 2]);
// 다음과 동일합니다
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

명세

Specification Status Comment
Array.prototype.flatMap proposal Finished (4)  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
flatMapChrome Full support 69Edge No support NoFirefox Full support 62IE No support NoOpera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 62Opera Android Full support 48Safari iOS Full support 12Samsung Internet Android Full support 10.0nodejs Full support 11.0.0

Legend

Full support  
Full support
No support  
No support

같이 보기