JavaScript スキルアップ

returnについて

今回はJavaScriptでよく出てくるreturnについて書きます。
returnをなかなか理解することができなかったので、おそらく自分を似た状況の方も結構いてると思います。

自分なりに理解した方法・思考回路を記載しますので、少しでも理解の手助けになっていれば嬉しいです。

結論...

調べるとたくさん情報があるので、その中から一つ選んで書けば、
「関数内で処理した結果を返し(戻り値)、その値を使って別の処理ができる。」です。

わかりにくかったので、同僚に「例えるなら?」と聞くと、
「ミキサーでフルーツジュースを作ることを想像する。フルーツジュースを作るには、まずフルーツを入れて、次にスイッチを押して、回転させて、中身を取り出すまでがゴールとすると。。。
関数はミキサーに何かしらのフルーツを入れてスイッチを押したら、中が回転するという機能。
returnがあれば、いつでも誰かにそのミキサーを貸し出して、そのジュースを作りとして取り出すことができる。
returnがなければ何かしらのフルーツを入れてスイッチを押して回転だけさせて終了となる。誰かに貸すこともできなければ、作ったものをミキサーから取り出せない状態(undefined)」

ふむふむ。
なんとなくわかってきた。

では実装。

//①ジュースをミキサーで作る関数
function foodProcessor(fruit01, fruit02){
        var switchOn = fruit01 + 'と' + fruit02 + 'を混ぜたジュースを作りました。召し上がれ。';
        return switchOn; //ここで他の関数でも使える状態になった
}
var drink = foodProcessor('りんご', 'オレンジ');
console.log(drink); //「りんごとオレンジを混ぜたジュースを作りました。召し上がれ。」


//②お店で同じジュースを出す関数
function anotherStore(item){
        console.log('この店舗でも' + item); //「この店舗でもりんごとオレンジを混ぜたジュースを作りました。召し上がれ。」
}
anotherStore(drink); //①の結果を②の関数で使う


もし「ジュースをミキサーで作る関数」にreturnがなければ、、

//①ジュースをミキサーで作る関数
function foodProcessor(fruit01, fruit02){
        var switchOn = fruit01 + 'と' + fruit02 + 'を混ぜたジュースを作りました。召し上がれ。';
}
var drink = foodProcessor('りんご', 'オレンジ');
console.log(drink); //undefined(returnが無いので何のジュースかわからないし、ジュースも取り出せない)


//②お店で同じジュースを出す関数
function anotherStore(item){
        console.log('この店舗でも' + item); //「この店舗でもundefined」
}
anotherStore(drink);


いかがでしょうか?
少しはイメージができましたでしょうか?

一人でも参考になったという方が入れば幸いです。
またメモ程度に書きます。

では、また!

-JavaScript, スキルアップ