Array.concat을 사용하면 두 배열을 이어붙일 수 있습니다.

Array.push

자바스크립트에 Array가 있습니다. 주로 다음과 같이 초기화하죠.

let arr = [];

let otherArr = new Array();

let anotherArr = new Array(5);

let filled = anotherArr.fill(0);

// ...

코딩을 하다 보면, 이렇게 초기화된 배열에 다른 요소를 집어넣어야 하는 경우가 생깁니다. 그럴 때 주로 사용하는 것이 Array.push 메서드입니다.

let arr = ["Apple", "Banana", "PineApple"];

console.log(arr); // => [ 'Apple', 'Banana', 'PineApple' ]

arr.push("Orange");

console.log(arr); // => [ 'Apple', 'Banana', 'PineApple', 'Orange' ]

특정 위치에 요소를 삽입하거나 제거할 때엔 splice를 사용하기도 합니다.

arr.splice(1, 0, 'Melon');

console.log(arr); // => [ 'Apple', 'Melon', 'Banana', 'PineApple', 'Orange' ]

arr.splice(3, 1) // => [ 'PineApple' ]

console.log(arr); // => [ 'Apple', 'Melon', 'Banana', 'Orange' ]

그런데 문제는, 배열에 다른 배열을 이어 붙여야 하는 경우입니다. 단순히 배열의 요소에 배열 자체를 집어넣는 경우는 여전히 push 메서드로 할 수 있습니다.

arr.push(['a', 'b', 'c']);

console.log(arr); // => [ 'Apple', 'Melon', 'Banana', 'Orange', [ 'a', 'b', 'c' ] ]

위와 같이 마지막 인덱스의 요소 자체가 배열로 삽입되었죠. 하지만 제가 하고 싶은 것은 다음과 같습니다.

// arr에 ['D', 'E', 'F'] 배열을 이어붙이는 로직

console.log(arr); // => [ 'Apple', 'Melon', 'Banana', 'Orange', [ 'a', 'b', 'c' ], 'D', 'E', 'F' ]

어떻게 해야 할까요?

Array.concat

해답은 바로 Array.concat입니다.

let arr = [1, 2, 3];

let otherArr = [4, 5, 6];

arr.concat(otherArr); // => [ 1, 2, 3, 4, 5, 6 ]

물론 위 링크를 보셨다면 아시겠지만, concat은 push나 splice와 달리 배열 자체를 수정하지 않습니다. 따라서, arr에 otherArr를 이어붙이고자^[1] 한다면 다음과 같이 재할당해야 합니다.

let arr = [1, 2, 3];

let otherArr = [4, 5, 6];

arr = arr.concat(otherArr);

console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

참 쉽죠?

---

1. concatenate ↩︎