JavaScript文法(5) 関数の応用1

この記事の内容

• 無名関数とは何か
• 即時関数とは何か

目次

(1) 学習環境の構築と基本的な書き方
(2) 変数とデータ型
(3) 演算子および配列
(4) 制御構文と関数
(5) 関数の応用1 <-- この記事の内容
(6) 関数の応用2
(7) オブジェクトの基礎
(8) JavaScriptのオブジェクト指向プログラミング1 概要
(9) JavaScriptのオブジェクト指向プログラミング2 オブジェクトの作り方と継承
(10) JavaScriptのオブジェクト指向プログラミング3 多態性
(11) JavaScriptのオブジェクト指向プログラミング4 カプセル化
(12) ES6の新機能について

関数もオブジェクト

配列が Array 型のオブジェクト、連想配列が Object 型のオブジェクトだったように、JavaScriptの関数も、実は Function 型のオブジェクトになる。
関数がオブジェクトであることの利点のひとつに、関数の定義を変数に格納できるというものがある。

bs05_01.js

function getOne() {
  return 1;
}

// 関数名の後ろに括弧は不要。
// 括弧をつけると実行結果の代入になる。
var f = getOne;

console.log(f());             // f() と書くことで getOne関数が実行され、1 と表示される

関数式と匿名関数（無名関数）

bs05_01.jsは、つまり、getOne関数に f という別名をつけたことになる。こうするなら、わざわざ getOne という関数名をつける必要は無いわけで、このようにも記述できる。

bs05_02.js

var f = function() {
  return 1;
};

console.log(f());    // 1 と表示される

上の例は引数なしの関数で示しているが、引数があっても同じである。

bs05_03.js

var add = function(x, y) {
  return x + y;
};

console.log(add(3, 2));    // 5 と表示される

このように、関数の定義を変数に代入する記述方法を関数式と呼び、関数名をつけないで定義している関数のことを匿名関数（無名関数）と呼ぶ。まとまった複数の処理を定義したいが、再利用を考える必要がない（記述する場所でしか利用しない）場合は、匿名関数を利用すると、余計なことを考える必要がないので便利。

※注意：関数式で関数を定義する場合は、その関数の呼び出しをする際、定義した箇所よりも下に記述する。定義より前で呼び出すと「その関数は見つからない」という内容のエラーになる。

bs05_04.js

console.log(subt(3, 2));     // ここでsubtを実行しようとすると「subtが見つからない」エラーになる

var subt = function(x, y) {
  return x - y;
};

即時関数

通常の関数の定義でも関数式による定義でも、必ず関数を呼び出さないと定義した内容が実行されない。ひとまとまりの処理を定義して、さらに定義と同時に実行するための記述方法を即時関数と呼ぶ。即時関数は、無名関数の利用例のひとつである。

bs05_05.js

// この記述だけで こんにちは、田中さん！ と表示される
(function(name) {
  console.log("こんにちは、" + name + "さん！");
})("田中");

即時関数の書き方は、上記のように、関数の定義を括弧で囲み、更にその直後に括弧をつけ、その中に引数に与えたい値を指定する（引数がなければ空の括弧で良い）。
下の例のように、即時関数の実行結果を変数に格納するような記述方法も可能。

bs05_06.js

var sum = (function(a, b) {
  return a + b;
})(3, 2);

console.log(sum);            // 5 と表示される

次回予告

関数の応用　その2