未経験からエンジニア、そして採用担当のブログ|kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

JavaScript

returnについて

投稿日:2019年8月12日 更新日:

今回は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

執筆者:

関連記事

JS

【5分で理解④ (配列編)】JavaScriptの配列のsomeメソッドで配列内に”存在確認”

第4弾は配列内の存在の有無を確認する時に便利なsomeメソッド

JS

【JS】forEach・map・filter・reduce それぞれ説明【配列実践スキル】

こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。SEOガン無視の短い内容となってますので、サクッと見れま …

JS

【5分で理解⑦ (配列編)】JavaScriptの配列のreduceメソッドで配列の値を”集約”する

第7弾は配列の値を”集約”する時に便利なreduceメソッド

JS

【JS】連続するsetTimeoutをスッキリさせる【コピペで解消】

今回はJavaScript(以下JS)で連続でsetTimeout()を実装する時によく陥る「コールバックヘル」を解消する方法を記載します。

JS

newとインスタンスの関係

newとインスタンスについて自分なりに理解した流れを書きます。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。