【JavaScript】アロー関数についてまとめてみた。

本記事の目次

JavaScriptのアロー関数とは
アロー関数の基本構文
アロー関数と通常の関数との違い
まとめ

JavaScriptのアロー関数とは

アロー関数とは、ES6から新しく導入された関数記法です。

アロー関数では、「=（イコール）」と「>（大なり）」を組み合わせた「=>」（矢印のようなもの）を使用して関数を記述する事で、無名関数をより簡潔に記述できるようになります。

また、JavaScriptのアロー関数は関数の記述が簡潔になるだけでなく、通常の関数の記述とは少し違った性質も持ちます。

通常の関数との違いを知らずに、「関数を簡単にかけるんだぁ」とアロー関数を使ってしまうと、バグや不具合の原因にもなりかねませんので、しっかり覚えておきましょう。

アロー関数の基本構文

まずは、アロー関数の基本構文を見ていきましょう。

const herf = (number) => {
  return number / 2;
}

console.log('herf: ' + herf(10)); // herf: 5

上記サンプルコードを、通常の関数で記述する場合は以下になります。

function herf(number) {
  return number / 2;
}

console.log('herf: ' + herf(10)); // herf: 5

ぱっと見ではあまり違わないようにも思いますが、実はアロー関数はさらに省略して記述することもできます。

アロー関数が1文のみの場合

アロー関数を1文で記述する場合、ブロックを表す中括弧「{ }」の記述を省略することができます。

const herf = (number) => return number / 2;

console.log('herf: ' + herf(10)); // herf: 5

通常の関数の記述の場合、1行の記述でも中括弧を省略するとエラーになります。

function herf(number) return number / 2;

// Uncaught SyntaxError: Unexpected token 'return'

アロー関数の引数が1つのみの場合

アロー関数の引数が1つのみである場合、引数の丸括弧「()」の記述を省略する事ができます。

const herf = number => return number / 2;

console.log('herf: ' + herf(10)); // herf: 5

もちろん、通常の関数の記述で引数の丸括弧「()」を省略するとエラーになります。

function herf number { return number / 2 };

// Uncaught SyntaxError: Unexpected identifier

※アロー関数の引数がない場合

アロー関数の引数が1つの場合は「()」を省略できるとご紹介しましたが、引数がない場合は「()」の省略ができないため注意が必要です。

let greet = () => {
  console.log('Hello World!!');
}

greet(); // Hello World!!

アロー関数と通常の関数との違い

アロー関数は、既存の関数定義を簡略化することを大きな目的に導入されました。

そのため、「書き方が簡単になっただけ」と誤解されがちですが、実際には通常の関数と異なる挙動を起こすこともあります。

アロー関数の特徴を学び、通常の関数との違いについて理解してアロー関数を使いこなしましょう。

thisを固定する

アロー関数と通常の関数との一番大きな違いは、「this」の扱いが異なるということです。

通常の関数では、スコープの状況などによって「this」の意味が変わる事があります。

しかし、アロー関数における「this」は、アロー関数が定義された時点で固定され、変化する事がありません。

サンプルコードを見て、その違いについて理解しましょう。

//  通常の関数の場合
console.log(this);  // window

const obj = {
  a : 123,
  b : function () {
    console.log(this);
  }
};
obj.b();  // Object { a: 123, b: b() }

//  アロー関数の場合
console.log(this);  // window

const obj = {
    a : 123,
    b :  () => console.log( this , this.a )
};
obj.b();   // window undefined

比べてみるとわかるように、「obj」内の「console.log」で扱われている「this」が、それぞれ別のもを参照しています。

アロー関数の場合、関数が定義された時点で「this」が固定され、外側の「window」を参照していますね。

逆に、その都度状況に合わせてthisの内容を変化させたい場合には、アロー関数の使用を控えると良いですね。

コンストラクタを持たない

コンストラクタとは、関数を使って定義されたオブジェクトです。

通常は、「new」を使用してオブジェクトを生成することができ、雛形としてオブジェクトを定義することでその都度生成することが可能ですが、アロー関数ではコンストラクタを生成する事ができません。

//  通常の関数
let Info = function(name, age) {
  this.name = name;
  this.age = age;
};

let getInfo = new Info('まぁ', 21); 

console.log('名前は' + getInfo.name + 'です。年齢は' + getInfo.age + '歳です。');  // 名前はまぁです。年齢は21歳です。

argumentsを持たない

argumentsとは、関数内のみで利用できるオブジェクトのことです。

通常は、配列のような形で関数に渡された値をすべて取得することができますが、アロー関数ではargumentsを持たないためエラーとなります。

let argFunc = function(a, b, c) {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]); 
  }  
}

argFunc(1, 2, 3);  // 1, 2, 3