【JavaScript ~コールバック関数~】勉強メモ⑧

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

コールバック関数

• そもそも関数とは？

　関数とは、「いくつかの処理をまとめたもの」、定義の仕方として「function 関数名( )」と書き、
　その後ろの中括弧「{ }」の中にまとめたい処理を書くことで、関数を定義することが出来る。
　また、関数を呼び出すときに一緒に値を渡すことで、引数に追加情報が与えられ、
　関数の中でその値を利用することが出来る。
　【JavaScript ~関数について~】勉強メモ③を見ればもう少し理解出来るかも。

• 関数呼び出しの際に渡される引数の種類

　function 関数名(引数); の引数の部分には、数値はもちろん、文字列や
　trueとfalse（真偽値）が渡される。
　そして、JavaScriptでは引数に関数を渡すことが出来る。
　その引数に渡される関数をコールバック関数と呼ぶ。

• コールバック関数

　コールバック関数とは、引数に渡される関数のこと。

書き方

const 定数名 = (引数名) => {
  // 処理内容を記載
};

定数名（関数名）；
     // 関数(名)を引数（名）に渡す

　関数は、関数名の後ろに( )をつけると呼び出され、( )をつけなければ関数そのものを指す。
　よって、呼び出し方と渡し方で書き方が異なる点に注意。

例

const name = () => {
  console.log("Aki");
};

const call = (callback) => {
  console.log("元気？？");
  // 引数に渡したcallbackを呼び出し
  callback();
};

// 関数nameを引数に渡して関数callを実行
call(name);

出力結果

元気？？
Aki

コールバック関数を直接定義

• 引数で関数を定義した場合

　流れ、①引数で関数を定義して関数callを呼び出す
　　　　②関数をcallbackに代入

例

const call = (callback) => {
  console.log("元気？？");
  // 引数に渡したcallbackを呼び出し
  callback();
};

// 関数nameを引数に渡して関数callを実行
call(() => {
  console.log("Aki");
});

出力結果

元気？？
Aki

コールバック関数の引数

• 引数を渡す

例

const call = (callback) => {
  callback("Aki");
};

// 関数callの引数の中で引数を取る関数を追加
call((name) => {
  console.log(name);
});

出力結果

Aki

• 複数の引数を渡す

例

const call = (callback) => {
  callback("Aki", 20);
};

// 関数callの引数の中で2つの引数を取る関数を追加
call((name, age) => {
  console.log(`${name}は${age}歳です。`);
});

出力結果

Akiは２０歳です。

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12