[87]toggleCompletedAll / 배열안 객체 요소 키의 모든 값 변경 (객체배열)

문제

 

todos 배열의 모든 요소의 completed 프로퍼티 값을 true로 설정해 todos 배열을 반환한다.

• for 문, for…in 문, for…of 문, Array#forEach는 사용하지 않는다.
• todos 배열을 변경하지 않는다.

 

const toggleCompletedAll = todos => { /* Do something */ };

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

 

 

---

풀이

1번풀이

배열안에 객체 요소 키의 모든 값 변경.

 

원본배열

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

 

 

[ todos87 ]

배열의 첫번째 요소에 배열을 넣음.

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

 

 

[ ...todos87 ]  스프레드 문법 ( ... )

안쪽 대괄호를 없애 대괄호로 묶여져 있던 객체들의 집합을 해방시킴.  => 얕은 복사.  배열안 객체를 복사

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

 

즉,

[ ...todos87 ]  코드는

이렇게 만듬.

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

 

 

 

 

map 자체가 새로운 배열을 반환해서 [...todos87] 로 배열을 복사하지 않아도 됨!!

 

1. map으로 todos87 배열을 순회하고

2. completed가 false인 객체를 모두 true로 변경한다.

 

// return 처럼 { }  중괄호 안에 인자로 들어간 배열 전체와, 특정 객체를 같이 써야 배열전체가 리턴된다.

리턴에 특정 객체만 쓰면 배열에 특정객체만 담겨 반환된다.

 

 

// [87]
const toggleCompletedAll = todos87 => todos87.map(todo => {
     return { ...todo, completed: true} 
 });
 
 
 //print
 console.log("87>: ", toggleCompletedAll(todos87));
 87>:  [
  { id: 3, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: true }
]
 
 
---------------
 const toggleCompletedAll = todos87 => [...todos87].map(todo => {
     return {completed: true} // 특정 객체만 쓰면 특정 객체만 배열로 출력됨.
 });
 
 //print
 console.log("87>: ", toggleCompletedAll(todos87));
 87>: [ { completed: true }, { completed: true }, { completed: true } ]

 

 

2번풀이 - for문

// for문 풀이
const toggleCompletedAll = todos => { 
  let result = [];
  for (let i = 0; i < todos.length; i++) {
    const newCompleted = { ...todos[i], completed: true };
    result.push(newCompleted)
  }
  return result;
 };


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

 

 

 

 

 

 

 

 

 

참고

블로그 -객체 배열 요소 변경

  https://streamls.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Map%EC%82%AC%EC%9A%A9%EB%B2%95-%EA%B0%9D%EC%B2%B4-%EB%B0%B0%EC%97%B4object-array-%EC%9A%94%EC%86%8C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0