アロー関数の書き方[JavaScript]

JavaScriptのアロー関数の書き方について簡単にまとめました。

はじめに

アロー関数の前に、まず「関数」について理解することが重要です。

function文による関数宣言とは

functionを用いて関数を宣言(定義)する方法のこと。
「関数名」を記述することで、宣言した関数を実行(呼び出し)します。

//function(関数)の宣言
function greeting(){
  console.log( 'Hello!' );
}

//function(関数)の実行
greeting();

関数式

変数(or定数)に関数を代入する方法のこと。
変数(or定数)を実行する(呼び出す)ことで間接的に関数を利用します。

//function(関数)の代入
let greeting = function(){
  console.log( 'Hello!' );
}

//function(関数)の実行
greeting();

関数リテラルとも呼ばれる

関数式は、変数(or定数)に関数のコードを直接べた書きしています。
直接べた書きしているため関数式は関数リテラルとも呼ばれます。

無名関数
関数を定義している時点では「 function(){…}; 」、関数名を持たない(名前のない関数)なので、無名関数や匿名関数とも呼ばれています。

アロー関数とは

名前の通りarrow(矢印)を使って記述する関数のことです。
関数式(関数リテラル)を簡易的に書くことができます。

基本的な書き方

function文(関数式)で書いても、アロー関数で書いても出来ることは変わりません。
アロー関数の場合は、functionを使用せずに「=>」を使用します。

// function文(関数式)の場合
const twice = function(num) {
  return num * 2; 
} 

// アロー関数の場合
const twice = (num) => {
  return num * 2; 
} 

console.log(twice(2));
// ※実行結果(どちらも同じ結果)
// 4

アロー関数をさらに省略

アロー関数では、さらに簡潔に書ける場合もあります。

1行で書ける場合

関数の本体が一文だけの場合 {…} を省略できます。
その際、return命令も省略できます。

// 省略前
const twice = (num) => {
  return num * 2; 
} 

// 省略後
const twice = (num) => num * 2; 

引数を括る()が省略できる場合

引数が1個だけの場合は () が省略できます。

// 省略前
const twice = (num) => num * 2;

// 省略後
const twice = num => num * 2;

引数を括る()が省略できない場合

引数が1個だけではない場合は () が省略できません。
引数がない場合も () が必要です。

// OK例
const twice = (x, y) => (x + y) * 2; // 引数2個
const greeting = () => console.log('Hello'); // 引数0個

// NG例
const twice = x, y => (x + y) * 2;  // 引数2個
const greeting =  => console.log('Hello');  // 引数0個

アロー関数の特徴

thisの固定化

function文(関数式)とアロー関数では、thisの扱いが異なります。

thisの扱い方の違い

function文(関数式)の場合:
・呼び出し元のオブジェクトを参照し、状況によってthisの意味が変化する。

アロー関数の場合:
・関数が定義された時点でthisが固定化される(変化しない)。

thisとは
JavaScrpitで最初から用意されている特別な変数。thisを実行する場所や方法によって中身が変化します。

function文(関数式)の例

無名関数のthisは、呼び出し元(宣言元)のオブジェクトが参照されるため、thisの内容も変化します。

window.animal = 'dog'; //グローバル変数としてanimalを定義

let find = function() {
  console.log(this.animal);
};

find();
// ※実行結果
// 'dog'

let gate1 = {
  animal: 'tiger',
  func  : find
};

let gate2 = {
  animal: 'elephant',
  func  : find
};

gate1.func();
// ※実行結果
// 'tiger'
gate2.func();
// ※実行結果
// 'elephant'

アロー関数の例

function文(無名関数)をアロー関数に変えると、thisの内容が固定されます(変化しません)。このように、アロー関数では、関数が定義された時点でthisが固定されています。

window.animal = 'dog'; //グローバル変数としてanimalを定義

let find = () => {
  console.log(this.animal);
};

find();
// ※実行結果
// 'dog'

let gate1 = {
  animal: 'tiger',
  func  : find
};

let gate2 = {
  animal: 'elephant',
  func  : find
};

gate1.func();
// ※実行結果
// 'dog'
gate2.func();
// ※実行結果
// 'dog'

開発内容によっては、thisの内容を変化させたい場合もあれば、固定させたい場合もあると思います。そのため、1つの方法に固執せず、上手く使い分けると良いと思います。

コンストラクタを生成できない

アロー関数ではコンストラクタを生成すること(持つこと)ができません。

コンストラクタとは
関数を用いて定義されたオブジェクトのことです。

function文(関数式)の例

new演算子を使ってコンストラクタ「Group」(オブジェクト)を生成し、thisを使ってインスタンスのプロパティを設定できます。

function Group( id, name ) {
    this.id = id;
    this.name = name;
}
let group = new Group( 2, '山田' );

console.log(group);
// ※実行結果
// {
//   "id"  : 2,
//   "name": '山田'
// }
インスタンスとは
オブジェクトの複製のことです。
インスタンス化するためには、new演算子を利用します。

アロー関数の例

アロー関数ではコンストラクタを作成することができません。
「コンストラクタがありませんよ(Uncaught TypeError: XXX is not a constructor)」というエラーが表示されます。

let Group = ( id, name ) => {
    this.id = id;
    this.name = name;
}
let getGroup = new Group( 2, '山田' );

console.log(getGroup);
// ※実行結果
// Uncaught TypeError: Group is not a constructor