스프레드 연산자와 findIndex로 깔끔하게 객체 수정하기

오늘은 스프레드 연산자(spread operator)를 사용하면서 겪었던 작은 문제와 이를 해결한 과정을 공유하려고 한다.

문제: db 객체 수정하기

주어진 db 객체 배열에서 handleEdit 함수를 사용해 특정 객체를 찾아 수정해야 한다. 대신 Object.assign 대신 스프레드 연산자를 활용해야 한다.

코드:

const db = [
  {
    id: 7,
    name: "Jay",
    age: 33,
  },
  {
    id: 10,
    name: "James",
    age: 30,
  },
];

function handleEdit(id, editingObj) {
  // id에 해당하는 객체를 찾아 내용을 수정하세요.
  // Object.assign 대신 spread syntax(...)를 사용해야 합니다.
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);

처음 시도한 방법

function handleEdit(id, editingObj) {
  const obj = db.find((elem) => elem.id === id);
  db.id = { ...obj, ...editingObj };
}

처음엔 find로 id가 일치하는 객체를 찾아 obj에 할당하고 스프레드 연산자를 사용해 수정하려고 했다. 하지만 실행 결과는 예상과 달랐다.

db 배열에 이상한 객체가 추가로 생겨버렸다..🥹

해결 과정

튜터님께 질문한 결과, 해결 방법은 간단했다. find로 찾은 객체를 수정한 뒤 스프레드 연산자를 적용하면 된다고 하셨다.

const obj = db.find((elem) => elem.id === id);
obj = { ...editingObj };

하지만, 이렇게 수정해도 해당 객체의 인덱스(index)를 알아야 했다. 그래서 굳이 길게 작성할 필요 없이 findIndex를 사용하면 훨씬 깔끔하게 해결할 수 있었다.

최종 코드:

function handleEdit(id, editingObj) {
  const idx = db.findIndex((elem) => elem.id === id);
  db[idx] = { ...db[idx], ...editingObj };
}

배운 점

결과적으로 findIndex만으로도 문제를 간단히 해결할 수 있었다. find로도 해결이 가능하지만 인덱스가 필요한 상황이라면 findIndex가 더 효율적이라는 걸 깨달았다.

앞으로 공부할 점 📖

1. find와 findIndex의 차이와 활용법 공부하기
2. map을 활용한 해결 방법도 고민해보기(튜터님 추천 방식)