JavaScript - 배열 합치기 (concat, spread, push)

By JS | Last updated: April 02, 2022

Javascriptexamples

자바스크립트에서 두개 이상의 배열을 하나의 배열로 합치는 방법을 소개합니다.

1. concat()을 이용하여 배열 합치기

아래와 같이 concat을 이용하여 arr1, arr2, arr3의 배열을 합칠 수 있습니다. concat()은 원본 배열(arr1, arr2, arr3)을 변경하지 않고, 합쳐진 배열이 리턴됩니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];

const arr4 = arr1.concat(arr2, arr3);

console.log(arr4);

Output:

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

다음과 같이 2개의 배열만 합칠 수도 있습니다.

const arr = arr1.concat(arr2);

또한, 아래와 같은 방식으로 두개의 배열을 합칠 수도 있습니다.

const arr = [].concat(arr1, arr2);

2. Spread operator를 이용하여 배열 합치기

Spread operator는 ...와 같이 배열의 요소들을 나열하는 전개 연산자입니다.

이 연산자를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있습니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];

const arr4 = [
  ...arr1,
  ...arr2,
  ...arr3
];

console.log(arr4);

Output:

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

3. push()를 이용하여 배열 합치기

Spread operator와 push()를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있습니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];

const arr4 = [];
arr4.push(...arr1);
arr4.push(...arr2);
arr4.push(...arr3);

console.log(arr4);

Output:

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

만약 Spread operator를 사용하지 않고 그냥 push()에 객체를 전달하면 아래와 같이 배열 안에 배열이 추가됩니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];

const arr4 = [];
arr4.push(arr1);
arr4.push(arr2);
arr4.push(arr3);

console.log(arr4);

Output:

[ [ 'a', 'b', 'c' ], [ '1', '2', '3' ], [ 'A', 'B', 'C' ] ]
javascript
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha