[JS] 배열 합치기 (concat, spread operator, push)

1. concat으로 배열 합치기

concat() 메서드는 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환합니다.

원본 배열은 변하지 않으며 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않습니다.

const alphabet = ['a', 'b', 'c'];
const hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];

alphabet.concat(hangeul);      // ['a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ']

아래의 코드를 살펴봅시다.

둘은 매우 비슷해보이지만 다른 결과를 반환합니다. 두번째의 경우는 배열을 3개로 인식했기 때문에 [2, 3]을 감싸는 대괄호가 사라졌습니다.

이런식으로 배열을 변수에 지정해서 인자로 넘겨줄 수도 있고, 바로 인자에서 배열을 작성해줄 수 있습니다.

const alpha = ['a', 'b', 'c'];

// 배열 2개 이어붙이기 
const arr = [1, [2, 3]];     
alpha.concat(arr);             // ['a', 'b', 'c', 1, [ 2, 3 ]]

// 배열 3개 이어붙이기 
alpha.concat(1, [2, 3]);       // ['a', 'b', 'c', 1, 2, 3]

중복된 숫자나 글자를 가진 배열을 합친다면 어떤 결과가 나올까요? 중복된 결과가 사라질까요?

const numbers = [1, 2, 3];
const numbers2 = [3, 4, 5];

numbers.concat(numbers2);      // [1, 2, 3, 3, 4, 5]

결과를 보면 그렇지 않다는 걸 알 수 있습니다. 요소의 중복과 상관없이 concat()은 배열을 합쳐줍니다.

응용 문제 하나 풀어봅시다.

num 배열안의 요소들을 concat()을 이용해서 하나의 배열로 합쳐지게 해주세요.

const num = [[11, 12, 13], [14, 15, 16], [17, 18, 19]];

//답
const num = [[11, 12, 13], [14, 15, 16], [17, 18, 19]];

function makeNewArr() {
  const numNew = num[0].concat(num[1]).concat(num[2]);

	return numNew;

}
makeNewArr(); // [11, 12, 13, 14, 15, 16, 17, 18, 19]

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

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); // ['a', 'b', 'c', '1', '2', '3', 'A', 'B', 'C']

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

3-1. push() 함수와 spread operator(...)로 배열 합치기

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); // ['a', 'b', 'c', '1', '2', '3', 'A', 'B', 'C']

3-2. 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); // [ [ 'a', 'b', 'c' ], [ '1', '2', '3' ], [ 'A', 'B', 'C' ] ]