【JavaScript】関数とオブジェクト② コールバック関数

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.関数とオブジェクト

関数は実行可能なオブジェクトである
この点が他のオブジェクトと異なる

下記コードで確認すると

// helloと出力される関数を用意
function a() {
  console.log("hello");
}
// propには0を、methodでは「メソッド」と出力されるように設定
a.prop = 0;
a.method = function(){
  console.log("メソッド")
}

// 実行すると下記のようにそれぞれ出力される
// hello
a();
// メソッド
a.method();
// 0
console.log(a.prop);

// このように関数宣言によって宣言した関数を
// dot記法を使ってプロパティやメソッドが使用できる
// ()をつけると関数が実行される

###2.コールバック関数

• 他の関数の引数として渡される関数
• 再利用性が高い

####使い方

// コールバック関数
// 関数を定義
function hello(){
  console.log("hello")
}
// helloが渡ってくる関数を定義
function fn(cb){
  cb();
}
// 実行してhelloと出力される
fn(hello);
// オブジェクトだからhelloを渡せる
// 上記のfn(cb)にhelloの値が渡ってくることになる
// もちろん下記のように定義すてばconsoleでbyeが呼ばれる
function bye(){
  console.log("bye");
}
fn(bye)

// 上記のようなhelloやbyeのように渡された関数をコールバック関数と呼び、
// fn(cb)の内部で実行されている

####コールバック関数が実行されるときに引数がある場合

// 引数に名前を設定する
// helloの引数にnameを設定
function hello(name){
  // コンソールにhello + nameが出力される
  console.log("hello" + name);
}

function bye(){
  console.log("bye")
}

function fn(cb){
  // 引数に呼び出される名前を設定
  cb("Tom");
}

fn(hello);
fn(bye);

// 宣言する際の実引数と実行する際の仮引数が一致している必要はない
// だからbyeに影響を受けていない


// 無名関数でも定義が可能
// helloと実行される
fn(function (){
  console.log("hello");
})
// 引数を入れて実行することも可能
fn(function(name){
  console.log("bye" + name);
})

####よく使われるコールバック関数の実例

// setTimeoutはJavascript側で用意されているWebAPIの１つ
setTimeout(hello, 2000);
// ここでは実引数がないため「hello undefined」と出力される
// 2000はミリ秒数　コンソールに２秒遅れて出力される

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム