JavaScript 2019.05.30

javascriptのfunction式を新しい形で記述できるアロー関数に慣れる

Tags： ES6,javascrpt

ES6（ES2015）から新たに使えるアロー関数ですが、慣れるまでは少しわかりにくいと感じるかと思います。アロー関数は内容によって書き方も変えることができ、しっかりと覚えておかないと混乱してしまいます。今回はそんなアロー関数についてまとめていきたいと思います。

省略記法でコーディングのスピードアップ

アロー関数のメリットはやはり省略して記述できることではないでしょうか。これまでの関数とアロー関数を比べると具体的には下記のような違いがあります。

const func = function(argument) {
 alert( 'これまでの関数' );
}

const func = (argument) => {
 alert( '新しいアロー関数' );
}

「function」の記述を省略でき、その代わりに「=>」で表現できるのが、見た目で大きく違うポイントですね。

( 引数... ) => { 関数 }

では実際のコード例でアロー関数への変換を見ていきます。アロー関数は条件によってさらに短く簡潔に書くこともできます。まずはこれまでのfunction式になります。

const taxIn = 1.08
const calculation = function(price) {
 return price * taxIn;
}
console.log( calculation('500') )

1. アロー関数に変換

先述の通りアロー関数では、functionを省略し、代わりに=>の記号で表記します。これでも少しスッキリしますね。

const taxIn = 1.08
const calculation = (price) => {
 return price * taxIn;
}
console.log( calculation('500') )

2. returnと波括弧を省略

さらにアロー関数では関数の内容がreturn文だけ、つまり返り値だけの場合はreturnの表記と波括弧を省略することができます。より簡潔になりました。

const taxIn = 1.08
const calculation = (price) => price * taxIn; 
console.log( calculation('500') )

3. 引数の丸括弧を省略

その上、引数が一つしかない場合は引数を囲む丸括弧を省略できます。かなり短くなりました、慣れていないと逆にわかりにくいかもしれませんね。

const taxIn = 1.08
const calculation = price => price * taxIn; 
console.log( calculation('500') )

また、アロー関数における注意点としては、thisを束縛しない点がこれまでのfunction式と異なる点や、IEなどのレガシーブラウザで使用する場合にはそのままでは認識されないのでBabelなどでトランスパイルする必要があります。これらの点に気をつけていれば、とても簡潔にコードが書けるようになるので、ぜひ積極的に取り入れていき慣れていきたいですね。

（参考にさせて頂いたサイト）
アロー関数 – JavaScript | MDN