【JS】アロー関数の解説と小ネタ
こんにちは!今日はES6(ES2015)で追加されたJavaScriptの仕様の一つ、アロー関数について 従来型の表記と比較して解説したいと思います。今更
今回は関数plus1を例として利用します。数字渡したら1足して返ってくる関数です
ES6以前
ES6以前のJavaScriptでは、このような表記が一般的だったんじゃないでしょうか?
var plus1 = function(n){
var answer = n + 1;
return answer;
}
非常にシンプルで分かりやすい!ですが、少し長いですね。 answerは省略しても...
var plus1 = function(n){
return n + 1;
}
やっぱりちょっと長いですね。色々つけ忘れそうです。()とか
今度は関数宣言にしてみます。 関数宣言ならもう少し分かりやすくなる...かな?
function plus1(n){
return n + 1;
}
多少短くなりましたが、まだまだあんまり... というかPHP臭がすごいですね :)
ES6以後
こんにちは。アロー関数です。 アロー関数はこれ=>を使って表記する記法で、ES6より使用可能になりました!
挙動は従来型の関数式および関数宣言とほぼ同じです(thisの解釈がちょっと違います)
アロー関数を使えばほらシンプルに...
var plus1 = (n) => {
return n + 1;
}
...あんまり変わらないと思った貴方。アロー関数の真骨頂はここからよ。
どんどん短くなるアロー関数
ES6で策定されたものの一つにconstがあります。constについては割愛しますが、 関数式のvarはほぼ全部constに変えてもokです。こんな風に
const plus1 = (n) => {
return n + 1;
}
次にセミコロンを取りましょう。JavaScriptの自動セミコロン挿入機能を活用します。
セミコロンの省略は機能としては昔から存在し、使用については賛否両論あるものの 近年は許されてきた感があるんじゃないかしら?私も省略する派です。
const plus1 = (n) => {
return n + 1
}
次に省略するのは()です。アロー関数は引数が1つの時()を省略可能です。 JavaScriptに限らず引数はなるべく1つになるように書くといい感じですね :)
const plus1 = n => {
return n + 1
}
最後に{}とreturnも取っちゃいましょう。アロー関数は{}が無い場合最初の式をreturnします。 今回はn + 1のみをreturnするので...
const plus1 = n => n + 1
綺麗...最初の4行がついに1行になりました。 この書き方は特に関数の処理がシンプルな時に有用です。関数型でもよく見る書き方ですね。
余談
改行できます。これ以外と知らない人いる
// OK
const plus1 = n =>
n + 1
ちなみにセミコロン自動省略時のreturn以降は改行できないです。 この2つが混ざるんですよねー
// NG
const plus1 = n => {
return
n + 1
}
また、戻り値がオブジェクトのときは()が必要です。 こっちは結構有名
// NG
const plus1 = n =>
{
answer: n + 1
}
// OK
const plus1 = n =>
({
answer: n + 1
})
最近関数式をletで書いてる人を見ました。
let plus1 = n => n + 1
letは再代入可能だからやや危険ですが、2文字短くなるのと 関数と定数でlet/constで分けられるのがメリットでしょうか? PythonやRubyだと関数と定数は 何もなし/def ですからねー 私は全部const派ですが、個人的にはとても面白いと思いました。
みんなもアロー関数、しよう!
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介