notitie

日々感じたことをメモ書き

JavaScriptのアロー関数を調べてみた

はじめに

タイトル通り、アロー関数とは何ぞやを解決するために調べてみた。一部TypeScriptで記述しております。

アロー関数

特徴

構文として「=>」を用いることから、見た目が矢に似ているということで「アロー」と呼ぶそう。アローで引数と関数本体をつなぐイメージ。

ES2015の新構文の一つ「アロー関数」とは、無名関数の省略記法です。無名関数ではない、いわゆる「関数宣言」には使うことができません ES2015(ES6)新構文:アロー関数(Arrow function)|もっこりJavaScript|ANALOGIC(アナロジック)

1.書き方がシンプルになる

//アロー関数(functionがなく、=>で表記される)
let add = (x1: number, x2: number): number => {
    return x1 + x2;
}
document.writeln(add(1, 3));

//アロー関数では一文の時は{}を省略できる
//一文の時は自動的に値を返すようになっているからreturn文もいらない
let add = (x1: number, x2: number): number => x1 + x2;
document.writeln(add(1, 3));

2.thisを束縛しない

//javascriptに置けるthisはわかりにくい場合もあるから、アロー関数でthisを使う方がわかりやすいメリットがある
document.getElementById('button1').addEventListener('click', function () {
    console.log(this)
}, false);

document.getElementById('button2').addEventListener('click', () => {
    console.log(this)
}, false);

参考記事

アロー関数 - JavaScript | MDN
ES2015(ES6)新構文:アロー関数(Arrow function)|もっこりJavaScript|ANALOGIC(アナロジック)