[Javascript] 배열 연결하기 [concat() 와 push(...arr)]

1)arr.concat() 함수

인자로 받은 배열 데이터와 객체 배열 데이터를 합쳐서 새로운 배열 데이터를 반환함.

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

document.writeln(newArr); // [1, 2, 3, 'a', 'b','c', 'abc']
document.writeln(newArr.length); // 7

 

2)arr1.push(...arr2)

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

 

(1)arr1.push()

push() 함수는 배열 데이터의 마지막 item으로 추가하는 것으로, 파라미터로 전달된 배열은 연결이 되지 않고 하나의 item으로 추가된다.

let a = [1,2,3]
let b = [4,5,6]

a.push(b)
console.log(a) // [1,2,3,[4,5,6]]
console.log(a.length) // 배열 크기 4

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

배열 및 객체 등에서 사용할 수 있음. 배열의 경우 배열의 요소들을 개별적으로 반환한다.

let b = [4,5,6]
console.log(...b) //4 5 6

아래와 같이 쪼개진 개별 요소들을 인자로 새로운 배열을 가질 수 있음.

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

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

document.write(newArr); // [1,2,3,4,5,6,7,8,9]
document.write(newArr.length); // 9

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

spread operator를 사용함으로써 배열 데이터를 개별 원소로 나누고 arr1. push(4, 5, 6) 와 같은 효과를 가질 수 있게 됨.

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

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

 

3)참고 URL

 

[Javascript] 배열 합치기 3가지 방법