[JS] コールバック関数

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

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

function getName() {
  return 'Shun';
}

hello(getName);
```

[![Image from Gyazo](https://i.gyazo.com/e297e1c744bb981521e860b01f704dce.png)](https://gyazo.com/e297e1c744bb981521e860b01f704dce)

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

```
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);
```

[![Image from Gyazo](https://i.gyazo.com/c66aecfb4c0d0e8342e17a9d20d2ddd5.png)](https://gyazo.com/c66aecfb4c0d0e8342e17a9d20d2ddd5)

---
変数として取り扱う

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

function getName() {
  return 'Shun';
}

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

hello(getFirstName);
```

[![Image from Gyazo](https://i.gyazo.com/0d212e8e41ab3f73a7c05233addaffcc.png)](https://gyazo.com/0d212e8e41ab3f73a7c05233addaffcc)

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

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

function getName() {
  return 'Shun';
}

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

[![Image from Gyazo](https://i.gyazo.com/0d212e8e41ab3f73a7c05233addaffcc.png)](https://gyazo.com/0d212e8e41ab3f73a7c05233addaffcc)

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

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

function getName() {
  return 'Shun';
}

hello(() => 'Sato');
```

[![Image from Gyazo](https://i.gyazo.com/1043fa17be7decb2fd254525d287b3f3.png)](https://gyazo.com/1043fa17be7decb2fd254525d287b3f3)

---
引数２つ

```
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の値が入ります

[![Image from Gyazo](https://i.gyazo.com/ddd9dc49f63422c4c288b0e60386e6d2.png)](https://gyazo.com/ddd9dc49f63422c4c288b0e60386e6d2)

---
計算

```
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); 
```

[![Image from Gyazo](https://i.gyazo.com/c39e124fdf761ba655bf9941bb5e0308.png)](https://gyazo.com/c39e124fdf761ba655bf9941bb5e0308)

ループ処理
---


```
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);
```

[![Image from Gyazo](https://i.gyazo.com/e54467bea873166520a938f84028afc9.png)](https://gyazo.com/e54467bea873166520a938f84028afc9)

---

```
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);
```

[![Image from Gyazo](https://i.gyazo.com/2764482c52b54e44972855d67f5c63b3.png)](https://gyazo.com/2764482c52b54e44972855d67f5c63b3)