【JavaScript】アロー関数でコードをシンプルに!functionとの違いも解説

【JavaScript】アロー関数でコードをシンプルに!functionとの違いも解説

森岡 駿

森岡 駿

開発エンジニア(Java、JavaScript)/エンジニア歴3年

アロー関数とはJavaScriptの関数記法の1つで、名前のアロー(arrow:矢印)の通り【=>】という記号を使って関数を定義します。アロー関数を用いることで関数の定義を簡略化し、コードを直感的に、またシンプルにすることができます。本記事では、アロー関数の基本的な使い方や従来の関数記法であるfunctionとの違いを解説します。


1.アロー関数の概要

JavaScriptのアロー関数は、以下のように記述します。

// アロー関数の宣言
(引数1, 引数2, …) => {
    // 処理
};

// アロー関数を変数に代入する書き方
const 変数名 = (引数1, 引数2, …) => {
    // 処理
};

// 変数に代入した関数を呼び出す
変数名(引数1, 引数2, …);

【()】に指定した引数を関数の処理部分【{}】に矢印【=>】で渡す、というような直感的な記述ができるのが特徴です。

1-1.アロー関数の使用例

アロー関数の使用例を以下に示します。

const getTriangleArea = (base, height) => {
    return base * height / 2;
};

console.log(‘三角形の面積:’ + getTriangleArea(10, 5));   // 三角形の面積:25

base:底辺とheight:高さを渡して面積を返すだけのシンプルな関数です。

上記を従来の関数記法であるfunctionを用いて記述すると以下のようになります。

const getTriangleArea = function(base, height) {
    return base * height / 2;
};

console.log(‘三角形の面積:’ + getTriangleArea(10, 5));   // 三角形の面積:25

【=>】と【function】以外に違いが無く、あまりアロー関数で記述するメリットがないように思えますが、アロー関数では条件によっては記述を省略することができます。以下で解説します。

 1-2.さまざまなアロー関数の書き方

アロー関数では、特定の条件を満たす場合処理部分の【{}】や【return】、引数部分の【()】を省略できます。ここではアロー関数をシンプルに記述するためのルールについて解説します。

1-2-1.処理が1行のみの場合

処理が1行のみの場合、【{}】と【return】を省略することができます。

// 1.1.の例を書き換えた形
const getTriangleArea = (base, height) => base * height / 2;

console.log(‘三角形の面積:’ + getTriangleArea(10, 5));   // 三角形の面積:25

【{}】を省略すると【return】が不要となり、コードをシンプルにまとめることができます。

1-2-2.引数が1つのみの場合

引数が1つの場合は、【()】を省略することができます。

const getSquareNumber = num => num * num;

const number = 3;
console.log(number + ‘の2乗:’ + getSquareNumber(number));   // 3の2乗:9

処理部分の【{}】や【return】、引数部分の【()】を省略しない書き方は以下のようになります。

const getSquareNumber = (num) => {
    return num * num;
};

const number = 3;
console.log(number + ‘の2乗:’ + getSquareNumber(number));   // 3の2乗:9

コードがかなりシンプルになっていることがわかると思います。

1-2-3.引数がない場合の書き方

引数がない場合は【()】の省略はできないため、【()】を残して記述します。

const displayHelloWorld = () => console.log(‘Hello, world!’);

displayHelloWorld();

このようにアロー関数は様々な書き方があり、コードをよりシンプルにまとめることができます。


 2.function(従来の無名関数)との違い

アロー関数はfunctionを書き換えるだけのものではなく、いくつか異なる点があります。

2-1.arguments オブジェクトが使用できない

argumentsは関数内でのみ利用できるオブジェクトで、従来のfunctionでは引数の有無に関係なく配列のようにarguments[i]という形で関数に渡された引数を呼び出すことができます。

const getSumNumber = function() {
    let result = 0;
    for(let i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
};

console.log(getSumNumber(1, 2, 3));    // 6
console.log(getSumNumber(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));    // 55

しかし、アロー関数で記述するとエラーとなってしまいます。

const getSumNumber = () => {
    let result = 0;
    for(let i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
};

console.log(getSumNumber(1, 2, 3));    // Uncaught ReferenceError: arguments is not defined
console.log(getSumNumber(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));    // Uncaught ReferenceError: arguments is not defined

2-2.thisを固定化する

アロー関数では関数内で【this】を参照する場合、最初に関数を定義した段階で【this】が参照するオブジェクトが固定化されます。そもそも【this】とは呼び出し元のオブジェクトへの参照を保持したキーワードであり、【this】が記述されたオブジェクトそのものを示します。thisの参照が固定化されるとはどういうことか?まず両者の違いを確認してみましょう。

・従来のfunction

window.param = ‘global param’;

let sampleFunc = function() {
    console.log(this.param);
};

let object1 = {
    param: ‘object1 param’,
    func: sampleFunc
};

let object2 = {
    param: ‘object2 param’,
    func: sampleFunc
};

sampleFunc();   // global param
object1.func();   // object1 param
object2.func();   // object2 param

sampleFuncという関数の中で【this】が参照されていますが、sampleFuncwindowオブジェクト内で定義されているため、【this.param】はグローバル変数のparamwindow.param = global param;)を参照します。

しかしobject1とobject2それぞれのfuncとしてsampleFuncを呼び出すことにより、【this】はobject1とobject2それぞれを参照するようになるため、【this.param】が参照する値がそれぞれのオブジェクト内で指定したparamという値を参照するようになります。

・アロー関数

window.param = ‘global param’;

let sampleFunc = () => {
    console.log(this.param);
};

let object1 = {
    param: ‘object1 param’,
    func: sampleFunc
};

let object2 = {
    param: ‘object2 param’,
    func: sampleFunc
};

sampleFunc();   // global param
object1.func();   // global param
object2.func();   // global param

従来のfunctionではそれぞれのオブジェクトを参照していたthisですが、アロー関数内でthisを参照した場合は定義した段階でthisの参照オブジェクトが固定化される(今回の例ではwindowオブジェクトで固定されている)ため、object1やobject2の関数としてsampleFuncを呼び出してもそれぞれのオブジェクトのparamが参照されることはありません。

2-3.コンストラクタとして使用することができない

コンストラクタとは関数を用いて定義されたオブジェクトを指し、newを使ってオブジェクトを生成(インスタンス化)することができるものです。従来のfunctionは以下のようにインスタンス化してオブジェクトを生成することができます。

const Member = function(id, name) {
    this.id = id;
    this.name = name;
};

const member1 = new Member(1, ‘Amy’);
const member2 = new Member(2, ‘Bob’);

console.log({ id: member1.id, name: member1.name });    // { id: 1, name: ‘Amy’ }
console.log({ id: member2.id, name: member2.name });    // { id: 2, name: ‘Bob’ }

しかし、以下のようにアロー関数を用いた場合はインスタンス化をすることができません。

const Member = (id, name) => {
    this.id = id;
    this.name = name;
};

const member1 = new Member(1, ‘Amy’);
const member2 = new Member(2, ‘Bob’);

console.log({ id: member1.id, name: member1.name });    // Uncaught TypeError: Member is not a constructor
console.log({ id: member2.id, name: member2.name });    // Uncaught TypeError: Member is not a constructor

3.まとめ

アロー関数は関数を直感的に、シンプルに書くのに適しています。しかしfunctionを用いた場合と挙動が異なる場面がありますので、状況に合わせて両方を使いこなせるようにしましょう。

私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。もし、今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。

『技術力』と『人間力』を高め定年まで働けるエンジニアを目指しませんか?

私たちは「技術力」だけでなく「人間力」の向上をもって、エンジニアとしてだけでなくビジネスパーソンとして高い水準を目指し、社会や顧客に必要とされることで、関わる人々に感動を与える集団であろうと思っています。

  • 定年までIT業界で働くためのスキルが身につく「感動大学」と「技術勉強会」!
  • 「給与が上がらない」を解消する6ヶ月に1度の明確な「人事評価制度」!
  • 理想のエンジニア像に近づくためのよきアドバイザー「専任コーチ制度」!
  • 稼動確認の徹底により実現できる平均残業時間17時間の働きやすい環境!

現在、株式会社ボールドでは「キャリア採用」のエントリーを受付中です。

まずは以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。

コメント

公式アカウントLINE限定!ボールドの内定確率が分かる無料診断実施中
公式アカウントLINE限定!
ボールドの内定確率が分かる無料診断実施中