広告スペース(バナー)
🟨JavaScript レッスン
基本文法の基礎8▾
データ構造とオブジェクト指向8▾
構文の基本を深める9▾
関数とデータ構造の応用9▾
アルゴリズムとテストの基礎8▾
文字列・数値操作の応用8▾
実務で役立つ機能8▾
レッスン 48 / 69
複数の値を返す関数(配列の分割代入)
このレッスンでは、配列を使って関数から複数の値を返す書き方を学び、1つの関数でまとめて複数の結果を受け取れるようになることを目標にします。「JavaScript 関数 複数の値 返す」で調べている方向けの内容です。
関数から配列を返し、呼び出し側で分割代入すると、まるで「複数の値を同時に返している」かのように書けます。「1つの箱に、名前と点数の2枚のカードを入れて渡す」ようなイメージです。JavaScriptの関数は本来1つの値しか返せませんが、配列やオブジェクトに包んで返すことで、実質的に複数の結果をまとめて呼び出し元に渡せるようになります。
サンプルコードでは、minMax関数が[最小値, 最大値]という配列を返し、呼び出し側でconst [min, max] = minMax(...)のように分割代入で受け取っています。配列の代わりにオブジェクトで返せば、{ min, max }のように名前をつけて返すこともでき、より意図が伝わりやすいコードになります。
初心者がよくつまずくのが、分割代入を受け取る変数の順番です。配列で返す場合、受け取る側も同じ順番で変数を並べる必要があり、順番を間違えると意図しない値が代入されてしまいます。値の意味が分かりにくくなってきたら、配列ではなくオブジェクトで返す設計に切り替えるのも1つの手です。
戻り値をどう受け取るかまで含めて設計すると、使いやすい関数を作れるようになります。座標(x, y)や範囲(最小値・最大値)のように、自然に複数の値がセットになる処理では、この書き方が実務でもよく使われます。
JavaScript
OUTPUT / 実行結果
💡 console.log() の内容が実行結果に表示されます。
🎯
ここまでできればゴール達成!
最小値と最大値を同時に返すような、便利な関数が作れるようになります。
最小値と最大値を同時に返すような、便利な関数が作れるようになります。
広告スペース(バナー)
広告スペース(記事内)