OHTA412

setTimeout()の第1引数に関数を渡すとき()がいらない理由

setTimeout()は、指定したミリ秒後に指定した関数を実行してくれるJavaScriptのWeb APIです。第1引数に実行する関数を指定し、第2引数に関数実行を遅延させるミリ秒を指定します。

function hoge(){
    // 関数の処理
}

setTimeout(hoge, 1000); // 1秒後にhogeという名前の関数が実行される

このとき第1引数に指定する関数は、関数名のみ記述して「()」は書きません。JavaScriptの関数の性質を知れば、なぜ「()」がいらないのか理解できます。

Web APIとは?
Web APIとは、プログラミング言語がデフォルトで用意してくれている機能や仕組みのことです。複雑な機能を簡単に使うことができます。

関数は実行可能なオブジェクト

オブジェクトとは情報(プロパティ)や機能(メソッド)を1つにまとめたもので、JavaScriptでは下記コードのように表現できます。

// taroという変数にオブジェクトを入れた例
let taro = {
    name: '太郎',
    age: 25,
    sayHello: function(){
        console.log('こんにちは' + this.name + 'です。');
    },
};

nameプロパティやageプロパティやsayHelloメソッドを持つオブジェクトの例です。

JavaScriptの関数も実態はオブジェクトで、他のオブジェクトとの違いは実行できるかどうかです。実行するときは、関数名の後ろに「()」を付けて記述します。

関数もオブジェクトなので、プロパティやメソッドを追加することができます。

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

a(); // 「a」と表示される

// 関数aにプロパティbとメソッドcを追加
a.b = 'b';
a.c = function (){
    console.log('c');
}

console.log(a.b); // 「b」と表示される
a.c(); // 「c」と表示される

1~3行目でコンソールにaを表示するaという関数を定義しています。5行目で実行すると、コンソールにaと表示されます。

その関数aに8行目でプロパティbを定義しています。9~11行目でメソッドcを定義しています。そして、それぞれを呼び出すことも可能です。このように、関数はオブジェクトとしての挙動をとります。

コールバック関数

JavaScriptの関数はオブジェクトなので、別の関数の引数に指定することができます。この引数として渡される関数のことをコールバック関数といいます。

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

function b(fn){
    fn();
}

b(a); // 「a」と表示される

コールバック関数の例です。

1~3行目でコンソールにaを表示するaという関数を定義しています。5~7行目で定義している関数bは、「引数で受け取った関数」を実行する関数です。

9行目で関数aをコールバック関数として、引数で関数bに渡しています。引数として渡された関数aは、6行目で実行されます。

JavaScriptの関数がオブジェクトなので、このように関数を受け渡すことができます。

setTimeout()の第1引数にはコールバック関数を入れる

setTimeout()の第1引数には、コールバック関数を入れます。第2引数で指定したミリ秒後に、コールバック関数を実行する仕組みです。

第1引数に入れる関数は、オブジェクトとしてのデータを渡しているだけです。実行処理は、然るべきタイミングでsetTimeout()が行ってくれます。そのため、setTimeout()の第1引数に関数を渡すとき「()」をつける必要はありません。