array.flat()
메소드의 단점을 알아본다.array.flat()
의 대안을 알아본다.flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다
- MDN Document
그래서 flat()
이 뭐하는 앤데?
그래서 준비했다. 초간단 예제.
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // default depth: 1
// [1, 2, 3, 4]
🤔 근데 뭐가 문젠데요?
처리속도가 느리다. OS | Web Browser 1 | Web Browser 2 |
---|---|---|
MAC | Chrome (91.0(x86_64)) | Safari (14.1.1) |
0~9의 인덱스와 원소 갯수 (25개, 13개.. 23개)를 갖는 2차원 배열을 1차원 배열로 늘어뜨려보자.
// 161 개의 데이터
console.time('flat-sort');
// falt and sort
const allRecords = response.data.records
.flat().sort(logDatetimeCompare);
console.timeEnd('flat-sort');
console.time('sort');
// only sort
const allRecords = response.data.records
.sort(logDatetimeCompare);
console.timeEnd('sort');
Chrome 기준 약 8배의 속도차이
Safari 기준 약 10배의 속도차이
.concat()
console.time('concatenation');
const allRecords =[].concat(...response.data.records)
.sort(logDatetimeCompare);
console.timeEnd('concatenation');
// concatenation: 0.299ms
// 2회차에 0.453ms
// 3회차에 0.344ms
flat()
보다는 1.5배~2배 빠르다.
단, depth 를 1로밖에 설정할 수 없는 단점이 있다.
.concat()
의 단점인 depth 제한은 없으나 속도는 당연 .concat()
만 쓴것보다 느리다.
function flatDeep(arr, depth = 1) {
return depth > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, depth - 1) : val), [])
: arr.slice();
};
console.time('flatDeep');
const allRecords = flatDeep(response.data.records)
.sort(logDatetimeCompare);
console.timeEnd('flatDeep');
// 0.445ms
크롬에서의 concat 과 reduce + concat + isArray
단위: ms
분류 | Chrome | Safari |
---|---|---|
flat | 0.169921875 | 0.599 |
only sort | 0.02685546875 | 0.057 |
concat | 0.10205078125 | 0.344 |
flatDeep | 0.22119140625 | 0.445 |
배열 원소개수가 161개밖에 되지 않는데도 이런 차이를 보인다면
1,000개 10,000개 늘어날 수록..
The key point is that the implementation of Array.prototype.flat
is not at all optimized.
(중략..)
Optimizing means adding additional fast paths that take various shortcuts when possible. That work hasn't been done yet for .flat()
It has been done for .concat()
👉 V8 브라우저 엔진에 .flat()
에 대한 최적화는 아직되지 않았고, .concat()
에는 최적화 되었다.
(Chrome, Safari 모두 2021-06-22 기준 )
간편하게 쓸 수 있는
flat()
은 브라우저에 최적화가 되있지 않은 상태이므로
[].concat()
을 사용하는 것이 속도면에서 더 유리하다.
흥미로운 글이네요! 잘 읽었습니다 :)