map()とfilter()の比較（備忘録）

TodoAppの作成時に、mapメソッドとfilterメソッドの違いがいまいちピンとこなかったので、 改めて調べなおした備忘録です。

MDNによると、
map( ): 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成
filter( ): 提供された関数によって実装されたテストに合格したすべての要素を含む新しい型付き配列を生成

例：Todoアプリでイベントで発火する関数内でmap(),filter()を使用。

const tasks = 
[
     {
      id: 1,
      title: "買い物",
      completed: false
     },
     {
      id: 2,
      title: "英語の課題",
      completed: false
     },
　   {
      id: 3,
      title: "筋トレ",
      completed:true
     },
]

完了したtaskに、打ち消し線をひく時

同じ数の要素を返すが、要素の中のvalueは変化する（ここでは、completedプロパティのfalseとtrueが入れ替わっている）

toggleCompleted(id) {
      this.tasks = this.tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      );
    },

taskを削除する時

同じ数または、それより少ない数の要素を返す。要素内の変化はなし。

deleteTask(id) {
        this.tasks = this.tasks.filter((task) => task.id !== id);
    },