JavaScript - Array flatMap() 사용 방법

Javascriptarray

자바스크립트에서 Array.flatMap()은 map()과 flat()을 순차적으로 수행하는 함수입니다. map()은 배열의 요소에 어떤 연산을 하고 다른 값으로 변경해주는 것이고, flat()은 배열의 하위 배열 요소들을 평탄화해주는 함수입니다. 즉, flatMap()은 요소들을 다른 값으로 바꾸고 하위 배열 요소들을 평탄하는 것이라고 볼 수 있습니다.

예를 들어, map()으로 변환된 배열이 a 배열이라면, flatMap()은 추가로 평탄화를 하여 b와 같은 배열을 리턴합니다.

a: [ [ 1 ], [ 2 ], [ 3 ], [ 4 ] ]
b: [ 1, 2, 3, 4]

1. flatMap()과 map()의 차이점

다음은 flatMap()과 map()의 차이점을 보여주는 예제입니다. map은 배열의 문자열 요소들을 ,로 분리하고 있습니다. flatMap도 동일하게 문자열을 분리하지만 추가로 하위 배열 요소들에 대해서 평탄화 작업을 하고 있습니다. map()의 경우 배열에 하위 배열들이 만들어지지만, flatMap()은 평탄화 작업을 거쳐 하위에 배열이 없게 됩니다.

let arr1 = ["Hello,World", "", "Array,flatmap"];

let result = arr1.map(x=>x.split(","));
console.log(result);

result = arr1.flatMap(x => x.split(","));
console.log(result);

Output:

[ [ 'Hello', 'World' ], [ '' ], [ 'Array', 'flatmap' ] ]
[ 'Hello', 'World', '', 'Array', 'flatmap' ]

2. flatMap()과 평탄화 배열 깊이(depth)

flatMap()은 depth 1의 배열만 평탄화합니다. 아래와 같이 map()으로 변환된 배열이 depth가 2인 배열이라면, 모든 하위 배열 요소를 평탄화하지는 못합니다.

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

let result = arr1.map(x => [x]);
console.log(result);

result = arr1.flatMap(x => [x]);
console.log(result);

Output:

[ [ [ 1 ] ], [ [ 2 ] ], [ [ 3 ] ], [ [ 4 ] ] ]
[ [ 1 ], [ 2 ], [ 3 ], [ 4 ] ]

3. reduce()와 concat()으로 flatMap() 구현

reduce()와 concat()으로 flatMap()과 동일하게 동작하도록 구현할 수 있습니다.

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

let result = arr1.flatMap(x => [x * 2]);
console.log(result);

result = arr1.reduce((acc, x) => acc.concat([x * 2]), []);
console.log(result);

Output:

[ 2, 4, 6, 8 ]
[ 2, 4, 6, 8 ]
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha