JavaScript 배열에 항목 추가하기: push() vs concat() 완벽 정리

JavaScript로 배열에 항목을 추가하는 대표적인 두 가지 방법을 예제 코드와 함께 알아보세요.

배열에 항목을 추가하려면 상황에 따라 JavaScript의 push() 메서드 또는 concat() 메서드를 사용할 수 있습니다. 두 메서드 모두 JavaScript Array 객체가 기본으로 제공합니다.

이 글에서는 두 메서드를 각각 언제, 어떻게 사용해야 하는지 실제 예제를 통해 살펴보겠습니다.

배열에 항목 하나 추가하기

기존 채소 목록(배열)에 채소를 하나 추가해 보겠습니다:

const vegetables = ["broccoli", "onion", "spinach"]
vegetables.push("carrot")

이제 결과를 출력해 보겠습니다:

console.log(vegetables)
// ["broccoli", "onion", "spinach", "carrot"]

참고: push()를 사용하면 vegetables 배열 자체가 변경됩니다.

여러 항목을 한 번에 추가할 때도 push()를 사용할 수 있습니다. 쉼표로 구분된 여러 인수를 전달하면 됩니다:

const vegetables = ["broccoli", "onion", "spinach"]
vegetables.push("carrot", "green beans", "kale")

참고: 이 경우에도 vegetables 배열 자체가 변경됩니다.

앞서 언급했듯이 push() 메서드는 원본 배열을 직접 수정(mutate)합니다. 만약 원본 배열은 그대로 둔 채, 이를 기반으로 한 새로운 배열을 만들고 거기에 항목을 추가하고 싶다면 concat() 메서드를 사용하세요:

const vegetables = ["broccoli", "onion", "spinach"]
const newVegetables = vegetables.concat("carrot")

두 변수를 각각 출력해 보겠습니다:

console.log(vegetables)
// ["broccoli", "onion", "spinach"]
console.log(newVegetables)
// ["broccoli", "onion", "spinach", "carrot"]

실행 결과를 보면 원본 vegetables 배열은 그대로 유지되고, newVegetables에는 vegetables 배열의 복사본에 concat()으로 추가한 carrot이 포함된 것을 확인할 수 있습니다.

concat()도 여러 항목을 다룰 때 동일하게 작동합니다. 앞서 push() 예제에서처럼 쉼표로 구분해서 전달하면 됩니다:

const vegetables = ["broccoli", "onion", "spinach"]
const newVegetables = vegetables.concat("carrot", "green beans", "kale")

최신 JavaScript(ES6 이상)에서는 스프레드 연산자(...)를 사용해 불변성(immutability)을 지키면서 항목을 추가할 수도 있습니다:

const vegetables = ["broccoli", "onion", "spinach"]
const newVegetables = [...vegetables, "carrot"]

concat()과 마찬가지로 원본 배열은 변경되지 않으며, React 등 상태 불변성이 중요한 환경에서 특히 유용하게 쓰입니다.

두 배열 메서드를 혼동하지 않는 것이 중요합니다. 마지막으로 핵심 차이를 다시 정리해 드립니다: