자바스크립트 배열 합치기 3가지 방법: concat, spread, push 완전 정복

 

🔹 배열 합치기란?

배열을 합친다는 것은 두 개 이상의 배열을 하나의 배열로 병합하거나, 하나의 배열에 다른 배열 혹은 값을 덧붙여 새로운 배열을 만드는 과정을 의미합니다. 예를 들어 [1, 2, 3]과 [4, 5, 6]을 합치면 [1, 2, 3, 4, 5, 6]이 되는 것이죠.

이 기능은 반복문 없이 빠르게 여러 데이터를 하나로 묶을 때 유용하며, 함수형 프로그래밍이나 리액트(React) 등에서도 자주 쓰입니다.

---

✅ 방법 1. concat() 함수 사용

가장 전통적이면서도 널리 사용되는 배열 병합 방법입니다.

📌 기본 문법

arr1.concat(arr2);
arr1.concat(val1, val2, [val3, val4], ...);

✅ 사용 예시 1: 배열과 배열을 합칠 때

let a = [1, 3, 5];
let b = [7, 9, 11];
let result = a.concat(b);
console.log(result); // [1, 3, 5, 7, 9, 11]

👉 특징:

• 원본 배열 a는 변하지 않음
• 새로운 배열을 반환

✅ 사용 예시 2: 배열과 여러 값을 동시에 합칠 때

let result = a.concat(7, ["a", "b"], 9);
console.log(result); // [1, 3, 5, 7, "a", "b", 9]

👉 concat()은 배열 안에 배열이 들어오면 내부의 값을 꺼내서 평평하게(flat) 합칩니다. 즉, ["a", "b"]가 배열이지만 그대로 합쳐지지 않고 "a", "b"로 각각 들어갑니다.

---

✅ 방법 2. 전개 연산자(Spread Operator) 사용

ES6(ECMAScript 2015) 이후 등장한 전개 연산자 ...는 배열을 합치는 가장 직관적이고 강력한 방법 중 하나입니다.

📌 기본 문법

let newArray = [...arr1, ...arr2];

✅ 사용 예시 1: 배열 합치기

let a = [1, 3, 5];
let b = [7, 9, 11];
let c = [...a, ...b];
console.log(c); // [1, 3, 5, 7, 9, 11]

✅ 사용 예시 2: 배열 + 값 병합

let d = [...a, "a", "b"];
console.log(d); // [1, 3, 5, "a", "b"]

👉 특징:

• 배열 내부 요소를 하나씩 꺼내서 넣음
• 매우 유연하게 다양한 형태의 병합 가능
• React의 state 관리 시 가장 많이 사용되는 방식 중 하나

💡 팁: 다차원 배열 합치기 시엔 .flat()과 함께 사용 가능

let a = [1, 2];
let b = [[3, 4]];
let c = [...a, ...b].flat();
console.log(c); // [1, 2, 3, 4]

---

✅ 방법 3. push() 함수와 전개 연산자 결합

배열을 합치는 것처럼 보이지만, 원본 배열을 **변형(mutate)**시킵니다. 따라서 불변성(Immutability)을 유지해야 하는 상황에서는 사용에 주의해야 합니다.

📌 기본 문법

arr1.push(...arr2);

✅ 사용 예시 1: 배열에 값 하나 추가

let f = [1, 3, 5];
f.push(7);
console.log(f); // [1, 3, 5, 7]

✅ 사용 예시 2: 배열을 배열로 추가

let f = [1, 3, 5];
let g = [7, 9, 11];
f.push(g);
console.log(f); // [1, 3, 5, [7, 9, 11]]

👉 push()에 배열을 넣으면, 배열 전체가 하나의 요소로 추가됩니다. 우리가 원하는 것은 요소 하나하나가 들어가는 것이라면 전개 연산자를 같이 써야 합니다.

✅ 전개 연산자와 함께 사용

f = [1, 3, 5];
g = [7, 9, 11];
f.push(...g);
console.log(f); // [1, 3, 5, 7, 9, 11]

---

💡 각각의 방법 비교 정리

방식 원본 변경 반환값 중첩 배열 해제 주요 특징

concat()	❌	새 배열	✅	가장 전통적, 불변성 유지
spread	❌	새 배열	✅	가장 유연함, 가독성 우수
push()	✅	변경된 배열	❌ (전개 필요)	원본 배열 직접 수정, 전개로 해결 가능

---

✅ 정리하며: 언제 어떤 방식 써야 할까?

✔️ 불변성을 지켜야 하는 상황 (React 등)
👉 concat() 혹은 spread

✔️ 단순히 배열에 데이터를 붙이고자 할 때
👉 push() (단, 전개 연산자를 써야 원하는 결과 가능)

✔️ 가독성과 직관성 중시할 때
👉 spread 방식 강력 추천

---

📎 추가 예시: 함수형 프로그래밍 활용

const mergeArrays = (...arrays) => [].concat(...arrays);

console.log(mergeArrays([1], [2, 3], [4])); // [1, 2, 3, 4]

또는

const mergeArrays = (...arrays) => arrays.flat();

console.log(mergeArrays([1], [2, 3], [4])); // [1, 2, 3, 4]

---

마무리하며

자바스크립트에서 배열을 합치는 방식은 상황에 따라 다르게 사용될 수 있습니다. 오늘 알아본 concat(), spread, push() 세 가지 방법은 각각의 특징이 뚜렷하므로, 사용하는 문맥에 따라 적절히 선택해야 합니다.

특히 최신 문법에서는 가독성과 유지보수 측면에서 spread 방식이 점점 더 선호되고 있으니, 적극적으로 활용해보시길 추천드립니다.

여러분도 직접 콘솔에서 테스트해보며 각각의 차이를 경험해보세요!
그럼 다음 시간엔 또 다른 자바스크립트 꿀팁으로 찾아뵙겠습니다 😊