関数を定義します。関数とは、よく使用する処理を サブルーチン として定義するものです。例えば、時：分：秒を秒数に変換する関数を定義するには次のようにします。
function toSeconds(hour, min, sec) {
var answer = hour * 3600 + min * 60 + sec;
return(answer);
}
この関数は次のようにして呼び出すことができます。
sec1 = toSeconds(12, 34, 56); sec2 = toSeconds(23, 59, 59);
関数は、関数を呼び出す個所よりも前の部分であれば、どこで定義しておいても構いません。通常は、<head>～</head> の間や、外部ファイルで定義します。
<html>
<head>
<title>TEST</title>
<script>
function toSeconds(hour, min, sec) {
var answer = hour * 3600 + min * 60 + sec;
return(answer);
}
</script>
</head>
<body>
<script>
document.write(toSeconds(12, 34, 56));
</script>
</body>
</html>
function は、関数（処理）を定義するだけではなく、クラスを定義する目的でも使用されます。詳細は「クラスを定義する」を参照してください。
下記の例における hour, min, sec などのように、関数に渡す値を 引数、answer の値のように関数から戻される値を 戻り値 と呼びます。
function toSeconds(hour, min, sec) {
var answer = hour * 3600 + min * 60 + sec;
return(answer);
}
変数は通常 グローバル変数（プログラム全体で有効な値）として扱われますが、arg1, arg2, ... 部分に指定した変数や、関数内で var で定義した変数は ローカル変数（関数内部でのみ有効な値）として扱われます。グローバル変数とローカル変数は、名前が同じでも別の変数として扱われます。
下記の例では、グローバル変数 xx と、ローカル変数 xx は名前は同じでも別の変数として扱われます。
xx = 5; // グローバル変数 xx に 5 を代入
yy = 5; // グローバル変数 yy に 5 を代入
func(); // 関数 func() を呼び出す
alert("xx = " + xx); // グローバル変数 xx を表示（5 が表示される）
alert("yy = " + yy); // グローバル変数 yy を表示（8 が表示される）
function func() {
var xx = 8; // ローカル変数 xx に 8 を代入
yy = 8; // グローバル変数 yy に 8 を代入
}
ES6(ES2015) からは、引数を省略した場合のデフォルト値を指定できるようになりました。下記の例では min や sec 引数を省略した場合、それぞれ 0分、0秒とみなされます。
function toSeconds(hour, min = 0, sec = 0) {
var answer = hour * 3600 + min * 60 + sec;
return(answer);
}
var sec = toSeconds(2); // 7200
ES6(ES2015) ではまた、可変長引数を扱うことが可能となりました。下記の例では、a, b, c は第1, 第2, 第3引数を、rest は残りの引数の配列を受け取ります。
function func(a, b, c, ...rest) {
console.log(a, b, c, rest); 1, 2, 3, [4, 5, 6]
}
func(1, 2, 3, 4, 5, 6);
関数オブジェクトを作成します。下記のコードは上記のfunctionによる宣言と同等です。この方法はあまり利用されることはありません。
add = new Function("x", "y", "return(x+y)");
関数が要求する引数の個数を返します。
function goukei(a, b, c) { return(a + b + c); }
n = goukei.arity;
引数の配列。個数不定の引数を受け取る際に便利です。
function goukei() {
var ans = 0;
for (i = 0; i < goukei.arguments.length; i++) {
ans += goukei.arguments[i];
}
return(ans);
}
sum = goukei(1, 2, 3, 4, 5);
this は、関数が実行されるターゲットのオブジェクトを参照します。例えば、ボタン要素のイベントハンドラの場合、this はボタン要素を示します。
<input type="button" onclick="console.log(this)" value="OK">
この関数を呼び出した関数。将来の JavaScript のバージョンでは削除される予定らしいので使用しない方が無難です。
function func1(x, y) {
func2();
}
function func2() {
alert(func2.caller.arguments.caller);
}
JavaScript 1.3 で追加されたメソッドで、クラスの継承を実現します。詳細は「クラスを継承する」を参照してください。
ES6(ES2015) では、function の代わりに => を記述するアロー関数がサポートされました。Chrome 45, Firefox 22, Edge 12, Opera 32, Safari 10 以降で使用できます。Internet Explorer では使用できません。下記は同じ意味になります。
var func = function(arg1, arg2) { console.log(arg1, arg2); }
var func = (arg1, arg2) => { console.log(arg1, arg2); }
下記の様な書き方ができます。
// 一般的な書き方 (arg1, arg2) => { return arg1 + arg2; } // { } を省略すると return 文とみなされる (arg1, arg2) => arg1 + arg2 // { } 省略でオブジェクトを返却する場合は () でくくる (arg1, arg2) => ({"x": arg1, "y": arg2}) // 引数が1個の場合は ( ) を省略可能 arg1 => { return arg1 * 2; } // 引数が0個の場合は ( ) が必要 () => { return 10; } // 可変引数をサポート (x, y, z, ...rest) => { ... } // デフォルト引数をサポート (file, mode = "r") => { ... }
function と => で this の扱いが異なります。function の場合は関数が呼ばれる対象のオブジェクトとなるのに対し、=> の場合は関数を呼び出す側の this となります。
function MyClass() {
window.setTimeout(function() { console.log(this) }, 1000); // Window オブジェクト
window.setTimeout(() => { console.log(this) }, 1000); // MyClass オブジェクト
}
new MyClass();
arguments の扱いも異なります。function の場合は関数の引数を示しますが、=> の場合は関数を呼び出す側の引数を示します。
function func(a, b) {
var func1 = function(a, b) { console.log(arguments); }
func1(1, 2); // [1, 2]
var func2 = (a, b) => { console.log(arguments); }
func2(3, 4); // [5, 6]
}
func(5, 6);