자바스크립트 - 배열 합치고 싶을때..!!(concat, push, Spread)

자바스크립트에서 배열 합치는 매서드 사용 방법

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'
]

 

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' ] ]

사용목적: 연산 처리도 중 완료될때마다 처리하고 싶을 때 유용하게 쓸 수 있을듯 싶다

 

for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i].sort();
    answer.push(...arr[i]);
  }

이런식으로 쓸 수 있을듯..

 

출처: JavaScript - 배열 합치기 (concat, spread, push) (codechacha.com)