JavaScript 関数

関数は、イベントによって駆動されるか、呼び出されたときに実行される再利用可能なコードブロックです。

サンプル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テストサンプル</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">クリック</button> </body> </html>

試してみる »

JavaScript 関数の構文

関数とは、波括弧で囲まれたコードブロックであり、その前にキーワード function を付けます：

function functionname()
{
    // コードを実行
}

関数が呼び出されると、関数内のコードが実行されます。

関数は、イベントが発生したとき（ユーザーがボタンをクリックしたときなど）に直接呼び出すことができ、また JavaScript の任意の場所から呼び出すこともできます。

lamp JavaScript は大文字と小文字を区別します。キーワード function は小文字でなければならず、関数を呼び出す際も関数名の大文字と小文字を正確に一致させる必要があります。

引数付き関数の呼び出し

関数を呼び出すとき、値を渡すことができます。これらの値を引数と呼びます。

これらの引数は関数内で使用できます。

引数はカンマ (,) で区切って、必要な数だけ渡すことができます：

myFunction(argument1,argument2)

関数を宣言するときは、引数を変数として宣言します：

function myFunction(var1,var2)
{
コード
}

変数と引数は同じ順序で指定する必要があります。最初の変数は最初に渡される引数の値を受け取り、以下同様です。

サンプル

<p>このボタンをクリックして、引数付きの関数を呼び出します。</p> <button onclick="myFunction('Harry Potter','Wizard')">ここをクリック</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script>

試してみる »

上記の関数は、ボタンがクリックされると "Welcome Harry Potter, the Wizard" と表示します。

関数は柔軟なので、異なる引数で関数を呼び出すと、異なるメッセージが表示されます：

サンプル

<button onclick="myFunction('Harry Potter','Wizard')">ここをクリック</button> <button onclick="myFunction('Bob','Builder')">ここをクリック</button>

試してみる »

クリックしたボタンに応じて、上記の例では "Welcome Harry Potter, the Wizard" または "Welcome Bob, the Builder" と表示されます。

戻り値を持つ関数

場合によっては、関数を呼び出した場所に値を返したいことがあります。

これには return 文を使用します。

return 文を使用すると、関数は実行を停止し、指定された値を返します。

構文

function myFunction()
{
    var x=5;
    return x;
}

上記の関数は値 5 を返します。

注意：実行が停止するのは関数だけで、JavaScript 全体が停止するわけではありません。JavaScript は関数が呼び出された場所からコードの実行を続けます。

関数呼び出しは戻り値に置き換えられます：

var myVar=myFunction();

myVar 変数の値は 5 です。これは関数 "myFunction()" が返した値です。

変数に保存しなくても、戻り値を使用できます：

document.getElementById("demo").innerHTML=myFunction();

"demo" 要素の innerHTML は 5 になります。これは関数 "myFunction()" が返した値です。

戻り値は、関数に渡される引数に基づいて指定できます：

サンプル

2つの数値の積を計算し、結果を返します：

function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 要素の innerHTML は次のようになります：

12

試してみる »

単に関数から抜け出したい場合も、return 文を使用できます。戻り値は省略可能です：

function myFunction(a,b) { if (a>b) { return; } x=a+b }

a が b より大きい場合、上記のコードは関数を終了し、a と b の合計は計算されません。

JavaScript ローカル変数

JavaScript 関数内で宣言された変数（var を使用）はローカル変数であるため、関数内でのみアクセスできます。（この変数のスコープはローカルです。）

異なる関数内では同じ名前のローカル変数を使用できます。この変数を宣言した関数だけがその変数を認識できるためです。

関数が実行されると、ローカル変数は削除されます。

JavaScript グローバル変数

関数の外で宣言された変数はグローバル変数であり、Webページ上のすべてのスクリプトと関数がアクセスできます。

JavaScript 変数の生存期間

JavaScript 変数の寿命は、宣言された時点から始まります。

ローカル変数は関数の実行後に削除されます。

グローバル変数はページが閉じられた後に削除されます。

未宣言の JavaScript 変数に値を代入

宣言されていない変数に値を代入すると、その変数は自動的に window のプロパティになります。

次のステートメント：

carname="Volvo";

window のプロパティ carname を宣言します。

非厳格モードで未宣言の変数への代入によって作成されたグローバル変数は、グローバルオブジェクトの構成可能なプロパティであり、削除できます。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
その他の拡張機能