[JS] コールバック関数

callback関数

関数を渡すことによって、その関数を受け取った側の関数内で実行することができる

function hello(callback) {
  console.log('hello' + callback);
}

function getName() {
  return 'Shun';
}

hello(getName);

これはどうなっているかというと

function hello(getName) {
  console.log('hello' + 'Shun');
}

function getName() {
  return 'Shun';
}

hello(getName);

まず最初のhelloの引数callbackにgetNameが入ります
次に２行目の+ callbackが+ 'Shun'に置換されます
そして結果は一緒です

---

関数として取り扱う

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

function getFirstName() {
  return 'Sato';
}

hello(getFirstName);

---

変数として取り扱う

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

const getFirstName = function () {
  return 'Sato';
}

hello(getFirstName);

---

無名関数をそのままcallback関数として渡す

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

hello(function () {
  return 'Sato';
});

---

アロー関数をcallback関数として渡す

function hello(callback) {
  console.log(callback);
  console.log('hello' + callback());
}

function getName() {
  return 'Shun';
}

hello(() => 'Sato');

---

引数２つ

function hello(callback, lastname) {
  console.log(callback);
  console.log('hello' + callback(lastname));
}

function getName() {
  return 'Shun';
}

hello(function(name) {
  return 'Sato' + name;
}, 'Shun');

無名関数をcallback関数として渡しています
引数nameはどこから来てるか？　lastnameの値が入ります

---

計算

function doSomething(a, b, callback) {
  const result = callback(a, b);
  console.log(result);
}

function multiply(a, b) {
  return a * b;
}

function plus(a, b) {
  return a + b;
}

doSomething(3, 4, multiply); 
doSomething(11, 4, plus); 

ループ処理

const arry = [1,2,3,4,5];

function forEach(ary, callback) {
  for(let i = 0; i < ary.length; i++) {
    callback(ary[i]);
  }
}

function log(val) {
  console.log(val);
}

forEach(arry, log);

---

const arry = [1,2,3,4,5];

function forEach(ary, callback) {
  for(let i = 0; i < ary.length; i++) {
    callback(ary[i]);
  }
}

function log(val) {
  console.log(val);
}

function double(val) {
  val = val * 2;
  log(val);
}

forEach(arry, double);