Tag: 배열병합

자바스크립트, 편리한 배열 병합 방법(Merge Arrays in Javascript)

자바스크립트의 배열 병합 방법(concat(), …spread, push())

자바스크립트를 사용해 데이터를 다루는 일이 점점 더 많아지고, 배열을 사용하는 관련 작업을 많이 하게 됩니다.

그 중에서도 병합과 관련된 부분에 대해 알아보도록 하겠습니다.


배열은 인덱스(Index)를 갖는 요소를 순서대로 나타낸 데이터 구조입니다.

하나의 배열이라면 인덱스 또는 메소드(unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf() 등)를 사용해 배열 내부의 데이터를 쉽게 다룰 수 있죠.

배열의 병합(Merge) 또한 마찬가지입니다.

concat(), push(), 스프레드 연산자(…spread), 등 배열의 병합을 위한 여러 방법이 존재합니다.

하나씩 확인해 보겠습니다.

1. 배열 병합의 3가지 방법

concat

concatenate(연결시키다, 사슬같이 잇다)의 약자인 concat()은 말 그대로 두 배열을 연결하는 역할을 합니다.

크게 다음과 같은 방식으로 사용하며, 샘플 코드를 통해 조금 더 상세한 부분을 확인하겠습니다.

  • [array1].concat([array2]…..)
  • [].concat([array1], [array2]……)
const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

위와 같이 concat은 하나 이상의 배열을 합쳐 하나의 배열로 만듭니다.

배열 내부 데이터 타입에 상관없이 병합이 가능하며, 중첩된 배열의 병합도 가능합니다.

…spread 스프레드 연산자

ES6에서 추가된 문법인 스프레드 연산자는 배열이나 객체를 빠르고 안전하게 복사할 수 있습니다.

깊은 복사(Deep copy) 방식으로 복사를 진행해 기존의 배열 데이터와는 다른 메모리 주소를 사용하므로 배열 병합 방법 중에서는 가장 좋은 방식이라고 볼 수 있습니다.

const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

스프레드 연산자는 다음과 같이 비구조화 할당에서도 자주 사용됩니다.

const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']
push

push() 메소드는 배열 끝에 데이터를 추가할 때 자주 사용하는 메소드입니다.

push() 메소드와 스프레드 연산자를 같이 사용하면 배열 병합이 가능하지만 기존 배열에 데이터를 추가하는 방식이므로 기존 배열이 변경되는 부분을 주의해야 합니다. 

const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

2. 마무리

배열을 병합하는 여러 가지 방법 중 concat(), …spread, push() 세 가지를 소개하였습니다.

각 상황에 따라 필요한 방법이 다르니 필요에 따라 맞는 것을 골라 사용하면 좋을 것 같습니다.

감사합니다!