JavaScriptの関数―関数の定義方法や引数と戻り値など

JavaScriptの関数の定義方法や引数と戻り値など。JavaScriptの関数についてまとめています。

▲記事トップへ

1. 関数とは

関数とは、いくつかの処理を１つのグループにまとめたもので、引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返します。

以下では、JavaScriptの関数の定義方法、引数と戻り値について見ていきます。

2. JavaScriptでの関数の定義方法

JavaScriptでの関数の定義方法には以下があります。

function文を用いて関数を定義する方法
関数リテラルを用いて関数を定義する方法
Functionオブジェクトを用いて関数を定義する方法

JavaScriptでfunction文を用いて関数を定義する方法

以下はJavaScriptでfunction文を用いて関数を定義する方法のサンプルです。

サンプルソース

ブラウザに「Hello JavaScript」という文字列を表示するサンプルソースです。

<html>

<script type="text/javascript">
  function hello(){
    document.write("Hello JavaScript");
  }
</script>

<body>

<script type="text/javascript">
  hello();
</script>

</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

JavaScriptで関数リテラルを用いて関数を定義する方法

関数リテラルの構文では必ずしも関数に名前を付ける必要ありません。このような名前を付けずに定義した関数を「無名関数」や「匿名関数」と呼びます。

以下は関数リテラルを用いる方法のサンプルです。

サンプルソース

ブラウザに「Hello JavaScript2」という文字列を表示するサンプルソースです。

<html>

<script type="text/javascript">
  var hello = function() {
    document.write("Hello JavaScript2");
  };
</script>

<body>

<script type="text/javascript">
  hello();
</script>

</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

JavaScriptでFunctionオブジェクトを用いて関数を定義する方法

以下はJavaScriptでFunctionオブジェクトを用いて関数を定義する方法です。

サンプルソース

ブラウザに「Hello JavaScript3」という文字列を表示するソースです。

<html>

<script type="text/javascript">
  var hello = new Function('document.write("Hello JavaScript3");');
</script>

<body>

<script type="text/javascript">
  hello();
</script>

</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

3. JavaScriptの関数の引数と戻り値

ここでは、JavaScriptの関数の引数と戻り値について見ていきます。

引数

関数を呼び出す際に、呼び出す側から関数に入力値を与えることができます。この入力値を引数といいます。

関数の引数は以下のコードのnameにあたる部分です。

function hello(name) {
    document.write("Hello " + name + "!!");
}

関数に対して複数の入力値がある場合は、複数の引数を指定できます。また、関数に対して渡すべき値が無い場合は、上述の例のように引数を指定せずに関数を呼び出します。

戻り値

関数での処理の結果を呼び出し側に戻したい場合があります。その場合に戻り値を設定します。

function hello(name) {
    return "Hello " + name + "!!";
}

document.write(hello("JavaScript"));

関数の処理結果は上の例のようにreturn文を利用すると戻り値として関数の呼出元に設定値を戻すことができます。

JavaScriptの関数の引数と戻り値の例

以下はJavaScriptの関数の引数と戻り値の例です。

サンプルソース

ブラウザに「Hello JavaScript4!!」という文字列を表示するソースです。

<html>

<script type="text/javascript">
function hello(name) {
    return "Hello " + name + "!!";
}
</script>

<body>

<script type="text/javascript">
document.write(hello("JavaScript4"));
</script>

</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

4. JavaScriptの関数の戻り値をhtmlに表示する方法

JavaScriptの関数の戻り値をhtmlに表示する方法についてです。

document.write()を使用する

上述のサンプルで示したようにdocument.write()を使用することでdocument.write()の引数に指定した文字列をhtmlに出力することができます。

htmlのタグのオブジェクトを取得して値を設定する

その他に、htmlのタグのオブジェクトを取得して値に関数の戻り値を設定することでhtmlに出力することができます。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<p id="a">ここに文字列を出力します。</p>

<input type="button" value="ボタン"
onclick="document.getElementById('a').innerHTML='Hello World!!';">

</body>
</html>