filter と find で絞り込む

解説

このレッスンで分かること

• filter は条件に合う要素だけを集めた新しい配列を返します
• find は最初の 1 件そのものを返し、見つからなければ undefined になります

絞り込むたびに、空の配列と for 文を書いている

入門では、条件に合う作品を取り出すのに空の配列を用意し、for-of でまわし、条件に合わないものを飛ばし、残りを push していました。条件が「公開ずみ」「新しい年だけ」「タグ別」と増えるたびに、同じ形の関数が 1 本ずつ増えていきます。

減らす担当は filter です。渡した関数が true を返した要素だけが、新しい配列に残ります。

条件を重ねたいときは、そのまま論理演算子でつなぎます。filter を 2 回に分けても結果は同じですが、関係のある条件なら 1 つにまとめたほうが読めます。

戻り値は必ず配列です。1 件も合わなくても null にはならず、長さ 0 の配列が返ります。この性質のおかげで、そのあとに別のメソッドをつないでも落ちません。

解説

0 件かどうかを知りたいときは length を見ます。結果そのものを真偽値として見ると、空配列は truthy なので必ず true になり、判定が効きません。

見つからなかった 1 件で落ちる

一覧から特定の 1 件を取り出したいなら find です。条件に合った最初の要素を、配列ではなくその要素そのものとして返します。

問題は見つからなかったときです。find は undefined を返すので、そのまま .year と書くと TypeError で止まります。手元のテストデータでは必ず見つかるので気付かず、本番のデータで初めて落ちます。

受け取ってから確かめる。この 2 行の形を体に入れてください。find を書いたら次の行は必ず存在確認、と決めておくと事故が消えます。

何件ほしいのかで選ぶ

存在の有無だけを知りたいのに find を使うと、受け取った要素を使わない不自然なコードになります。そういうときは some を使うと、意図がそのまま行に出ます。配列の中に特定の値が入っているかを見るなら includes です。タグのような文字列の配列と相性がよく、filter の条件の中でよく使います。

よくある間違い

• 条件ではなく値を返してしまう — works.filter((work) => work.title) は戻り値を真偽値として見るので、タイトルが空でないものが全部残ります。=== などで比べた結果を返してください
• 1 件しか要らないのに filter を使う — 添字 0 で取り出す書き方は動きますが、最後まで走査するうえ、空配列のときの扱いが増えます。1 件と決まっているなら find のほうが素直です
• 項目が欠けた要素で落ちる — work.tags.includes(...) は tags を持たない作品が 1 件混ざるだけで止まります。データの形が揺れるなら、条件の前に値があるかを確かめるか、そもそも配列を必ず持つ形にそろえます

1. 関数名は pickPopularWorks とし、引数は作品の配列 works と数値 minViews の 2 つを受け取る
2. published が true かつ views が minViews 以上の作品だけを対象にする
3. 戻り値は titles と jsTitle の 2 つのキーを持つオブジェクトにし、titles は対象作品のタイトルの配列にする
4. jsTitle は対象の中で tags に JavaScript を含む最初の作品のタイトルとし、無ければ null にする