JavaScript では、関数は言語の基本的な構成要素であり、開発者は再利用可能なコード ブロックを定義できます。 JavaScript の関数には主に通常の関数とアロー関数の 2 種類があります。一見すると似ているように見えますが、構文、動作、使用例の点で明確な違いがあります。この記事では、これらの相違点を段階的に掘り下げ、詳細な例を示し、通常の関数とアロー関数の微妙な違いを効果的に把握できるようにすべてのシナリオを取り上げます。

通常関数と矢印関数: 分割の探索
構文
JavaScript の通常の関数は、function キーワードに続いて、関数名、パラメータ (存在する場合)、および中括弧で囲まれた関数本体を使用して定義されます。以下に例を示します:

function add(a, b) {
    return a   b;
}

アロー関数は、ES6 で導入されたより簡潔な構文を提供します。これらは矢印 (=>) 表記を使用し、単一行関数の function キーワードと中括弧を省略します。例えば：

const add = (a, b) => a   b;

語彙このバインディング
通常の関数とアロー関数の最も大きな違いの 1 つは、this キーワードの処理方法です。通常の関数では、this の値は関数の呼び出し方法によって決まります。逆に、アロー関数は独自の this をバインドせず、それを囲んでいるスコープから継承します。これを例で説明しましょう:

const person = {
    name: 'John',
    sayHello: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

person.sayHello(); // Output: Hello, John!

const personArrow = {
    name: 'Jane',
    sayHello: () => {
        console.log(`Hello, ${this.name}!`);
    }
};

personArrow.sayHello(); // Output: Hello, undefined!

上記の例では、person.sayHello() は「Hello, John!」を正しく記録します。これは person オブジェクトを参照しているためです。ただし、personArrow.sayHello() は、「Hello、未定義です!」とログに記録します。アロー関数には独自の thisbinding がないため、name が定義されていないグローバル スコープから thisvalue を継承することになります。

引数 オブジェクト
もう 1 つの違いは、arguments オブジェクトにあります。通常の関数は、関数に渡されるすべての引数を含む配列のようなオブジェクトである argument オブジェクトにアクセスできます。ただし、アロー関数には独自の引数オブ​​ジェクトがありません。これを e
で説明してみましょう

xample:

function sum() {
    let total = 0;
    for (let i = 0; i  {
    let total = 0;
    for (let i = 0; i 



上記の例では、 sum() は、arguments オブジェクトを使用して渡されたすべての引数の合計を正しく計算します。ただし、アロー関数は引数にアクセスできないため、sumArrow() は ReferenceError をスローします。

新しいキーワード

通常の関数は、オブジェクトの新しいインスタンスを作成するための new キーワードを使用したコンストラクター関数として使用できます。ただし、アロー関数はコンストラクターとして使用できません。 new でアロー関数を使用すると、TypeError が発生します。以下に例を示します:


function Person(name) {
    this.name = name;
}

const john = new Person('John');
console.log(john.name); // Output: John
const PersonArrow = (name) => {
    this.name = name;
}

const jane = new PersonArrow('Jane'); // TypeError: PersonArrow is not a constructor




よくある質問セクション
Q: アロー関数ではなく通常の関数を使用する必要があるのはどのような場合ですか?

A: this キーワードや引数オブジェクトにアクセスする必要がある場合、またはコンストラクター関数を定義する場合は、通常の関数を使用してください。アロー関数は、簡潔なワンライナーや、語彙の範囲を維持したい場合に適しています。

Q: アロー関数に名前を付けることはできますか?

A: いいえ、アロー関数に名前を付けることはできません。デフォルトでは匿名です。

Q: アロー関数は通常の関数より高速ですか?

A: アロー関数と通常の関数の間に大きなパフォーマンスの違いはありません。どちらを選択するかは、特定の使用例と読みやすさに基づいて選択する必要があります。

Q: オブジェクト メソッドでアロー関数を使用できますか?

A: はい、アロー関数はオブジェクト メソッドで使用できますが、独自の this をバインドしないため、予期しない動作が発生する可能性があるため注意してください。

結論

要約すると、通常の関数とアロー関数はどちらも JavaScript で関数を定義するという目的を果たしますが、構文、動作、使用例が異なります。これらの違いを理解することは、クリーンで効率的でバグのないコードを作成するために重要です。この記事で概説されているシナリオを考慮することで、JavaScript プロジェクトで各タイプの関数をいつ使用するかについて情報に基づいた決定を下すことができます。

すべてに適合する万能のソリューションはなく、通常の関数とアロー関数のどちらを選択するかは、最終的にはコードの特定の要件とコーディング スタイルの好みによって決まることに注意してください。