marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

さくっと学ぶ!! ES2015(ES6)入門 〜Arrow Function 編〜

f:id:marctech:20170522163019p:plainこんにちは。 メゾンマークでフロントエンドを担当している、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について解説します! それでは!