【JavaScript】アロー関数について調べてみた

アロー関数 (Arrow Functions) は、
ECMAScript 2015 (ES6) で導入された新しい関数の構文。
通常の関数と比較してコードを簡潔に書くことができ、
一般的にコールバック関数や無名関数として使用される。
以下に、アロー関数の基本的な特徴と使い方を記す。

構文:
アロー関数は、次の構文で定義される。

(引数1, 引数2, ...) => 式または文

・引数がない場合は、() を使用する。

・式または文の中に1つの式がある場合、中括弧 {} を省略できる。この場合、その式の結果が戻り値となる。

・式または文の中に複数の式がある場合は、中括弧 {} で囲み、return 文を使用して明示的に戻り値を指定する。

// 引数を受け取り、それらの合計を返すアロー関数
const add = (a, b) => a + b;

// 引数を受け取らず、固定の値を返すアロー関数
const sayHello = () => "Hello, World!";

// 複数の文を含むアロー関数
const greet = (name) => {
    const message = `Hello, ${name}!`;
    console.log(message);
    return message;
};

this の挙動:
アロー関数は通常の関数と異なり、this の挙動が異なる。
通常の関数内での this は関数が呼ばれたコンテキストによって変化するが、
アロー関数では this は親スコープ（定義された場所）の this を継承する。
これにより、アロー関数内で this を正確に取り扱うことができる。

function Person() {
    this.name = "John";

    // 通常の関数内でのthis
    setTimeout(function() {
        console.log("Hello, " + this.name); // thisはグローバルオブジェクトを指す
    }, 1000);

    // アロー関数内でのthis
    setTimeout(() => {
        console.log("Hello, " + this.name); // thisはPersonオブジェクトを指す
    }, 1000);
}

注意点: