자바스크립트에서 기존 배열에 값을 추가하는 방법을 정리합니다.

1. Array Literal (배열 리터럴)

배열을 생성하거나 재할당할 때 사용되는 기본 문법입니다.
요소를 추가할 때, 정확히는 요소 추가가 아닌 '재할당'입니다.

배열 재할당 시 기존 배열은 무시되고, 새로운 메모리 공간이 할당되어 재할당된 값이 저장됩니다.
즉, 완전히 다른 값이 됩니다.

고정된 데이터만 정의 가능하므로 하드 코딩할 수 있는 상황에만 사용합니다.
간단하지만 프로젝트에서 사용 시 오류 발생을 일으킬 수 있어 사용하지 않는 방법입니다.

let arr = [1, 2, 3]
arr = [1, 2, 3, 4, 5]

console.log(arr) // [1, 2, 3, 4, 5]

2. Spread (스프레드 연산자)

기존의 배열의 요소들을 펼치거나, 병합하는 데에 사용되는 문법입니다.

spread 문법 자체는 기존 배열을 복사한다는 개념입니다.
요소들을 펼친 후(spread) 복사하기 때문에 원본 배열을 변경하지 않으면서 새로운 배열을 만들 수 있습니다.
이를 통해 다른 배열이나 값과 쉽게 병합할 수 있으며, 불변성을 유지하면서 동적 배열 작업이 가능합니다.

단, 대규모 배열을 다룰 때 오버헤드로 인한 메모리 사용률이 증가합니다.

let arr = [1, 2, 3]
let newArr = [...arr, 4, 5] // 기존 arr를 펼친 후 (복사) 새 요소(4, 5)와 병합

console.log(newArr) // [1, 2, 3] => 기존 배열은 유지
console.log(newArr) // [1, 2, 3, 4, 5] => 병합된 새로운 배열 생성

// 또는 
let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let newArr = [...arr1, ...arr2] // arr1 요소들과 arr2 요소들을 펼쳐서(spread) 병합

console.log(arr1) // [1, 2, 3] => 기존 배열은 유지
console.log(arr2) // [4, 5] => 기존 배열은 유지
console.log(newArr) // [1, 2, 3, 4, 5] => 병합된 새로운 배열 생성

3. Array.push()

Array 객체의 메서드인 push()를 이용하면 기본 배열의 끝에 요소를 추가할 수 있습니다.
원본 배열을 변경하며, 배열 병합 작업에는 사용하지 않습니다.

원본 배열을 바로 수정하므로 메모리 효율적이지만, 불변성을 요구하는 환경에선 적합하지 않습니다.

원시 값 및 참조 값을 추가할 수 있고, 한 번에 여러 개를 추가할 수 있습니다.
함수 호출 후 값이 추가된 후의 배열의 길이를 반환합니다.

let arr = [1, 2, 3]
arr.push(4, 5) // return: 5

console.log(arr) // [1, 2, 3, 4, 5]

만약 다음과 같이 배열[] 값을 추가하게 된다면 , 배열 자체를 삽입하게 되므로 주의해야 합니다.

let arr = [1, 2, 3]
arr.push([4, 5]) // return: 5

console.log(arr) // [1, 2, 3, [4, 5]]

4. Array.concat()

Array 객체의 메서드인 concat()을 사용하면 배열이나 값을 병합할 수 있습니다.
원본 배열을 변경하지 않기 때문에 불변성을 요구하는 환경에서 적합합니다.

원시 값 및 참조 값을 병합할 수 있고, 한 번에 여러 개를 추가할 수 있습니다.
리턴 값은 값이 추가된 후의 배열입니다.

특이한 점은, 인자 값으로 원시 값을 넣든 참조 값을 넣든 배열 요소로 삽입됩니다.

새로운 배열을 생성하므로 메모리 사용이 늘어날 수 있고, 대규모 데이터에서 성능 저하 가능성이 있습니다.

// 첫 번째 방법
let arr = [1, 2, 3]
arr = arr.concat(4, 5) // return: [1, 2, 3, 4, 5]

console.log(arr) // [1, 2, 3, 4, 5]

// 두 번째 방법
let arr = [1, 2, 3]
arr = arr.concat([4, 5]) // return: [1, 2, 3, 4, 5]

console.log(arr) // [1, 2, 3, 4, 5]

