JavaScriptのアロー関数の書き方について簡単にまとめました。
はじめに
アロー関数の前に、まず「関数」について理解することが重要です。
function文による関数宣言とは
functionを用いて関数を宣言（定義）する方法のこと。
「関数名」を記述することで、宣言した関数を実行（呼び出し）します。
//function（関数）の宣言
function greeting(){
console.log( 'Hello!' );
}
//function（関数）の実行
greeting();関数式
変数（or定数）に関数を代入する方法のこと。
変数（or定数）を実行する（呼び出す）ことで間接的に関数を利用します。
//function（関数）の代入
let greeting = function(){
console.log( 'Hello!' );
}
//function（関数）の実行
greeting();
関数式は、変数（or定数）に関数のコードを直接べた書きしています。
直接べた書きしているため関数式は関数リテラルとも呼ばれます。
アロー関数とは
名前の通りarrow（矢印）を使って記述する関数のことです。
関数式（関数リテラル）を簡易的に書くことができます。
基本的な書き方
function文（関数式）で書いても、アロー関数で書いても出来ることは変わりません。
アロー関数の場合は、functionを使用せずに「=>」を使用します。
// function文（関数式）の場合
const twice = function(num) {
return num * 2;
}
// アロー関数の場合
const twice = (num) => {
return num * 2;
}
console.log(twice(2));
// ※実行結果(どちらも同じ結果)
// 4アロー関数をさらに省略
アロー関数では、さらに簡潔に書ける場合もあります。
1行で書ける場合
関数の本体が一文だけの場合 {…} を省略できます。
その際、return命令も省略できます。
// 省略前
const twice = (num) => {
return num * 2;
}
// 省略後
const twice = (num) => num * 2; 引数を括る（）が省略できる場合
引数が1個だけの場合は () が省略できます。
// 省略前
const twice = (num) => num * 2;
// 省略後
const twice = num => num * 2;引数が1個だけではない場合は () が省略できません。
引数がない場合も () が必要です。
// OK例
const twice = (x, y) => (x + y) * 2; // 引数2個
const greeting = () => console.log('Hello'); // 引数0個
// NG例
const twice = x, y => (x + y) * 2; // 引数2個
const greeting = => console.log('Hello'); // 引数0個アロー関数の特徴
thisの固定化
function文（関数式）とアロー関数では、thisの扱いが異なります。
function文（関数式）の場合：
・呼び出し元のオブジェクトを参照し、状況によってthisの意味が変化する。
アロー関数の場合：
・関数が定義された時点でthisが固定化される（変化しない）。
無名関数のthisは、呼び出し元（宣言元）のオブジェクトが参照されるため、thisの内容も変化します。
window.animal = 'dog'; //グローバル変数としてanimalを定義
let find = function() {
console.log(this.animal);
};
find();
// ※実行結果
// 'dog'
let gate1 = {
animal: 'tiger',
func : find
};
let gate2 = {
animal: 'elephant',
func : find
};
gate1.func();
// ※実行結果
// 'tiger'
gate2.func();
// ※実行結果
// 'elephant'
function文（無名関数）をアロー関数に変えると、thisの内容が固定されます（変化しません）。このように、アロー関数では、関数が定義された時点でthisが固定されています。
window.animal = 'dog'; //グローバル変数としてanimalを定義
let find = () => {
console.log(this.animal);
};
find();
// ※実行結果
// 'dog'
let gate1 = {
animal: 'tiger',
func : find
};
let gate2 = {
animal: 'elephant',
func : find
};
gate1.func();
// ※実行結果
// 'dog'
gate2.func();
// ※実行結果
// 'dog'開発内容によっては、thisの内容を変化させたい場合もあれば、固定させたい場合もあると思います。そのため、１つの方法に固執せず、上手く使い分けると良いと思います。
コンストラクタを生成できない
アロー関数ではコンストラクタを生成すること（持つこと）ができません。
new演算子を使ってコンストラクタ「Group」（オブジェクト）を生成し、thisを使ってインスタンスのプロパティを設定できます。
function Group( id, name ) {
this.id = id;
this.name = name;
}
let group = new Group( 2, '山田' );
console.log(group);
// ※実行結果
// {
// "id" : 2,
// "name": '山田'
// }インスタンス化するためには、new演算子を利用します。
アロー関数ではコンストラクタを作成することができません。
「コンストラクタがありませんよ（Uncaught TypeError: XXX is not a constructor）」というエラーが表示されます。
let Group = ( id, name ) => {
this.id = id;
this.name = name;
}
let getGroup = new Group( 2, '山田' );
console.log(getGroup);
// ※実行結果
// Uncaught TypeError: Group is not a constructor
