さくっと学ぶ!! ES2015(ES6)入門 〜Arrow Function 編〜
こんにちは。
メゾンマークでフロントエンドを担当している、k-taroです。
第2回目はArrow Functionをみていきます!
概要
関数宣言を新しい記法で宣言できるようになりました。
また、ArrowFunctionを使うことによって{}の省略や、thisの扱い方もかわります。
さっそくコードからみていきましょう
ES5
var func = function(msg) { console.log(msg); } func('Hi!!'); // Hi!!
これが
ES6
const func = (msg) => { console.log(msg); } func('Hi!!'); // Hi!!
こうかけます! 書き方はさほど変わりませんし、コードもすっきりしていい感じです。
解説
では省略記法とthisの扱い方の違いを解説します。
省略記法
まずはコードから。
ES5
var func = function(num) { return num * 2; } console.log(func(3)); // 6
上記のコードを例にとると、 引数が1つなので、()を省略してこうかけます。
ES6
const func = num => { return num * 2; }
更にreturnが1つしかない場合は、returnと{}を省略し、
const func = num => num * 2;
このようにかけます! So Simple!!!!
また上記の省略記法を活用すると、
const arr = [1,2,3].filter(num => num > 2); // [3]
このようにちょっとした関数が1行でかけるので、コードの見通しがとてもよくなります!
thisの扱い
ES5までのthisは呼び出し方によって決定されました。
const App = { name: 'App', sayName: function () { console.log(this.name); } }; App.sayName(); // 'App'
こんな感じ。
故にイベントバインド時にコールバック関数を定義するときにthisを使いたい場合はbindなどを使う必要があり、少し扱いづらいものでした。
そこでArrow Functionを使うと関数定義時にthisが決定されるため、thisの呼び出しで変わることがなくなります。
僕がよく使う場面としてはこんなときです
class App { constructor(name) { this.name = name; this.bindEvents(); } bindEvents() { $('#obj').on('click', () => { console.log(this.name) }); } }
この時にfunctionで定義してしまうと、thisは$(‘#obj’)をさしてしまうので、意図通りの挙動にはなりません。
まとめ
- 省略記法と、thisの扱い方が変わってコードの見通しがとてもよくなった!
- Arrow Functionを使うと従来の定義はほとんどしなくなる
次回はclassについて解説します! それでは!