JavaScript function 文

定義と使用法

function 文で関数を宣言します。

宣言された関数は「後で使用するために保存され」、その後の呼び出し時に実行されます。

JavaScriptでは、関数はオブジェクトであり、属性とメソッドを同時に持っています。

関数の定義を参照してください。

JavaScriptに関するすべての知識を学ぶために、JavaScriptのチュートリアルを読んでください。関数とJavaScriptのスコープに関する章から始めてください。詳細については、関数の定義、引数、呼び出し、クロージャに関するチュートリアルを読んでください。

ヒント：関数から値を返すには return 文を使用してください。

例

関数を宣言し、id="demo"の要素に「Hello World」を出力する方法を学びます。

function myFunction() { // 関数を宣言する
  document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction(); // 関数を呼び出す

実際に試してみる

ページの下部には、TIY 実例がさらにあります。

文法

function functionName(parameters) {
  実行するコード
}

引数の値

引数 説明
functionName 必須です。関数の名前を指定し、「保存して後で使用する」ことができます。関数名には、アルファベット、数字、アンダースコア、およびドル記号（変数の規則に従います）を含むことができます。
parameters

オプションです。カンマで区切られた一連の引数名を指定します。

関数の引数は関数定義に列挙された名前です。

関数の引数は関数が呼び出された際に受け取る実際の値です。関数内部では、引数はローカル変数として使用されます。

コメント：関数を呼び出す際に引数が不足すると、欠けている引数の値は undefined に設定されます。

技術的な詳細

JavaScript バージョン： ECMAScript 1

さらに例

例

PIの値を返します：

function myFunction() {
  return Math.PI;
}

実際に試してみる

例

aとbの積を返します：

function myFunction(a, b) {
  return a * b;
}

実際に試してみる

例

関数を使用することで、異なるパラメータを持つ同じコードを複数回使用して、異なる結果を得ることができます。

華氏度を摂氏度に変換します：

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

実際に試してみる

例

関数は変数として使用できます。

代わりに：

temp = toCelsius(32);
text = "The temperature is " + temp + " Centigrade";
使用できます：
text = "The temperature is " + toCelsius(32) + " Centigrade";

実際に試してみる

例

JavaScript 関数には、arguments オブジェクトという組み込みオブジェクトがあります。

arguments.length プロパティは、関数が呼び出されたときに受け取った引数の数を返します：

function myFunction(a, b) {
  return arguments.length;
}

実際に試してみる

例

ボタンをクリックすると、関数が呼び出され、id="demo"の要素に"Hello World"が表示されます：

<button onclick="myFunction()">クリックして</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

実際に試してみる

例

JavaScript 関数は式で定義することもできます。

関数式は変数に保存できます：

var x = function (a, b) {return a * b};

実際に試してみる

例

関数式を変数に保存してから、その変数は関数として使用できます：

var x = function (a, b) {return a * b};
var z = x(4, 3);

実際に試してみる

ブラウザサポート

文 Chrome IE Firefox Safari Opera
function サポート サポート サポート サポート サポート

関連ページ

JavaScript 教程：JavaScript 関数

JavaScript 教程：JavaScript スコープ

JavaScript 教程：JavaScript 関数定義

JavaScript 教程：JavaScript 関数引数

JavaScript 教程：JavaScript 関数呼び出し

JavaScript 教程：JavaScript 関数クロージャー

JavaScript 参考手册：JavaScript return 文