【コールバック関数】JavaScriptのsetTimeoutに第３引数を設定して出力する方法

今回の記事は上記のような疑問やお悩みに役立つ内容となっております。

ぶっちゃけ、

コールバック関数ってややこしいですよね。

初心者の頃は中々その構造が理解できずに躓く人も多いのではないでしょうか。

setTimeoutはコールバック関数を使用した代表的なJavaScriptの組み込み関数(元から登録されている関数のこと)の一つですが、setTimeoutの使い方を併せて覚えておくとコールバック関数に関する理解がグッと深まるかもしれません。

まずは「さっさと表題の件を教えろー！」という声が聞こえてきそうなので早速見ていきましょう。

JavaScriptのsetTimeoutに第３引数を設定して出力する方法

では早速表題の件です。

以下のようにコードを書けばOK。

function hello(word){
    console.log(word);
    }
    
setTimeout(hello,3000,'こんにちは');

このように記載することでhello(word)の”word”にsetTImeoutの第三引数である「こんにちは」が渡り、３秒後にこんにちはと出力されるようになります。

よりスッキリまとめて書いてみる

上記の内容をよりスッキリとまとめると以下のようなコードになります。

setTimeout(function(hello){
    console.log(hello);
},3000,"こんにちは");

上記でもsetTimeoutの第三引数に文字列を入力して、「こんにちは」が仮引数であるhelloに渡り、そこからconsole.logで出力しているという構造です。

アロー関数に書き換えてみる

ではアロー関数で上記の内容を書き換えてみましょう。

setTimeout(hello =>console.log(hello),3000,"こんにちは");

アロー関数に書き換えればここまで短く事もできます。

一行で書くことが出来るのもアロー関数の魅力ですね。

setTImeoutの使い方

setTimeoutを使うことで「何秒後に関数を実行するか」を指定することが出来ます。

基本的には第１引数に「呼び出したい関数」を指定し、第２引数に「何秒後に呼び出すか」を指定します。

例のコードを見てみましょう。

setTimeout(function(){
//処理内容を記述
console.log("こんにちは");
},3000);//３秒後に実行する

基本的には上記のような書き方となります。

setTimeoutをアロー関数で書いてみる

では上記の内容をアロー関数で書いてみましょう。

setTimeout(()=>{
//処理内容を記述
console.log("こんにちは");
},3000);//３秒後に実行する

setTimeoutで無名関数を使うとthisのスコープが変わる場合があるため、プロパティへの参照が上手くいかないこともあります。

そのため、thisのスコープが外れないアロー関数と組み合わせて使うと良いと思います。

まとめ

いかがでしたでしょうか。

setTImeoutは通常第２引数までしか使いますが、第３引数にコールバック関数を渡すことでよりスッキリと分かりやすいコードを書くことが出来ます。

コールバック関数もsetTImeoutもJavaScriptでは非常によく使いますので、是非使い方を覚えておきましょう。

というわけで本日の記事は以上です( ͡° ͜ʖ ͡°)