このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.09.04

JavaScript 戻り値

関数が返す結果を戻り値と言います。
戻り値を使うと、引数を元に計算を行い、その結果に応じ様々な値を返す関数を作ることができます。

関数の中で戻り値を記述するには、return文を使います。

return 戻り値;

例:

<script type="text/javascript">
function circle(r){
area = r * r * 3.14;
return area;
}
a = circle(10);
document.write("円の面積は、" + a);
</script>

結果:

円の面積は、314

上記のscript例は円の面積を求める関数ですが、関数内で面積の表示はせず、

return文を使い面積の数値を戻り値にしています。
「a = circle(10)」とすると、変数aには引数10にして呼び出した関数circleの戻り値が代入され、
結果 「円の面積は、314」となります。

return文が使われると、そこで関数の実行が中断されることに注意が必要です。

例:

<script type="text/javascript">
function circle(r){
if(r < 0) return;
area = r * r * 3.14;
return area;
}
document.write("円の面積は、" + circle(10) + "<br>");
document.write("円の面積は、" + circle(-6));
</script>

結果:

円の面積は、314
円の面積は、undefined

上記の例では、引数の値がマイナスだった場合、戻り値のないreturn文で関数を中断しております。

このreturn文が実行されますと、 area = r * r * 3.14;〜以降の計算は行われない結果となります。

関数が戻り値を返さなかったり、戻り値のないreturn文を使用した場合

関数の戻り値はunder finedとなります。

戻り値のある関数の使い方

a = circle(10) + 100; //戻り値と数値の足し算

if(circle(10) > 400){ … } //戻り値と数値の比較

somefunc(circle(10),300); //戻り値を引数に渡す

値を返さないreturn文

戻り値のないreturn文は、関数の実行を中断するのに使えます。

if文に長大なスクリプトを記述した関数があるとします。

function animation(){
if(何かの条件){
長大なスクリプト…
}
}

これをスッキリ

function animation(){
if(!何かの条件) return;
長大なスクリプト…
}

させることができます。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。