日別アーカイブ: 2021年8月23日

JavaScript学習のまとめ2.5(コールバック関数とループ処理)

2から続きます。

コールバック関数とは?

引数に渡す関数をcallback関数という。

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
  <h1>JavaScriptの基礎</h1>
   <script src="main.js"></script>
</body>
</html>

main.jsの記述

// いつもの基本的な書き方
// function hello(name) {
// console.log("hello " + name);
// }
// hello("Tanaka Tarou");

// callbackに関数getnameが渡る(戻り値'Tanaka Tarou')
function hello(callback, lastname) {
// 関数を実行するためcallback()としている
 console.log('hello ' + callback());
 }
// 引数に渡す関数をcallback関数という
 function getFirstName() {
 return 'Tanaka';
}
 function getName() {
 return 'Tanaka Tarou';
}

// 関数を渡すと戻り値'Tanaka Tarou'が渡る
 hello(getFirstName);
 hello(getName); 
// コールバックに引数を渡したい場合、lastnameにAkinaが渡ってくる
function hello2(callback, lastname) {
// 関数を実行するためcallback()としている
// callback(第一引数)の中身がこれ
console.log(callback)
console.log(lastname)
console.log(callback(lastname))
console.log(callback(callback))
console.log('hello ' + callback(lastname));
}
// 無名関数
hello2(function(name) {
return 'suzutuki ' + name;
}, 'Akina');

// アロー関数の記法に直すと(functionと{}とreturnを省略)
// hello(() => 'suzutuki');

function doSomething(a, b, callback) {
// 結果をコールバック関数に渡す
const result = callback(a, b);
console.log(result);
}

function plus(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 処理結果を変えることができる
doSomething(2, 3, plus);
doSomething(2, 4, multiply);

続きを読む