[86] toggleCompletedById / 배열안 객체 요소값 하나 변경 (객체배열)

 

문제

 

todos 배열과 todos 배열의 특정 요소의 id를 인수로 전달하면 해당 요소의 completed 프로퍼티 값을 반전한 todos 배열을 반환한다.

• todos 배열 요소의 id 프로퍼티 값은 절대 중복되지 않는다.
• for 문, for…in 문, for…of 문, Array#forEach, Array#splice는 사용하지 않는다.
• todos 배열을 변경하지 않는다.

const toggleCompletedById = (todos, id) => { /* Do something */ };

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];

console.log(toggleCompletedById(todos, 2));
/*
[
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: false },
  { id: 1, content: 'Javascript', completed: false }
]
*/

 

 

 

---

풀이

1번풀이 - map

배열안 조건에 맞는 객체 요소 값 변경.

객체의 일부만 값(프로퍼티) 변경. 

 

 => 객체를 덮어쓴다.

{...todo, completed: !todo.completed}

뒤의 completed 코드가 앞 completed 코드를 덮어씀. 재할당 됨. 

 

1. todo의 id가 인수로 전달 받은 매개변수 id와 같으면  

2. ...todo 새로운 객체를 만들어 복사하고   ( { ..todo } 객체 얕은복사 코드 )

3.  completed 값을 반전 시켜서 리턴하고 아니면 현재 값을 그대로 리턴.

 

 

const toggleCompletedById = (todos86, id86) => { 
  return todos86.map(todo =>
    (todo.id === id86 ? { ...todo, completed: !todo.completed } : todo));
};

const todos86 = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];

//print
console.log(toggleCompletedById(todos86, 2));

[
  { id: 3, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
]

 

 

 

2번풀이 - 배열안 객체 요소값 변경. for문

 

// for문 풀이
const toggleCompletedById = (todos, id) => { 
  let result = [];
  for (let i = 0; i < todos.length; i++) {
   const newArray = todos[i].id === id ? { ...todos[i], completed: !todos[i].completed } : todos[i];
    result.push(newArray);
  }
  return result;
 };

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];

console.log(toggleCompletedById(todos, 2));
/*
[
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: false },
  { id: 1, content: 'Javascript', completed: false }
]
*/