Javascriptのブロック構文で引っかかった件について

JavaScriptで絞り込み検索機能を実装していたら、全然機能せず、四苦八苦していると超初歩的なミスに気がつきました。。。
今後のミス防止のためにも記録に残しておこうと思います！(ただの自己満笑)

問題です。どちらのコードが動作するでしょうか？

パターン①↓

javascript

const filterWord = filterInputItem.value;
const filterSearch = articleList.filter(
  (article) =>
    article.name.includes(filterWord) || article.person.includes(filterWord)
);

パターン②↓

javascript

const filterWord = filterInputItem.value;
const filterSearch = articleList.filter((article) => {
  article.name.includes(filterWord) || article.person.includes(filterWord);
});

答え

答えはパターン①です！
まあ、こうやって見ると分かりますよね、、、
パターン②の場合だとブロック構文を使用しているのでreturnを入れないとダメですよね！

アロー関数と{}の使い方

{} なしのアロー関数 (暗黙の返り値)

javascript

const add = (a, b) => a + b; // 戻り値は a + b

{} ありのアロー関数 (明示的な返り値)

javascript

const add = (a, b) => {
  return a + b; // return が必要
};

まとめ

{} を使う場合
・return が必要
・複数行書くときに使う。

{} を使わない場合
・return 不要
・一行じゃないとダメ

プログラミングってムズイよね。