戻り値で関数から値を返す(return文)

広告

関数ではreturn文を使うことで呼び出し元に値を返すことができます。書式は次の通りです。 

function 関数名(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;

  return 式;
}

変数名 = 関数名(引数1, 引数2, ...);

関数を呼び出すと処理が関数のブロック内に移りますが、ブロック内でreturn文が実行されると関数内の処理は終了し、return文の後に記述された式を評価した結果が関数の呼び出し元に返されます。関数呼び出しを「変数名 = 関数名(..)」のように記述しておけば、関数から返された値を変数に代入することができます。

return文を使うことで何らかの値を1つだけ戻すことができますので、複雑な計算を行って結果を返すような関数を作ることが可能になります。次の例では半径を表す数値を引数として渡すと円の面積を返してくれる関数を作成しています。 

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}

var m = menseki(5);

この関数では引数の値を元に面積を計算し、戻り値として呼び出し元へ返しています。なおreturn文の後には値だけではなく式を記述することもできますので単に次のように記述しても同じ結果となります。 

function menseki(r){
  return  3.14 * r * r;
}

var m = menseki(5);
return文がない場合の戻り値

関数のブロック内にreturn文が無い場合(又はif文の中などに書かれていてreturn文が実行されないまま関数のブロック内の最後の処理まで行われた時)には未定義値(undefined)が返されます。 

function kansu(num){
  alert(num);
}

var tmp = kansu(10);

プログラミング言語によってはreturn文が無かった場合には最後に評価された式の値が戻り値として返されるものもありますが、JavaScriptではreturn文が無い場合は常に未定義値(undefined)が返されることになります。

式が記述されていないreturn文

return文は戻り値を関数呼び出し元へ返すためにも使用されますが、return文は単に関数内の処理を終了して呼び出し元へ処理の流れを返す為にも使用されます。

次の例を見てください。 

function kansu(num){
  if (num < 0){
    return;
  }

  alert(num);
}

var tmp = kansu(10);

上記の例では引数の値が負の値だった場合にはそれ以降の処理は行わずに呼び出し元へ処理を返します。

また単にreturn文が実行された場合、戻り値は未定義値(undefined)が返されることになります。

return文は1つの関数の中に複数記述することもできます。if文などの条件分岐と組み合わせて戻り値が異なる複数のreturn文を記述することもできます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script4_1.js">
</script>

</body>
</html>

function menseki(r){
  return 3.14 * r * r;
}

function enshu(r){
  return 2 * 3.14 * r;
}

var r = 10;

document.write("<p>");
document.write("半径 = " + r + "<br />");
document.write("円周 = " + enshu(r) + "<br />");
document.write("面積 = " + menseki(r));
document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p4-1

( Written by Tatsuo Ikura )