【JS学習その⑥】関数とオブジェクト、そしてコールバック関数

JS学習シリーズの目的

このシリーズは、私ジャックが学んだJavaScriptのメカニズムについてアウトプットも兼ねて、
皆さんと知識や理解を共有するためのものです。
(理解に間違いがあればご指摘いただけると幸いです)

関数とオブジェクトの関係

「関数は実行可能なオブジェクトである」
まず、非常に大切なコンセプトとして、JavaScriptにおいて関数というのは、あくまでオブジェクトであり、
ただ実行可能である、というのが他のオブジェクトと異なる点です。
それ以外は、通常のオブジェクトと同じ挙動を取ります。

関数がオブジェクトであることの証明

例えば、次のような関数を書きます

main.js

function a() {
    console.log('hello');
}

a.prop = 0;
a.method = function() {
    console.log('method');
}

a();
a.method();
console.log(a.prop);

↓実行をConsoleで見た結果

関数に対して、オブジェクトに使用するようにプロパティの追加とメソッドの追加を行うと、↑の画像のように、追加できています。
これで関数はあくまで実行可能なオブジェクトであることがお分かりかと思います。

コールバック関数とは

「他の関数に引数として渡される関数」

main.js

function hello() {
    console.log('hello');
}

function fn(cb) {
    cb();
}

fn(hello); /*hello*/

↑のコードでは、

1.fn()関数の引数としてhelloというオブジェクトcbを渡す
2.fn()関数内でhelloという実行可能なオブジェクトcb()を実行する

という流れになっています。

おまけ

引数・コールバック関数の補足として
1.JavaScriptの関数というのは、宣言する時に設定する仮引数と呼び出す時の実引数の数は一致している必要はない。
2.コールバック関数は、無名関数で定義することもできる。

main.js

function hello(name) {
    console.log('hello ' + name);
}

function bye() {
    console.log('bye');
}

function fn(cb) {
    cb('Tom');
}

fn(hello); /*hello Tom*/
fn(bye); /*bye*/
fn(function(name) {
    console.log('hello ' + name);
})
/*hello Tom*/

したがって、↑のコードのように書くこともできます。

まとめ

いかがでしたでしょうか。
関数とオブジェクトの関係、そしてコールバック関数はJavaScriptにおいてとても重要なのでしっかり理解しておきましょう！