【=>って何?】アロー関数 (arrow function)【JavaScript】

var func = () => {}のような書き方をみたことがあると思います。

アロー関数はES6(ES2015)で追加された新しい関数の書き方です。

通常関数を書くときはfunctionを利用すると思いますが、アロー関数はこれを簡略化し、短い記述で関数を書くことができます、便利です。

特徴としては、アロー関数はthisを束縛します

Reactなどで使用する機会が多くなってきたアロー関数はぜひ覚えておきましょう。

 

基本構文

早速基本的な構文を見ていきます。

// 一般的な関数
var func = function(str) {
  console.log(str);
}

// アロー関数
var func = (str) => {
  console.log(str);
}

// 引数が1つの場合省略可能です
var func = str => {
  console.log(str);
}

// 関数が1つの文のみであれば{}も省略可能です
var func = str => console.log(str);

// 引数が複数の場合
var func = (s1, s2, s3) => {
  console.log(s1, s2, s3);
}

// 引数がない場合()は省略不可です
var func = () => {
  console.log('hello');
}

// デフォルト引数にも対応しています
var func = (str = 'hello') => {
  console.log(str);
}

thisを束縛する

従来は、関数がそれぞれ独自のthisを定義していました。

function Person() {
  // Person() のコンストラクタは、自分のインスタンスを `this` として定義する。
  this.age = 0;

  setInterval(function growUp() {
    // 非 strict モードでは、growUp() 関数は `this` をグローバルオブジェクトとして定義する。
    // Person() コンストラクタが定義した `this` とは違う。
    this.age++;
  }, 1000);
}

var p = new Person();

これだと、growUp関数の中ではPersonの最初に定義したthisは使えず、以下のようにthisを別の変数に入れることで同じスコープ内で参照できるようにするか、束縛関数.bind(this)を使うことで利用できるようにしていました。

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // このコールバックは、期待されるオブジェクトの値を
    // `that` 変数で参照する。
    that.age++;
  }, 1000);
}

しかし、アロー関数であればthisを束縛するため、アロー関数内のthisは関数の外のthisを参照します。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| は person オブジェクトを適切に参照します。
  }, 1000);
}

var p = new Person();

これにより、アロー関数はより使いやすい記述となっています。

 

アロー関数 – JavaScript | MDN

 

JavaScriptに慣れてきたらぜひReactにもチャレンジしてみてください!

初めての人にオススメしたいReactの勉強法【初心者向け】