オブジェクトで複数の値を返す

解説

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

• return は値を 1 つしか返せないので、関連する値はオブジェクトに詰めて返します
• 呼び出し側は名前で受け取れるので、順番を覚えずに済みます

合計と平均を、両方返したい

集計を書くと、すぐこの壁にぶつかります。合計も平均も欲しいのに、return sum, avg; とは書けません。JavaScript の return が返せる値は 1 つだけだからです。関数を 2 本に分ければ書けますが、同じループを 2 回まわすことになります。

前のレッスンでオブジェクトを覚えたので、ようやく答えが出せます。複数の値は 1 つの箱に詰めて返す、それだけです。

function measureBio(text) {
  return { length: text.length, isEmpty: text.length === 0 };
}

const result = measureBio("フロントエンド");
console.log(result.length);    // 7
console.log(result.isEmpty);   // false

呼び出し側は result.length のように名前で読めます。名前で受け取れることの本当の利点は、後から値を増やしても壊れないことです。キーを 1 つ足しても、既存の呼び出し側は今までどおりのキーを読み続けられます。

変数名とキー名がそろっているときは、片方を省略できます。第3章で一度出てきた省略記法です。

const width = 320;
const height = 180;
console.log({ width, height });   // { width: 320, height: 180 }

0 件のときに NaN が出る

集計関数を書くときに必ず考えるのが、空の配列を渡された場合です。

const scores = [];
let sum = 0;
console.log(sum / scores.length);   // NaN  0 割る 0 の結果

要素が 0 個なら 0 / 0 の計算になり、結果は NaN になります。NaN は数値のようで数値ではない厄介な値で、一度混ざると、その後どれだけ計算しても NaN のままです。画面には「NaN 回」という意味不明な表示が出ます。

第3章の三項演算子で、0 件のときの答えを先に決めておけば防げます。「まだ作品が 1 件も無い状態」は、写真ギャラリーを公開した初日に必ず訪れる状態です。

演習の平均は、割り算の結果をそのまま返します。小数のままでも数値なので、丸める処理は必要ありません。

const lengths = [3, 4];
console.log((lengths[0] + lengths[1]) / lengths.length); // 3.5

よくある間違い

• return の直後で改行する — return だけの行があると、JavaScript は行末にセミコロンを補い、そこで文が終わったと解釈します。戻り値が undefined になるので、return { は必ず同じ行に書きます
• キー名を呼び出し側と食い違わせる — キー名は関数の外向きの約束です。つづりが違っても undefined が返るだけでエラーにならないので、気付くのが遅れます

1. 関数名は summarizeViews、引数は数値の配列 views の一つ
2. 戻り値は total と average を持つオブジェクト
3. 平均は合計を件数で割り、小数もそのまま返すこと
4. 空配列では合計も平均も 0 にすること