ES6で新たに登場したアロー関数をあまり理解してませんでしたが、ちゃんと勉強するととても簡単に理解することができました。
そしてコールバックという言葉に恐怖を抱いていたので、それも調べてみると意外と簡単だとわかりました。
忘れないようにアウトプットしておきます。
間違いがあったらご指摘いただければと思います。
アロー関数とは
アロー関数はES6で導入された関数の定義方法の一つです。ES5までは関数を定義する場合はこんなふうに定義していました。
var like = function() {
console.log("I like it!");
};
like();
// => I like it!
ES6では、スペルが長くてタイポもしやすいfunction()と書くよりも、便利なアロー関数を使うことが多くなりました。
const like = () => {
console.log("I like it!");
};
like();
// => I like it!
アロー関数を使うとfunction()の部分が() =>だけでよくなります。
はじめはちょっと戸惑いますが、すぐに慣れます。
[ちょっと寄り道] var, let, constについて
上記の例でアロー関数の定義に使用したconstはES6からの定数定義の仕様です。
ES6ではvar、let、constを使うことができ、ES5まではvarのみを使うことができました。
varは変数の定義に使い、同じ変数名を再定義してもエラーを出すことはありません。
letも変数の定義に使いますが、同じ変数名を定義するとエラーを出します。
constは定数の定義に使い、一度定義した定数の値は再代入することができません。
本稿ではくわしく説明しませんが、これらを使い分けることにより、思いも寄らない再代入や再定義を防ぎ、バグを予防することができます。
関数を再定義してしまうと思いも寄らないバグが発生してしまうことが多いので、関数の定義には基本的にはconstを使うのが良いでしょう。
関数に引数を渡して汎用的にする
先程のlike()関数は、出力する文字列がI like it!と固定されていましたが、
__it__の部分を__かんぱち__とか__山登り__とかにしたくなりました。
そこで、like関数に引数を渡せるようにしましょう。
こんな感じ。
const like = (str) => {
console.log(`I like ${str}!`);
};
like("かんぱち");
// => I like かんぱち!
関数の定義でstrという引数を渡せるようにしました（(str) =>の部分）。
ところで、この引数は、この例では文字列を渡すようにしましたが、それ以外に数値や関数を渡すこともできます。
コールバック関数とは
引数に数値を渡すのはわかりやすいですね。先程の文字列の代わりに数値を渡すだけです。渡された数値を使って計算でもするイメージですね。
では、関数を引数として渡すっていうのはどういうことでしょうか？ちょっとイメージしにくいですね。
以下の例では、
-
like()という関数を定義する -
person()という関数を定義する -
person()関数の引数にlike()関数を渡す
ということをしてみます。
わかりやすくするため、一旦like()は固定文字列バージョンに戻します。
const like = () => {
console.log("I like はまち!");
}
const person = (func) => {
console.log("My name is Naoyuk");
func();
}
person(like);
// => My name is Naoyuk
// => I like はまち!
person関数の引数にlike関数を渡し、person関数内でlike関数をさらに呼び出しています。
この時、person関数に渡されたlike関数のことをコールバック関数と言います。
like関数は単体でも呼び出せますが、その場合はコールバック関数とは言いません。
コールバック関数とは、ある関数の引数として渡された関数のことを指します。
以上、アロー関数、コールバック関数はそんなに怖くないよ、という内容でした。（コールバック関数に関しては未だにちょっと恐怖心が残っていますが。）