関数を扱っていると「return」が出てきますが、これを記載する意味が本当に分からなくてJavaScriptの学習が進まなすぎました(笑)

でも今さっき「return」を記載する意味がやっと分かったので、忘れないうちにメモします。

「return」とは

JavaScriptの関数で出てくる関数の戻り値といろんなところに記載されている言葉です。

いやいや関数の戻り値ってなにｗｗ
となりますよね、私はなりました。

私がなんとか理解できた例を見ながら関数の戻り値の正体を暴きたいと思います。

1        function applyTax(price) {
2        const result = price * 0.1;      //0.1%の消費税
3        return result;
4        };
5 
6        const tax = applyTax(10000);
7        console.log(tax * 5);                   //5000と表示される

上記のコードを読み解きながら、「return」の立ち位置を確認します。

①6行目の「applyTax(10000)」に「10000」が入っているので、その数値を1行目の「price」に代入します。

そしたら、applyTax関数内で「10000」という数値が使用できるようになります。

②次に2行目の「price * 0.1」はapplyTax関数内の計算式なので、「price」に「10000」を代入します。計算結果は「1000」。

③「const result = price * 0.1;」なので、計算結果を代入すると「const result = 1000;」つまり、「result」という変数に「1000」が代入されました。
「const result = 1000;」の状態です。

④ここで「return」が登場します！！
3行目の「return result;」を記載することで、「result」に代入された「1000」を関数の外で使えるようにします。

つまり、この「return」がないと、せっかく計算して出した「1000」がapplyTax関数内でしか使用できないということ！！

なるほど、これが関数の戻り値を呼び出し元に返す役割がreturnなのか…！！！！と気づきました。

戻り値とは関数の外で使いたい値のことをいい、呼び出し元に値を返すとは、applyTax関数を呼び出した「applyTax(10000)」に値を戻すことをいいます。

⑤なので、6行目の「const tax = applyTax(10000);」は「const tax = 1000;」

⑥7行目の「console.log(tax * 5); 」は「console上にtax * 5 の値を出力する」という意味なので、「tax * 5」つまり、「5000」がconsole上に表示されます。

わあ、こうやって書いていくとなおさら意味が分かってきました。
これ書いてよかったー！

全くの素人解釈なので、お見苦しい表現もあるかと思いますが、JavaScriptの「return」ってなんなの？！とお困りの方に届いたらいいなと思います。