ECMA Script6（JavaScript）のアロー関数（=>）

ECMA Script6（JavaScript）のアロー関数（=>）

ECMA Script6（JavaScript）のアロー関数という関数があります。

普通の関数はfunctionを使用します。

function method(x, y) {
  return x + y;
}

アロー関数は、=>を使用します。以下、引数がある場合の記述方法です。

(x, y) => {
  return x + y;
}

と記述します。引数がない場合は、()と記述します。この括弧は省略できません。

() => {
  console.log("test");
}

アロー関数のthis

アロー関数のthisは特殊です。アロー関数式で宣言された関数は、宣言された時点で、thisを確定（＝束縛）させます。

以下、functionで宣言した関数とアロー関数で宣言した関数の使用例です。

var param = 'global';

function printParam1(){
  console.log(this.param);
}
let printParam2 = () => {
  console.log(this.param);
}

let obj = {
  param: 'block',
  func : printParam1,
  arrow: printParam2
}

obj.func();
obj.arrow();

結果は以下のようになります。

block
global

複雑な記述方法

アロー関数を返す関数は、以下のようにコーディングします。

function a() {
  return (payload) => {
    payload.data1 = 'aaa';
    payload.data2 = 'bbb';
  }
}

console.log(a());
console.log(typeof a() === 'function');

結果は以下のように出力されます。

(payload) => { payload.data1 = 'aaa'; payload.data2 = 'bbb'; }
true

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^