今回は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);
いかがでしょうか?
少しはイメージができましたでしょうか?
一人でも参考になったという方が入れば幸いです。
またメモ程度に書きます。
では、また!