merge Arrays 3가지 방법

spread operator (...)

• ... : spread operator(스프레드 연산자)라고 불리며, 특정 배열 혹은 객체 값을 복제

// arr 배열을 newArr에 복제
let arr = [ 1, 2, 3 ];
let newArr = [...arr];
console.log(newArr); // [ 1, 2, 3 ]

// obj 객체를 newObj에 복제
let obj = { a:1, b:2, c:3 };
let newObj = {...obj};
console.log(newObj); // { a:1, b:2, c:3 }

1. Immutable(원본 보존) 방법

1.1 spread operator 활용

• 새로운 변수를 선언한 뒤, spread operator (...) 을 이용해 merge 하려는 배열들 할당

let arr1 = [ 'Hi', 'Hello' ];
let arr2 = [ 'Tae', 'Ro' ];

let newArr = [ ...arr1, ...arr2 ];
console.log(newArr); // [ 'Hi', 'Hello', 'Tae', 'Ro' ]

1.2 concat () method

• concat() 사용

let arr1 = [ 'Hi', 'Hello' ];
let arr2 = [ 'Tae', 'Ro' ];

let newArr1 = arr1.concat(arr2);
let newArr2 = [].concat(arr1, arr2);

console.log(newArr1); // [ 'Hi', 'Hello', 'Tae', 'Ro' ]
console.log(newArr2); // [ 'Hi', 'Hello', 'Tae', 'Ro' ]

2. mutable(원본 변화) 방법

2.1 spread operator + push() 활용

• 1.1 방법과 유사하지만 여기서는 기존 배열에 push()를 이용해 원본을 변형시킴

let arr1 = [ 'Hi', 'Hello' ];
let arr2 = [ 'Tae', 'Ro' ];

arr1.push(...arr2);

console.log(arr1); // [ 'Hi', 'Hello', 'Tae', 'Ro' ]
console.log(arr2); // ['Tae', 'Ro' ]