JavaScriptでのES6Arrow関数の使用を開始する

投稿日: 2022-04-20 2022-10-15
タグ: Development, javascript

序章

ES6では、スプレッド演算子、オブジェクトの破棄、新しいタイプの変数など、JavaScriptに多くの更新がありました。最も注目すべき変更点の1つは、矢印関数でした。これは、関数を作成するための新しく簡潔な方法です。矢印関数を使用すると、読みやすく簡潔な関数を1行で定義できます。この記事では、矢印関数の基本を説明し、その利点について説明します。

ES5の機能

まず、ES5JavaScriptを使用して関数を定義する方法を見てみましょう。関数を定義するには、functionキーワードが必要でした。たとえば、数値に2を掛ける関数を定義する場合、次のようになります。

function multiplyByTwo(num){
    return num * 2;
}

必要に応じて、関数を定義して変数に割り当てることもできます。

const multiplyByTwo = function(num){
    return num * 2;
}

どちらの方法でも、キーワードfunctionを含める必要がありました。

初めてのES6アロー機能

矢印関数を作成するために、キーワードfunctionは必要ありません。実際、基本的にそのキーワードを削除し、パラメーターの直後で、中括弧の前に矢印を追加します。次のようになります。

const multiplyByTwo = (num) => {
    return num * 2;
}

この時点では、これを行うための古い方法と実質的に異なるようには見えませんが、いくつかの機能強化を行うことができます。

不要な括弧の削除

パラメーターがない場合、または複数のパラメーターがある場合は、パラメーターを括弧で囲む必要があります。ただし、矢印関数にパラメータが1つしかない場合は、次のように括弧を省略して簡略化できます。

const multiplyByTwo = num => {
    return num * 2;
}

暗黙のリターン

多くの場合、1行のコードの後に戻る関数を記述します。関数の古い書き方では、関数の行数は関数の定義方法に影響しませんでした。矢印機能で、それはできます。

関数で実行したいのが1行の戻りだけである場合は、陰的戻りを使用して関数を単純化できます。暗黙のreturnを使用している間は、中括弧やreturnキーワードは必要ありません。次のようになります。

const multiplyByTwo = num => num * 2;

必ずしも何も返す必要がない場合でも、暗黙的な戻り構文を使用できます。つまり、関数の呼び出し元が関数が何かを返すことを期待していない場合は、関数が何かを返すようにすることは重要ではありません。

たとえば、コンソールに何かを出力したい場合は、暗黙のreturnを使用して、関数の長さを短くすることができます。

const printName = (first, last) => console.log(`${first} ${last}`);

マップとフィルターでの矢印関数の使用

使用される矢印関数が表示される最も一般的な場所の1つは、map、reduce、filterなどのJavaScript配列メソッドを使用する場所です。これらのメソッドで矢印関数を使用することにより、1行で完全な配列変換を行うことができます。

2つの例を見てみましょう。1つはマップを使用し、もう1つはフィルターを使用します。マップバージョンの場合、各数値に2を掛けて配列を変換するとします。次のようになります。

const twodArray = [1,2,3,4].map( num => num * 2);

この矢印関数では、（パラメーターが1つしかないため）括弧を省略し、暗黙の戻り値を使用していることに注意してください。これにより、変換全体が1行になりました。

それでは、フィルターを使って別のことをしましょう。偶数ではないすべての数値をフィルタリングするとします。私たちはこれを持っているでしょう：

const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

繰り返しますが、括弧や暗黙の戻りはありません。

‘this’矢印関数を使用したバインディング

人物オブジェクト内でES5関数定義を使用する例から始めましょう。

const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}

この場合、姓名と人物のフルネームを返すgetName（）関数を使用してpersonオブジェクトを作成しました。関数内では、を呼び出して最初と最後のプロパティを参照しようとしています this.first と this.last.

this キーワードを使用してこれらのプロパティにアクセスできる理由は、これらの関数がオブジェクト内で定義されている場合、オブジェクト自体に自動的にバインドされるためです。したがって、ES5関数を使用すると、次を使用してオブジェクトのプロパティを参照できます。 this.

ただし、矢印機能を使用すると、状況が少し変わります。矢印関数はキーワードのバインドを行いません this. したがって、関数の定義を矢印関数に変更すると、機能しなくなります。

const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}

この場合、 undefined キーワードが次のように、最初と最後のプロパティの両方に出力されます this はpersonオブジェクトにバインドされておらず、参照する最初と最後の変数がありません。

結論

矢印関数は、ES6JavaScriptの多くの新機能の1つです。例やドキュメントでそれらがますます使用されていることがわかるので、それらがどのように機能するかを学ぶ価値があります。また、コードの簡潔さと読みやすさを大幅に向上させることができます。

getdocs

13036