戻り値で関数から値を返すreturnを今一度勉強しなおしてみた

2011/02/23

カテゴリ：: JavaScript

タグ：: javascript; return

JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強＆復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。

まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの？使いどころは？どうなるの？いろいろやってみた。

return

とりあえず、Firebugを使って色々入力してみることにします。

return; //SyntaxError

いきなりreturnだけしてもエラーだよということですね。何かに値とか返すよ～って時に使うものとのこと。

それならってことで、関数の中に入れてみた。

function test(){
    return;
};
test(); //undefined

でも、returnだけしても、何も返すものがないので、undefined。

じゃあ、trueってのをいれてみよう。

function test(){
    return true;
};
test(); //true

trueが返ってきた！！

じゃあ次は文字列でもいれてみよう。

function test(){
    return 'hoge';
};
test(); //"hoge"

いれておいた文字列"hoge"が返ってきた。文字列もOK。

そして次は、関数を入れてみることに。

function test(){
    return function hoge(){
        console.log('ham')
    };
};
test(); //hoge()

中に入れた関数はもどってきてるのですが、実行はされない様子。

じゃあその場で実行するような関数をreturnしてみようか。

function test(){
    return (function hoge(){
        console.log('ham')
    })();
};
test(); //ham ＆ undefined

無名関数をすぐに実行するように(function(){})()ってしてみた。その無名関数をreturnしてみたところ、実行されてコンソールに'ham'っというのが表示された。

だけど、それだけじゃなくて、undefinedも返ってきたよ・・・なぜ！？

なんてよくよく考えたけど、console.log()でhamって値を表示させただけで、無名関数の中身自体は何もない。何もないをreturnしているのだから、その結果がundefinedってことか。さっきやった、returnしただけのと同じ。関数でごにょごにょしても、それ自体を返しても何も値として返ってくるのはないから、undefinedということか。

なるほど！

ここまでで、returnは関数でも文字列でも何でも返してくれるということがわかった。

引数を渡してみる

次のステップとして、関数に引数を渡してみることにする。

function test(a){
    return a;
};
test('hoge'); //"hoge"

引数をreturnさせるというだけのもの。文字列'hoge'を渡してみたところ、'hoge'が返ってきました。

次に計算でもしてみましょう。足し算と掛け算でもしてみることにします。

function test(a,b,c){
    return (a + b) * c;
};
test(2,3,4); //20

これを実行してみると、(2+3)×4の計算がされるので、答えは20。なので20がreturnで返ってきます。

rerutn ～;より後ろに書かれている命令は…

最後に、reruneが入っている関数で、rerune ～;より後ろに書かれている命令がどうなるかを見てみようと思います。

function test(a,b,c){
    return (a + b) * c;
    alert((a + b) * c);
};
test(2,3,4); //20 ＆ alertは実行されない

これを実行してみても、return ～;より後ろに書かれた内容は実行されません。returnされるところまでしか実行されずに終わるようです。

まとめ

・ returnは関数内に入れることで、関数でも値でも文字列でも何でも返す。
・ return ～;より後ろの命令は実行されない。

※今回の内容は結構無意味なことの実験も含めておりますのでその点にはご注意を。

参考サイト：