(JS) 배열을 합치는 3가지 방법

호두파파·2021년 2월 28일

JavaScript Spread concat js 배열 자바스크립트 전개연산자

호두파파 JS 스터디

목록 보기

17/27

배열을 합치는 3가지 방법

concat() 함수
...spread operator(전개 연산자)
push() 함수와 spread operator

concat()함수

array.concat([value1[, value2[, ...[valueN]]]])

concat()함수는
파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서,
새로운 배열로 만들어서 리턴합니다

파라미터

value1 ~ valueN
기존 배열에 합칠 배열 또는 값

리턴 값

기존 배열(array)와 파라미터로 받은 값(value1~ valueN)을 합쳐서 새로 만든 배열

const newArr = arr.concat('a', ['b', 'c'], 'abc'); 

// arr.concat()에 3개의 파라미터를 전달하여
//3개의 값을 가진 배열 arr와 파라미터를 합쳤습니다.

//concat() 함수는 arr와 전달받은 파라미터들을 합쳐서 
//"새로운 배열"을 생성하여 리턴합니다.

//이 때, 파라미터가 배열인 경우, 배열 안의 원소들을 꺼내여 새로운 배열에 포함시킵니다.

//그래서, 새로운 배열(newArr)의 길이는 6이 아닌 7이 됩니다.

//원본인 arr의 값은 변하지 않습니다.

...spread operator(전개 연산자)

spread operator는 한글로 전개 연산자라도고 한다.
배열과 객체 등 여러 곳에서 사용할 수 있다.

배열에서 spread operator는 배열의 원소드을 분해해서 개별요소로 만들어준다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

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

document.write(newArr.length + '<br>'); // 9
document.write(newArr); /// 1,2,3,4,5,6,7,8,9

spread operator ...는 각 배열의 개별 요소들을 리턴한다.
newArr은 쪼개진 개별 요소들을 인자로 가지는 새로운 배열이다.

push() 함수와 spread operator

spread operator를 사용하면 push() 함수를 이용해서라도 여러 개의 배열을 하나로 합칠 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(arr2);

document.write(arr1.length + '<br>'); // 4
document.write(arr1[0] + '<br>'); // 1 
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // [4, 5, 6]

push() 함수를 사용해 배열을 합치면 파리미터로 전달 된 배열을 하나의 원소로 처리한다.

push()함수를 사용해, 두 여러개의 배열을 합칠때는 concat() 함수를 사용한 것과 같이 파라미터로 전달 된 배열의 원소 각각을 새로운 배열에 넣어서 합치기 위해서는 spread operator(...)를 사용해야 한다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);

document.write(arr1.length + '<br>'); // 6
document.write(arr1[0] + '<br>'); // 1 
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // 4
document.write(arr1[4] + '<br>'); // 5
document.write(arr1[5] + '<br>'); // 6