【JavaScript】アロー関数 とは（備忘録）

１．はじめに

アロー関数は、関数式の簡潔な代替構文として導入されました。
アロー関数を使用すると、コードをより短く読みやすくすることができます。

アロー関数の書き方の例

// 処理内容が1行の場合
const 変数名_1 = (引数1) => 処理内容;

// 処理内容が複数行に及ぶ場合
const 変数名_2 = (引数2) => {
    処理内容
};

// 関数を呼び出す
変数名_1(引数1);
変数名_2(引数2);

２．サンプルプログラム

〇例１：

Sample_1.js

// 処理内容が1行の場合の書き方
const calc_1 = (size) =>　size * size;

// 処理内容が複数行に及ぶ場合の書き方
const calc_2 = (size) => {
    return size * size
};

console.log(calc_1(5));
console.log(calc_2(5));

実行結果

25
25

重要：
関数calc_1 と関数calc_2 の処理内容は同じです。
関数calc_1 を関数calc_2 に書き直す場合、return文が必要になります。

〇例２：三項演算子とアロー関数を併用したプログラム

Sample_2.js

const score = prompt('0～15までの値を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_score = Number(score);

const chk =
    (modify_score >= 16) ? () => console.log('0～15の値を入力してください') :
    (modify_score >= 10) ? () => console.log('素晴らしい') :
    (modify_score >= 5 && modify_score <= 9) ? () => console.log('普通') :
    () => console.log('頑張ろう');

// アロー関数を呼び出す
chk();

解説：
①．入力した値と条件を基に、アロー関数内の処理が選択されます。
②．chk();でアロー関数を呼び出し、選択された処理が実行されます。

〇例３：例２のプログラムをif/else if/elseを使用して修正

Sample_3.js

const score = prompt('0～15までの値を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_score = Number(score);

// アロー関数
const chk = (modify_score) => {
    if (modify_score >= 16) {
        console.log('0～15の値を入力してください');
    } else if (modify_score >= 10) {
        console.log('素晴らしい');
    } else if (modify_score >= 5 && modify_score <= 9) {
        console.log('普通');
    } else {
        console.log('頑張ろう');
    }
};

// アロー関数を呼び出す
chk(modify_score);

重要：
アロー関数 chk は、引数 modify_scoreを受け取っています。
アロー関数 chk を呼び出す場合、引数を忘れないように注意しましょう。

３．アロー関数を使用する際の注意点-その１

アロー関数には this 等へのバインドがありません。
そのため、アロー関数をメソッドとして使用するのは適切ではありません。

Sample_1.js

const msg = {
    name: '山田',
    // メソッド
    greet: () => {
        console.log(`こんにちは、${this.name}です`);
    }
};

msg.greet();

実行結果

こんにちは、undefinedです

４．アロー関数を使用する際の注意点-その２

アロー関数をコンストラクターとして使用することはできません。
new をつけて呼び出すと、TypeError が発生します。

Sample_1.js

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

// インスタンス生成
const member = new Member(25, '田中');

console.log({ age: member.age, name: member.name });

実行結果

TypeError: Member is not a constructor

補足：
関数宣言/関数式を使用すると、問題なく動作します。

Sample_2.js

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

// インスタンス生成
const member = new Member(25, '田中');

console.log({ age: member.age, name: member.name });

実行結果

{ age: 25, name: '田中' }

５．参考

・アロー関数式
・アロー関数の基本
・JavaScriptのアロー関数とは？コードをシンプルにするためのアロー関数の使い方

６．その他

・実行環境