つくる 作品データを構造化する

解説

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

• 集計関数は、返す形を先に決めてから中身を書きます
• 欠けたプロパティと空配列に耐える関数を書けます

1 件でも欠けていると、合計が NaN になる

第7章を通して、写真ギャラリーのデータはタイトルだけの配列から、1 件ごとに複数の情報を持つオブジェクトの配列へ育ちました。総仕上げとして、その配列から件数と合計閲覧数と最新作をまとめて返す関数を書きます。決まりは次のとおりです。

• 件数は配列の長さをそのまま使う
• 閲覧数の合計は、views が無い作品を 0 として足す
• 最新作は year が最大の作品のタイトル。同じ年が並んだら、先に出てきたほうを採用する
• 空配列のときは、件数も合計も 0、最新作は null

いちばん多い失敗は 2 つ目です。下書き中の作品にはまだ閲覧数が無いかもしれないのに、そのまま足してしまうケースです。

console.log(0 + undefined);   // NaN

一度 NaN が混ざると、その後どれだけ足しても NaN のままです。画面には「NaN 回」という意味不明な表示が出ます。第3章の ?? を入り口に置けば防げます。

const entry = { label: "CSS" };   // level が無い
console.log(entry.level ?? 0);    // 0  無いときだけ 0 を使う

|| ではなく ?? を選ぶのは、本当に 0 だった値をそのまま残したいからです。今回はどちらでも同じ結果になりますが、数値には ?? と決めておくと事故りません。

集めるものは、1 回のループで全部集める

3 つの値を求めるからといって、ループを 3 回まわす必要はありません。足し上げながら、同時に最大値も追いかけられます。最大値を追う変数は、初期値を「必ず負ける値」にしておくのが定石です。

let topLevel = -Infinity;
console.log(3 > topLevel);   // true  1 件目で必ず更新される

0 を初期値にしても多くの場合は動きますが、-Infinity のほうが「まだ何も見ていない」という意図がはっきりします。件数のように、すでに用意されているものは自分で数えません。

console.log(["HTML", "CSS", "JavaScript"].length);   // 3

同点のときに、どちらを残すか

同じ年が並んだときにどちらを採用するかは、比較の記号ひとつで決まります。

let top = 2026;
console.log(2026 > top);    // false  更新されないので先に見たほうが残る
console.log(2026 >= top);   // true   更新されるので後から来たほうに入れ替わる

先に出てきたほうを残したいなら > です。ここを >= にすると、同じ年が並ぶケースだけテストが落ちます。

空配列のときの答えも、実装の前に決めておきます。ループが 1 度もまわらないので、初期値がそのまま戻り値になります。

今回は null を選びます。値が無いことを意図して表すという null 本来の意味に合っていて、呼び出し側も latest ?? "まだ作品がありません" の 1 行で表示を決められるからです。表示の文言を集計関数に持ち込まないのは、覚えておく価値のある習慣です。

よくある間違い

• 戻り値のキー名を間違える — キー名は関数の外向きの約束です。つづりが違っても undefined が返るだけでエラーにならないので、気付くのが遅れます
• 欠けたプロパティを守らずに足す — NaN はどんな比較でも false を返すため、if (total > 0) のような判定もすり抜けます。入り口で ?? を使うのがいちばん確実です

演習に進む前に

最新作の選択には、最大の年とその題名を一緒に覚える必要があります。この比較と二つの更新は演習に用意済みです。

const firstYear = 2020;
const nextYear = 2020;
console.log(nextYear > firstYear); // false

同年では更新しないので先頭が残ります。自分で書くのは既習の合計の更新と、複数の値をオブジェクトで返す処理です。

1. 関数名は summarizeWorks、引数は作品オブジェクトの配列 works の 1 つ
2. 戻り値は count totalViews latest の 3 つのキーを持つオブジェクト
3. views が無い作品は 0 として合計すること
4. latest は year が最大の作品の title。同じ年なら先に出てきたほうを採用すること
5. 空配列のときは { count: 0, totalViews: 0, latest: null } を返すこと