// 이렇게도 가능
let arr = [1, 2, 3]
arr = arr.concat([4, 5], [6, 7])

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

4-1. concat()의 활용

concat() 메서드는 요소를 추가할 수도 있지만 일반적으로 배열 두 개를 병합할 때 주로 사용됩니다.
spread 문법과 함께 쓰일 수 있습니다.

let arr1 = [1, 2, 3]
let arr2 = [4, 5]

let newArray = arr1.concat(arr2)
console.log(newArray) // [1, 2, 3, 4, 5]


let arr1 = [1, 2, 3]
let newArray = [...arr1.concat([4, 5])] // spread 문법 사용

console.log(newArray) // [1, 2, 3, 4, 5]

arr1에 arr2를 병합한 newArray가 생성된 것을 확인할 수 있습니다.

5. 각 방법 비교

각 기법을 정리하면 다음과 같습니다.

구분	literal	spread	push()	concat()
동작 방식	새 배열 생성	새 배열 생성	기존 배열에 요소 추가	새 배열 생성
원본 배열 변경	X	X	O	X
동적 확장성	X	O	O	O
성능	비교적 효율적	메모리 사용 증가 가능	효율적	메모리 사용 증가 가능
불변성 유지	X	O	X	O
사용 목적	초기화/재정의	복사 및 병합	동적 데이터 추가	병합 및 불변 데이터 유지

6. 사용 예시

리터럴

고정적인 값을 사용해야 하며, 하드코딩에 적합한 상황에 사용하면 됩니다.
배열을 새로운 값으로 초기화 가능하지만, 배열 값을 동적으로 수정할 수 없으므로 사용되지는 않습니다.

예시: 사용자 선호 카테고리 변경

// 초기 사용자 선호 카테고리
let userPreferences = ["Electronics", "Books", "Clothing"];

// 사용자가 선호 카테고리를 변경했을 때
userPreferences = ["Sports", "Music", "Art"]; // 새 배열로 재할당

console.log(userPreferences); // ["Sports", "Music", "Art"]

스프레드

기존 배열의 값을 단순히 복사만 하고, 새로운 값을 추가 또는 배열을 병합하여 새 배열을 만들어낼 때 사용하면 됩니다.

예시) 쇼핑몰에서 장바구니에 아이템 추가하는 상황

let cart = [{ id: 1, name: "Laptop", price: 1200 }];
let newItem = { id: 2, name: "Mouse", price: 25 };

// 장바구니 업데이트 (불변성 유지)
cart = [...cart, newItem];
console.log(cart); // [{ id: 1, name: "Laptop", price: 1200 }, { id: 2, name: "Mouse", price: 25 }]

// React의 상태 관리
const [wishlist, setWishlist] = useState([]);
const addToWishlist = (item) => {
  setWishlist((prevWishlist) => [...prevWishlist, item]);
};

push()

기존 배열의 상태를 바꾸면서, 데이터를 동적으로 추가할 때 사용하면 됩니다.

예시) 채팅 메시지나 사용자 활동 기록

// 예: 채팅 애플리케이션에서 메시지 추가
let messages = [
  { user: "Alice", text: "Hi there!" },
  { user: "Bob", text: "Hello!" },
];

// 새로운 메시지 추가
messages.push({ user: "Alice", text: "How are you?" });
console.log(messages);

/*
결과:
[
  { user: "Alice", text: "Hi there!" },
  { user: "Bob", text: "Hello!" },
  { user: "Alice", text: "How are you?" }
]
*/

concat()

원본 배열 유지하며 새로운 배열 병합할 때 사용합니다

// 예: 무한 스크롤을 위한 데이터 병합
let currentProducts = [
  { id: 1, name: "Laptop" },
  { id: 2, name: "Phone" },
];

// 새로운 페이지 데이터 가져오기
let newProducts = [
  { id: 3, name: "Tablet" },
  { id: 4, name: "Monitor" },
];

// 새로운 데이터 병합
let updatedProducts = currentProducts.concat(newProducts);
console.log(updatedProducts);

/*
결과:
[
  { id: 1, name: "Laptop" },
  { id: 2, name: "Phone" },
  { id: 3, name: "Tablet" },
  { id: 4, name: "Monitor" }
]
*/

// 상태 관리에서 사용 예
const [products, setProducts] = useState([]);
const loadMoreProducts = (newData) => {
  setProducts((prev) => prev.concat(newData));
};