トップ 言語 JavaScript 入門編 JavaScriptの関数

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

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

関数とは

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

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

JavaScriptでの関数の定義方法

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

  1. function文を用いて関数を定義する方法
  2. 関数リテラルを用いて関数を定義する方法
  3. 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でfunction文を用いて関数を定義する方法

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で関数リテラルを用いて関数を定義する方法

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など、ブラウザで開けば表示できます。 表示した結果は次のようになります。

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

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など、ブラウザで開けば表示できます。 表示した結果は次のようになります。

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

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴 /翻訳英語の学習 /RSEUserGuide翻訳

スポンサーリンク