JavaScript のアロー関数と通常の関数の比較

ほとんどの最新のプログラミング言語と同様に、JavaScript はコードの再利用を可能にする関数の作成方法を提供しています。この言語に慣れていない人のために、JavaScript で関数を宣言する方法は 2 つあります。

もともと、function キーワードが使用されていましたが、後にアロー構文が作成されました。スコープのアクセシビリティは異なりますが、function キーワードとアロー構文のどちらも同様の結果を生み出します。

この 2 つの違いを区別できないと、問題が発生し、誤った使用につながる可能性があります。スコープと可視性に各関数の宣言がどのように影響するかを理解することは、最新の JS 開発者にとって必要不可欠です。

JavaScript のアロー関数とは?

JavaScript のアロー関数は、デフォルトのfunction キーワードを使用しない関数を定義する別の方法です。

function logMessage(message) {
console.log(message);
}

const logMessage = (message) => {
console.log(message);
}

const logMessage = message => console.log(message);

上記では、同じメッセージが 3 つの異なる方法で記述されています。最初のものは通常の関数宣言メソッドを使用しています。次の 2 つは、ES6 のアロー関数を 2 つの方法で使用する方法を示しています。

JavaScript は、ECMAScript 2015 標準のリリースに伴い、初めてアロー関数構文を採用しました。アロー関数は、関数をすばやく作成するためのクリーンで簡潔な方法と、JavaScript 内のいくつかの長年のスコープの問題に対する興味深い解決策を提供しました。

これらの機能により、アロー関数は多くの開発者の間で瞬く間にヒットしました。最新の JavaScript コードベースを調査しているプログラマーは、通常の関数と同じようにアロー関数を見つける可能性があります。

JavaScript のアロー関数は通常の関数とどのように異なるか?

一見すると、アロー関数は function キーワードを使用して宣言された関数と大きく異なるようには見えません。構文を除けば、どちらもコード内の他の場所から呼び出すことができる再利用可能な一連のアクションをカプセル化します。

しかし、この 2 つには類似点があるにもかかわらず、開発者が認識しておく必要がある相違点がいくつかあります。

スコープの違い

JavaScript で通常の関数が宣言されるたびに、その関数は独自のスコープを作成するクロージャとして機能します。これは、setTimeout や setInterval などの特定の特殊な関数を使用する場合に問題が発生する可能性があります。

ES6 より前は、コールバックで使用するためにアイテムをより上位のスコープに引き上げる回避策が多数ありました。これらのハックは機能しましたが、理解するのが難しく、特定の変数が上書きされて問題が発生する可能性がありました。

アロー関数は、この両方の問題をシンプルかつエレガントに解決しました。アロー関数がコールバックの一部として使用されると、呼び出された関数のスコープと同じスコープにアクセスできます。

これにより、関数は元のイベントが呼び出されたコンテキストへのアクセスを失うことなく、コールバックとして使用できるようになりました。この原理を実際に示す簡単なテストとして、次のような遅延メッセージング関数を設定することができます。

function delayedMessage(message, delay) {

setTimeout(function(message) {
console.log(message);
}, delay);

}

delayedMessage("Hello World", 1000);

この関数はシンプルで、message とdelay をミリ秒単位で受け入れます。遅延が経過すると、メッセージがコンソールに記録されます。しかし、コードが実行されると、渡されたメッセージではなく、undefined がコンソールに記録されます。

コールバック関数が実行されると、スコープが変更され、元のメッセージにアクセスできなくなります。クロージャ内からメッセージを使用するには、メッセージをグローバル変数に引き上げる必要があります。これにより、コールバックの前にメッセージが上書きされる可能性があります。

アロー関数は、この問題を適切に修正します。setTimeout の最初の引数を置き換えると、スコープを維持でき、関数は delayedMessage に渡されたメッセージにアクセスできるようになります。

function delayedMessage(message, delay) {

setTimeout(() => {
console.log(message);
}, delay);

}

delayedMessage("Hello World", 1000);

これで、実行すると、delayedMessage 関数はメッセージを記録します。さらに、これにより、異なる遅延で複数のメッセージをキューに入れることができ、すべてが正しい時間に発生します。

これは、delayedMessage が使用されるたびに、独自の内部アロー関数のコピーを持つ独自のスコープを生成するという事実によるものです。

コードの可読性

アロー関数はコールバックとして便利ですが、コードをクリーンで簡潔に保つためにも使用されます。上記のセクションでは、アロー関数を使用すると、delayedMessage 関数が呼び出されたときに何が起こるかをすぐに理解できることがわかります。

関数がより複雑になるにつれて、少しの明瞭性があるとコードがはるかに読みやすくなります。オブジェクトを構成する場合、短い関数を追加するとコードが単純化されます。

class counter {
_count = 0;
increment = () => {
this._count += 1;
}
decrement = () => {
this._count -= 1;
}
count = () => {
return this._count;
}
}

let ct = new counter();

オブジェクト指向プログラミングにおける役割

JavaScript のアロー関数は関数型プログラミングの不可欠な部分ですが、オブジェクト指向プログラミングでも役割を果たします。アロー関数はクラス宣言内で使用できます。

class orderLineItem {
_LineItemID = 0;
_Product = {};
_Qty = 1;

constructor(product) {
this._LineItemID = crypto.randomUUID();
this._Product = product
}

changeLineItemQuantity = (newQty) => {
this._Qty = newQty;
}
}

クラス宣言内でメソッドを宣言するためにアロー関数を使用しても、クラス内の関数の動作は変わりません。ただし、クラスの外では関数が公開され、他のクラスで使用できるようになります。

通常の関数は、呼び出されずにクラス宣言の外からアクセスすることはできません。つまり、他のクラス宣言はこれらの関数を継承できますが、他のクラスを構成するために直接アクセスすることはできません。

JavaScript のアロー関数はいつ使用すべきか?

JavaScript のアロー関数は、開発者が関数がアクセスできるスコープをはるかに細かく制御できる非常に強力な機能です。コールバックが親のスコープにアクセスできる必要がある場合と、アクセスできない必要がある場合を知っていれば、開発者は使用する宣言の種類を判断できます。

アロー関数は、隠すべきスコープの一部を公開することなく、コールバックを記述するための明確で簡潔な方法をプログラマーに提供します。また、クリーンでシンプルな構成を作成することも可能で、JavaScript での関数型プログラミングをさらに可能にします。

JS 開発者は、2 つの構文の違いを認識し、関数を宣言する際にどの構文が適切かを意識する必要があります。

パソコンの友達