원문
https://javascript.plainenglish.io/efficiently-merging-arrays-in-javascript-32993788a8b2
배열을 합치는 방법
Javascript에는 다음 3가지의 배열 병합 방법이 존재한다.
1. concat
2. push
3. spread
이 세가지를 언제, 어떻게 사용하면 좋을까?
원문의 필자는 코드 작성 시 다음 3가지 요소를 고려한다.
a) 작동여부
b) 가독성(다른 사람이 쉽게 읽을 수 있어야 함)
c) 성능
자, 이제 각 요소별로 배열 병합 방법을 파헤쳐보자.
1. concat
concat은 사실상 JS에서 배열을 합치는 방법의 표준이다.
concat은 눈에 잘 들어오며 읽기도 쉽다.
array2를 array1에 병합한다는 뜻이 직관적으로 나타나 있다.
concat의 중요한 특징은 원본 배열을 변경하지 않는다는 것이다.
concat은 ES1부터 존재해왔기 때문에 믿을만한 메서드임엔 틀림 없다.
2. push
push는 기존 배열 끝에 요소를 추가하기 때문에 concat과 비교했을 때 배열 병합방식이 조금 다르다.
push를 사용하면 원본 배열이 바뀐다.
만약 원본 배열이 바뀌는 것을 원한다면 push 메서드를 사용하면 된다.
push는 이전 concat에 비해 작성한 코드가 조금 늘어났지만, 여전히 읽기 쉽다.
3. spread syntax
spread(spread 문법)는 배열을 각각의 요소로 확장한다.
확장된 요소들은 원본 배열의 얕은 복사다.
그래서 spread 문법은 원본 배열을 변경하진 않는다.
spread는 위의 push를 한 줄에 작성할 수 있다.
만약 spread 문법이 익숙한 사람이면 위 코드는 읽기도 쉽고 아주 직관적일 것이다.
자, 이제 배열을 병합하는 3가지 방법들의 성능을 따져보자.
Performace
배열을 병합하는 3가지 방법들에 대해 원시 값을 담은 배열과, 객체를 담은 배열 그리고 두 가지를 섞은 배열에 대해서 각각 성능을 체크해 보자.
표의 초록색 셀은 속도가 가장 빠른 것을, 오렌지색 셀은 가장 느린 속도를 보여준다.
얼핏 봤을 때는, spread 문법이 위의 3가지 조건을 전부 고려했을 때 가장 빠른 것처럼 보인다.
그런데 표에서 spread 문법은 배열의 크기가 아주 큰 조건에서는 N/A 즉, 값을 측정할 수 없음을 보여준다.
왜냐하면 spread 문법은 아주 큰 크기의 배열에선 작동하지 않는다.
크기가 100,000인 배열에서 spread 연산자를 사용하면 'RangeError:Maximum call stack size exceeded'가 발생한다.
이 에러는 spread 문법이 배열에 병합하려는 요소(ex. array1에 array2를 합치는 array1.push(...array2)에서 array2의 각각의 요소들) 전체를 스택에 쌓기 때문이다.
만약 코드를 작성할 때 작은 크기의 배열을 합칠 거면 spread 문법이 효과적일 것이다.
큰 크기의 배열에선 concat 메서드를 사용하는게 효과적일 것이다.
마무리
코드를 작성하는 것에 있어서, 목표는 잘 작동하는 코드이며 효율적이고 읽기 쉬운 코드여야함을 잊지 말자.
