JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경

 

 

 

JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경하는 방법은 여러 가지가 있습니다. 상황에 따라 아래 방법 중 하나를 선택하면 됩니다.

---

1. map 메서드 사용 (추천)

배열을 반복하며 특정 조건일 때만 값을 변경합니다.

const fruits = ["apple", "banana", "orange"];
const updatedFruits = fruits.map(fruit => fruit === "banana" ? "grape" : fruit);

console.log(updatedFruits); // ["apple", "grape", "orange"]

 

설명

• map은 새 배열을 반환하며 기존 배열은 변경하지 않습니다.
• 특정 값만 조건(fruit === "banana")으로 교체할 수 있습니다.
• 불변성을 유지하므로 React나 Next.js 프로젝트에 적합합니다.

---

2. indexOf + 직접 대입 (단순한 경우)

배열에 해당 값이 한 번만 존재할 때 간단하게 사용합니다.

const fruits = ["apple", "banana", "orange"];
const index = fruits.indexOf("banana");

if (index !== -1) fruits[index] = "grape";

console.log(fruits); // ["apple", "grape", "orange"]

 

설명

• 기존 배열을 직접 변경합니다. (주의: 원본 배열이 변합니다.)
• 단일 값 교체 시 간단하지만 다수의 값 교체 시 비효율적입니다.

---

3. findIndex + 직접 대입 (객체 배열에 유용)

객체 배열에서 특정 객체를 찾고 수정할 때 사용합니다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

const index = users.findIndex(user => user.id === 2);
if (index !== -1) users[index] = { ...users[index], name: "Charlie" };

console.log(users);
// [{ id: 1, name: "Alice" }, { id: 2, name: "Charlie" }]

 

설명

• findIndex는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.
• 객체 배열 수정 시 유용합니다.

---

4. filter + map 조합 (다수 조건 처리)

여러 값을 동시에 변경할 때 유용합니다.

const numbers = [1, 2, 3, 2, 4];
const updatedNumbers = numbers.map(num => num === 2 ? 99 : num);

console.log(updatedNumbers); // [1, 99, 3, 99, 4]

 

설명

• 모든 일치 항목을 한 번에 변경할 수 있습니다.
• 기존 배열은 유지하며 새 배열 반환.

---

5. 객체 배열에서 다중 조건 처리 (고급)

const products = [
  { id: 1, name: "Laptop", price: 1000 },
  { id: 2, name: "Phone", price: 500 },
  { id: 3, name: "Tablet", price: 700 },
];

// 특정 ID의 가격만 변경
const updatedProducts = products.map(product =>
  product.id === 2 ? { ...product, price: 450 } : product
);

console.log(updatedProducts);
/*
[
  { id: 1, name: "Laptop", price: 1000 },
  { id: 2, name: "Phone", price: 450 },
  { id: 3, name: "Tablet", price: 700 }
]
*/

 

설명

• 스프레드 연산자(...)로 기존 객체 속성을 유지하면서 특정 값만 변경합니다.
• 불변성을 유지하므로 React 상태 관리에 적합합니다.

---

정리

방법	특징	사용 추천 시기
map	새 배열 반환, 불변성 유지	React, Next.js 프로젝트
indexOf	기존 배열 직접 변경, 간단	빠른 단일 값 교체 시
findIndex	객체 배열에서 조건 검색 및 교체	객체 배열에서 특정 요소 찾을 때
filter+map	조건별 다수 값 변경 가능	복잡한 조건 처리 시
스프레드(...)	객체 속성 유지하며 안전하게 변경	상태 관리 및 안전한 교체 시

---

Next.js & React 사용 시
map + 스프레드(...) 조합을 사용하는 것이 불변성 유지와 렌더링 최적화에 유리합니다.

 

 

 

 

 

 

 

#배열 #배열값수정 #javascript #조금씩배워가는프로그래밍