iPentec.com / Doc / JavaScript

関数を定義する - JavaScript

JavaScriptで関数を定義するコードを紹介します。

概要

引数を受け取り結果を戻り値として返す処理、すなわち関数を定義する書式とコードを紹介します。

書式

以下の書式を利用します。

function 関数名(引数名1, 引数名2, ..... 引数名n)
{
  //関数の実装
  return 戻り値;
}

引数がない場合は下記の書式を利用します。

function 関数名()
{
  //関数の実装
  return 戻り値;
}

記述例

2つの引数を受け取り、戻り値を返すメソッドの例です。

  function add(value1, value2) {
    return (value1 + value2)*value2;
  }

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">

      function add(a, b, c) {
        return a + b + c;
      }

      function buttonClick() {
        var ret = add("Penguin", "Camel", "Whale");
        var elem = document.getElementById("output");
        elem.innerText = ret;
      }
    </script>
</head>
<body>
  <input type="button" value="Exec"  onclick="buttonClick();" />
  <div id="output"></div>
</body>
</html>

解説

下記のコードがJavaScriptによる関数の定義と実装のコードです。このコードでは3つの引数を受け取り、引数の和を戻り値として返します。

  function add(a, b, c) {
    return a + b + c;
  }

下記のコードがJavaScriptの関数を呼び出すコードと戻り値を画面に表示するコードです。
先に定義したadd関数を、"Penguin", "Camel", "Whale" の3つの値を与えて呼び出しています。戻り値を ret 変数で受け取ります。add関数の戻り値として取得したret変数の値を画面に表示します。画面に表示するコードの詳細はこちらの記事を参照してください。

  function buttonClick() {
    var ret = add("Penguin", "Camel", "Whale");

    var elem = document.getElementById("output");
    elem.innerText = ret;
  }