jQueryのeachメソッドをアロー関数で書く

キッカケ

each文を調べてみるとES5の書き方はたくさん出て来るけれど、ES6のアロー関数を使用した書き方がなかなか出てこなかったので試しに書いてみました。

ES5までのeach書き方

ES5.js

$('li').each(function(index, element){
  console.log(index + ':' + $(element).text());
})

アロー関数とは

ES6にて追加された関数宣言方法。

ES5 従来の関数宣言

ES5

function hoge(arg1, arg2) {
  console.log(arg1+ ':' + arg2);
}

ES6 アロー関数

ES6

let hoge = (arg1, arg2) => {
  console.log(arg1+ ':' + arg2);
}

eachのfunctionをアロー関数に置き換える

アロー関数each

$('li').each((index, element) => {
  console.log(index + ':' + $(element).text());
})

積極的にアロー関数を使っていこう。