JavaScript よくあるTodoアプリのfilterメソッドを用いた削除について

Todoアプリでのタスク削除について（JavaScript）

JavaScriptのfilterメソッドの仕組みがよくわかっていなかったのでメモ。

JavaScriptのみならず、プログラミング言語の学習の際はTodoアプリを作りながら学ぶチュートリアルなどが数多くあるかと思います。

その中で、下記のようなコードがあります。

index.js

const todos = [
  { id: 1, content: '買い物に行く' },
  { id: 2, content: '歯医者の予約をする' }
];


todos.filter(todo => {
  console.log(todo.id !== 1)
  return todo.id !== 1
})

「1」とある部分は、実際にはクリックイベントなどによって取得されるidです。
※Reactで、
<Button onClick={() => {deleteTodo(id)}}>タスク削除</Button>
で取得したidを「１」と仮定します。

この結果は下記の通り、id:2のタスクのみがリターンされます。

=> [ { id: 2, content: '歯医者の予約をする' } ]

理解するととてもあたりまえのことですが、当初なぜtodosタスクのidと、選択したidが！＝＝だとfilterメソッドで取り除かれてしまうのかわかりませんでした。

ニュアンス的？にタスク内のidと、選択したidが同じ===の関係であれば取り除かれるような気がしていました。

MDNによると

filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

この関数が true を返した要素は残され、false を返した要素は取り除かれます。

つまりfalseを返された要素は配列から取り除かれてしまうんですね。

！==でtrueをfalseに変更する。
それによって配列から要素を取り除く。

index.js

const todos = [
  { id: 1, content: '買い物に行く' },
  { id: 2, content: '歯医者の予約をする' }
];

todos.filter(todo => {
  console.log(todo.id !== 1) // falseなので取り除かれる
  return todo.id !== 1
})

// => [ { id: 2, content: '歯医者の予約をする' } ]はtrueなので残る

コードはこちら

---

まとめ

今まで何となくメソッド名を覚えて使っていましたが、そのメソッドがどのような返り値を持っているか等を意識して練習すると、応用できそうだと感じました。

なので、しっかりとリファレンスを読みましょうw