[JS - 개념]  여러 배열 합치는 방법

 

 

 

1. concat()

 

Array.prototype.concat()

 

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 

 

 - 기존 배열을 변경하지 않는다.

 - 추가된 새로운 배열을 반환한다. 

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

//이렇게 아무것도 입력하지 않을시 기존배열의 얕은 복사본을 반환한다. 
const array4 = array1.concat()

console.log(array4)
// ['a', 'b', 'c']


//파라미터가 배열인 경우, 배열 안의 원소들을 꺼내여 새로운 배열에 포함시킨다.
const arr = [1,2,3];
const newArr = arr.concat('k', array1, [11,12],'b')

//[1, 2, 3, 'k', 'a','b', 'c', 11, 12, 'b']

 

중요한것은  아무것도 입력하지 않을 시 얕은 복사가 되는데 이 배열을 변경해도 원본에 영향을 주지 않는다. 

 

const array1 = ['a', 'b', 'c'];
const array4 = array1.concat()
array4[0] = "k"
console.log(array4) // [ 'k', 'b', 'c' ]
console.log(array1) // [ 'a', 'b', 'c' ]

 

 

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

 

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

 

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const newArray = [
  ...array1,
  ...array2,
  ...array3
];
console.log(newArray)
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

여기서 또 중요한점은  전개 연산자를 사용하면 앝은 복사를 하는데 복사한 배열을 수정할시 원본이 변형되지 않는다

 

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const newArray = [ ...array1];

newArray[0] = 100;
console.log(newArray) // [ 100, 2, 3 ]
console.log(array1)  // [ 1, 2, 3 ]

 

 

3. push()

 

기존에 있던 배열에 추가하는 식으로 합칠 수도 있고 새로운 배열에 전부 모아 합칠 수도 있다. 

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const newArray = [ ];

newArray.push(...array1)
newArray.push(...array2)
newArray.push(...array3)

console.log(newArray)
//[1, 2, 3, 4, 5, 6, 7, 8, 9]


//전개연산자를 사용하지 않으면 배열안에 배열이 된다. 
const array4 = [1,2,3];

const newArray2 = [];

newArray2.push(array4); //[ [ 1, 2, 3 ] ]

 

 

 

참고 : https://hianna.tistory.com/397