LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-03

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は20歳です。


過去投稿記事

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0