【JavaScript】配列・複数の値・関数を戻り値で利用する方法【return】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

「return」の戻り値

結論からいえば、配列・複数の値・関数は戻り値として利用することができます。

という方は、コピペもできるコード入りの解説記事をこちらに用意しております。
わかりやすい「戻り値」と使い方【return】

ここでは初学者でも分かりやすいようにサンプルコードと一緒に解説しております。
コピペだけで使えるコードも載せております。是非、ご活用下さい。

「配列」を戻り値として利用する

まずは配列を返し方です。こちらがサンプルコード

返したい配列を「hairetu」と定義しています。
その配列にpushを使い、0～4の数字にそれぞれ×2した数字を格納しています。
丁度この部分になります。

    let hairetu = [];
    let modoriti = document.getElementById("returnValue")

    for(let i =0;i < 5;i++){
      hairetu.push(i * 2)
    }
    return modoriti.textContent = hairetu; 

「押してね」を押すと、戻り値として使いたかった配列[0.2.4.6.8]が返ってきていることが分かりますね。

returnで配列を戻りとして扱う順序としては

が分かりやすく、オススメです。

「複数の値」を戻り値として利用する

戻り値が複数ある場合も考えられます。

そのたびに変数に格納して～とするのは大変ですので「オブジェクト」形式にするのが効率よく、分かりやすいと思います。

オブジェクト(詳しくはこちら)を使い、「大谷翔平」「野球選手」の2つのデーターを
変数「otani」に格納しています。

これをreturnで返すことで「otani.name：大谷翔平」「otani.job：野球選手」と同時に戻り値として使用できます。

オブジェクトを使うと、〇〇.nameや〇〇.colorなど好きな名称をつけることができます。コードを見直す時、感覚的にとても読みやすくなるので是非ご活用ください。

「関数」を戻り値として利用する

最後に関数を戻り値として使用する方法をみていきましょう。

たしかに中々ピンとこないと思います。
押すとreturnで戻ってきた関数が発動して計算するサンプルをご用意いたしました。

html>spanタグのdata-valueを参照して計算結果を表示しています。

一見すると、『計算結果そのもの』をreturnで返した方が効率よく見えます。
単純な計算であればたしかにそうです。

比較のために、もう1つのサンプルをご覧ください。

メリットは関数を変数として定義できること

例えば「ボタンをクリックする毎に【-2】して表示させたい」とします。
それがこちらのコードになります。

通常、変数を一度定義すると後から変更するのは大変です。
関数を発動する毎に～と条件がつくと把握をするのは更に大きな負担となってしまいます。

そこで1つの関数の中でセット(定義された変数+関数)を作る、クロージャという考え方があります。それぞれを分けると下記にようになります。

この③をvar clicedDown = valueDown()と変数に格納することで
処理が発動する毎に変数を変化させることができるのです。

メリットは多く、一番はコードを大幅に短縮できて読みやすくなることでしょう。
クロージャを使わず上のコードを再現したところ、倍くらいのコード量になりました。

このように特定の変数と処理内容をセットにしたい時に役立つのが
この「関数」を戻り値として利用する方法です。

まとめ

最後に、returnの「配列」「複数の値」「関数」の戻り値についてまとめておきます。

以上、JavaScriptでのreturnの使い方のご紹介でした。