자바스크립트 배열 합치기: concat() 메서드, spread 연산자

이번 포스팅에서는 자바스크립트에서 배열을 합치는 방법에 대해서 간단히 정리해보겠습니다.

concat() 메서드

연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있습니다.

예를 들어, concat() 메서드로 숫자 배열에 글자 배열을 합쳐보겠습니다.

const numbers = [1, 2, 3];
const letters = ["A", "B"];
const concatenated = numbers.concat(letters);
console.log(concatenated); // [1, 2, 3, 'A', 'B']

concat() 메서드의 중요한 특징은 바로 원본 배열을 건드리지 않고 새로운 배열을 반환한다는 것입니다.

console.log(numbers); // [1, 2, 3]
console.log(letters); // ['A', 'B']

따라서 원본 배열을 건드리지 않는 배열의 다른 메서드와 함께 체인(chain)의 형태로 연쇄 호출이 가능합니다.

[1, 2, 3]
  .concat(["A", "B"])
  .map((item) => item + item)
  .reduce((acc, val) => acc + val, ""); // '246AABB'

concat() 메서드는 가변 인자를 받기 때문에 여러 개의 배열을 한 번에 합칠 수도 있습니다.

[1, 2, 3].concat(["A", "B"], true, [false]);
// [1, 2, 3, 'A', 'B', true, false]

위 예제에서 true 인수를 보시면 아시겠지만 반드시 배열을 넘겨야하는 것도 아닙니다. 이렇게 일반 값을 넘기면 그 값을 합쳐진 배열에 추가해줍니다.

spread 연산자

ES6부터는 배열을 합칠 때 spread 또는 전개 연산자라고 불리는 ... 기호가 많이 사용되는데요. 배열을 나타내는 [] 기호 안에서 어떤 원소 앞에 ... 기호를 붙이면 그 배열 내의 원소가 마치 펼쳐진 것처럼 해당 배열에 추가됩니다.

const numbers = [1, 2, 3];
const letters = ["A", "B"];
const spread = [...numbers, ...letters];
console.log(spread); // [1, 2, 3, 'A', 'B']

이 문법을 활용하면 매우 유연하게 일반 값과 배열을 합쳐줄 수 있습니다.

[...[1, 2], 3, ...["A", "B"], true, ...[false]];
// [1, 2, 3, 'A', 'B', true, false]

전개 연산자는 배열을 복제할 때도 유용하게 사용할 수 있는데요.

const original = [1, 2, 3];
const clone = [...original];
console.log(original); // [1, 2, 3]
console.log(clone); // [1, 2, 3]

물론, concat() 메서드로도 동일한 효과를 낼 수 있습니다.

const original = [1, 2, 3];
const clone = [].concat(original);
console.log(original); // [1, 2, 3]
console.log(clone); // [1, 2, 3]

주변에 보면 전개 연산자를 쓰는 편이 코드를 읽기가 더 편한다고 하시는데 저는 개인적으로 가독성에 큰 차이가 있어 보이지는 않는 것 같아요.

마치며

지금까지 자바스크립트에서 배열을 합치는 대표적인 2가지 방법인 concat() 메서드와 전개 연산자에 대해서 알아보았습니다.