[javascript] 자바스크립트 배열 합치기 (concat)

참고: https://www.samanthaming.com/tidbits/49-2-ways-to-merge-arrays/

다음 두 가지 예제는 배열을 합치고 새 배열을 반환하는 코드입니다. 스프레드 연산자가 사용하기 편하지만 오래된 브라우저(ES6를 지원하지 않는) 까지 지원해야 하는 경우 Array.concat()을 사용해야 합니다.

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

// Method 1: Concat
const combined1 = [].concat(cars, trucks);

// Method 2: Spread
const combined2 = [...cars, ...trucks];

console.log(combined1);
console.log(combined2);

Array.concat() 문법

JavaScript의 Array.concat() 메소드의 사용 방법은 다음과 같습니다:

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

const combined = cars.concat(trucks);

console.log(cars);
console.log(trucks);
console.log(combined);

위 예제에서 보다시피 이 방법은 기존 배열을 조작하거나 변경하지 않습니다.

어떤 방법을 선택할지?

쉽게 비교할 수 있도록 아래에 두 가지 방법을 모두 나열해 보겠습니다:

// Version A:
const combinedA = [].concat(cars, trucks);

// Version B:
const combinedB = cars.concat(trucks);

위의 두 가지 방법 중 어떤 것을 선택해야 할까요? 저는 의도가 더 명확한 구문인 버전 A를 선호합니다. 왜냐하면 보기만 해도 새 배열을 만들고 있다는 것을 알 수 있으며 기존 배열을 조작하지 않는다는 것을 알 수 있기 때문입니다. 반면 버전 B를 보면 trucks 배열을 cars 배열에 추가하는 것 처럼 보이고 API 문서를 확인하거나 테스트 해보지 않는 한 cars 배열이 변경되지 않는다고 단언할 수 없습니다. 선택의 판단은 사용하는 개발자의 몫 입니다. 위 두 가지 버전 선택에 대해 미학 말고는 딱히 별 다른 이유가 없기 때문에 이미 사용 중인 것을 사용하는 것이 좋을 것 같습니다.

spread와 concat의 차이

스프레드 연산자가 더 간결하고 작성하기 쉽기 때문에 스프레드 연산자 사용을 선호합니다. 하지만 concat에는 여전히 이점이 있습니다.

개발자가 배열을 다루고 있다는 것을 미리 알고 있으면 스프레드 연산자는 쓰기 아주 편합니다. 그러나 문자열이나 다른 자료를 다루고 있다면 어떻게 될까요? 만일 문자열을 배열에 추가하고자 한다면 어떻게 해야할까요? 다음 예제를 살펴보겠습니다.

예제: 임의의 인수 처리하기

다음과 같은 결과를 얻고 싶다고 가정하겠습니다:

[1, 2, 3, 'random'];

1. spread 사용

위에서 하던 방식대로 스프레드 연산자를 사용한다면 다음과 같은 결과를 볼 수 있습니다:

function combineArray(array1, array2) {
  return [...array1, ...array2];
}

const isArray = [1, 2, 3];
const notArray = 'random';

combineArray(isArray, notArray);

위의 결과와 같이 스프레드 연산자를 사용하면 문자열을 각각의 문자로 쪼개버립니다. 따라서 앞서 원했던 결과인 [1, 2, 3, 'random']을 얻을 수 없습니다.

2. concat 사용

스프레드와 동일한 과정을 concat() 메소드에 맡긴 경우 다음과 같은 결과를 볼 수 있습니다.

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const isArray = [1, 2, 3];
const notArray = 'random';

combineArray(isArray, notArray);

concat() 메소드를 사용하여 원하는 결과를 얻었습니다.

"아니 인수가 배열인지 아닌지 확인하고 조건문을 달아서 만들 수도 있잖아?" 라고 생각할 수도 있습니다. 맞는 말 입니다. 하지만 concat을 사용하여 코드 양을 줄일 수 있습니다.

평가

의사결정을 빠르게 해줄 룰이 있습니다. 명확히 배열을 다루고 있다면 스프레드 연산자를 사용하고 배열이 아닐 가능성이 있다면 concat을 사용하는 것 입니다. 프로젝트 진행 시 참고하여 적절한 방법을 선택하길 바랍니다.

push로 배열 합치기

한번은 push를 사용하여 배열을 합칠 수는 없을지 궁금할 수도 있습니다. 대답은 "네 할 수 있습니다"입니다. 하지만 push를 사용하면 원본 배열을 조작하거나 변경해 버리고 새 배열을 생성하지는 않습니다.

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

const combined = cars.push(...trucks);

console.log(combined);

console.log(cars);
console.log(trucks);

또한 배열을 다른 배열로 push 할 때 추가하려는 배열을 스프레드 연산자로 펼친 후 push 해야합니다. 그렇게 하지 않으면 배열 내에 배열이 추가되여 중첩 배열이 됩니다.

관련 글

자바스크립트 배열 추가 (push)

자바스크립트 스프레드 연산자(...) 사용 방법