JavaScript - Array flat() 사용 방법

Javascriptarray

자바스크립트에서 Array.flat()은 배열의 하위 배열 요소까지 평탄화합니다. 평탄화 과정에서 지정한 깊이(depth)까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

예를 들어, flat()을 사용하면 아래와 같이 input 배열을 평탄화하여 output 배열 처럼 만들 수 있습니다.

input = [1, 2, [3, 4, [5, 6]]];
output = [1, 2, 3, 4, 5, 6]

1. Array.flat() Syntax

flat()은 인자로 전달된 깊이까지 배열을 평탄화합니다. 인자를 생략할 수 있으며, depth의 기본 값은 1입니다.

Array.flat(depth)

2. Array.flat()의 예제

flat()처럼 인자를 생략하면 depth가 1이며, flat(1)과 동일하게 동작합니다. 깊이 1까지 배열을 평탄화합니다. 반면에 flat(0)은 깊이가 0이기 때문에 평탄화를 하지 않게 됩니다.

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

console.log(arr1.flat());
console.log(arr1.flat(1));
console.log(arr1.flat(0));

Output:

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

아래 예제에서 배열 arr2는 depth가 2까지 있는 배열입니다. 전달되는 depth에 따라서 리턴되는 배열이 다릅니다.

const arr2 = [1, 2, [3, 4, [5, 6]]];

console.log(arr2.flat());
console.log(arr2.flat(1));
console.log(arr2.flat(2));

Output:

[ 1, 2, 3, 4, [ 5, 6 ] ]
[ 1, 2, 3, 4, [ 5, 6 ] ]
[ 1, 2, 3, 4, 5, 6 ]

만약 배열의 모든 하위 배열 요소들을 평탄화하려면 depth의 인자로 Infinity를 전달하면 됩니다.

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity));

Output:

[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

3. flat()으로 비어있는 배열 요소 제거

아래와 같이 배열에 자리만 차지하고 있는 요소가 있을 때, flat()으로 정리할 수 있습니다.

const arr5 = [1, 2, , 4, 5];
console.log(arr5.flat());

Output:

[ 1, 2, 4, 5 ]

4. reduce()와 concat()으로 flat() 구현

낮은 depth의 배열은 reduce()와 concat()을 사용하여 간단히 평단화 할 수 있습니다.

const arr = [1, 2, [3, 4]];

let flattened = arr.reduce((acc, val) => acc.concat(val), []);

console.log(flattened);

Output:

[ 1, 2, 3, 4 ]
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha