JavaScript Arrow関数：ステップバイステップガイド

JavaScriptの矢印関数は、関数を宣言する方法です。矢印関数を使用すると、JavaScript関数をより効率的に記述し、より簡潔な構文を使用できます。矢印関数の構文は、単一式の暗黙的な戻りをサポートします。

---

関数は、特定のアクションを実行したり、値を返したりするコードのブロックです。関数は、プログラマーが複数回再利用できるコードを作成するために使用されます。これにより、プログラムの行数が減り、プログラムの効率が向上します。

従来、JavaScriptは、関数を宣言する1つの方法を提供していました。それはfunctionを使用することです。 キーワード。ただし、ES6以降、JavaScriptはarrow functionsをサポートしています。 これを使用して、関数をより効率的に定義できます。

このガイドでは、JavaScriptの関数の基本を探り、JavaScriptの矢印関数の使用方法について説明します。また、矢印関数を使用する場所についても説明し、実際に矢印関数を使用する方法を説明するためにいくつかの例を検討します。

JavaScript関数の復習

JavaScriptで関数を宣言するために使用される最も一般的な方法は、通常のfunctionを使用することです。 キーワード。 function キーワードを使用すると、コーダーはコード全体で参照できる関数を宣言できます。

JavaScript関数の構文は次のとおりです。

function nameOfTheFunction() {
   // Code
  }

私たちの関数にはいくつかの部分が含まれています。まず、functionを使用します 関数を宣言することをプログラムに伝えるためのキーワード。次に、関数の名前を指定します。上記の例では、nameOfTheFunctionです。 。関数名は変数と同じルールを使用するため、キャメルケースで記述されていることに注意してください。

次に、関数の後に括弧のセットが続きます。これは、オプションでパラメーターの解析に使用できます。次に、コードは中括弧のセットに含まれます（{} 。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

例を使用して、JavaScriptで関数がどのように機能するかを説明しましょう。次のコードは、wakeUpRoutineという関数を作成します 朝のメッセージをコンソールに出力します：

function wakeUpRoutine() {
   console.log("Good morning! Today is a great day.");
  }

現在、プログラムを実行しても何も起こりません。これは、関数が宣言されているが、まだ関数を呼び出していないためです。関数を実行したい場合は、関数の名前を書き出すことで呼び出すことができます：

wakeUpRoutine();

プログラムが返されます：

Good morning! Today is a great day.

関数は、実行したい場所で呼び出すことにより、プログラム全体で何度でも使用できます。

JavaScript関数もパラメーターを取ることができます。パラメータは、関数に渡され、関数内でローカル変数として機能する入力です。それで、ウェイクアップメッセージに自分の名前を含めたいとしましょう。次のコードを使用して、ウェイクアップメッセージに自分の名前を含めることができます。

function wakeUpRoutine(name) {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

私たちのコードでは、nameを定義していません パラメータ。これは、関数を呼び出すときに値を割り当てるためです。私たちの名前がPeterだとしましょう 。メッセージを自分の名前で表示するには、次のコードを使用します。

wakeUpRoutine("Peter");

プログラムが返されます：

Good morning, Peter! Today is a great day.

nameの値 パラメータはwakeUpRoutine関数に渡されます。この場合はPeterです。 。次に、nameを使用します プログラムが指定した名前を参照するための関数内の変数。

JavaScriptアロー関数

JavaScriptの矢印関数。fat arrowと呼ばれることもあります。 関数は、ES6で導入された最も人気のある機能の1つです。これらの関数式を使用すると、関数をより効率的に記述し、より簡潔な構文を使用できます。

JavaScriptの矢印関数の構文は次のとおりです。

functionName = (parameters) => {
   // Code
  }

ウェイクアップルーチンの例を使用して、JavaScriptの矢印がどのように機能するかを説明しましょう。上記のコードでは、「function」キーワードを使用する必要がありました。」ただし、矢印関数では、=>を使用します 代わりに構文。矢印関数として記述されたウェイクアップルーチン関数の例を次に示します。

wakeUpRoutine = (name) => {
   console.log(`Good morning, ${name}! Today is a great day.`);
  }

関数を呼び出すために、従来の関数で使用するのと同じ構文を使用します。

wakeUpRoutine("Sophia")

関数は次を返します：

Good morning, Sophia! Today is a great day.

矢印関数の構造は、従来の関数の構造と非常によく似ています。唯一の違いは、functionを使用しないことです。 矢印関数でキーワードを使用し、代わりに=>を使用します 矢印。

さらに、returnを使用する必要がないことに注意してください。 矢印関数のキーワード。これにより、コードがさらに簡潔になります。

暗黙の返品

矢印関数は、関数本体が単一の式である場合に特に役立ちます。関数本体が単一の式である場合は、中括弧を削除し、暗黙の戻り値を作成して関数を単純化できます。これは、関数で使用される行数が関数の定義方法に影響を与えなかった従来の関数とは異なります。

1行の矢印関数の例を次に示します。

const multiplyNumbers = (a, b) => a * b;
multiplyNumbers(2, 2);

コードは次のようになります：4 。ご覧のとおり、矢印関数は2つの数値を乗算しています。

上記のように値を返す場合は、通常、暗黙の戻り構文が使用されます。ただし、構文を使用して、値を返さないコードを実行することもできます。したがって、暗黙の構文を使用してウェイクアップルーチン関数を再作成する場合は、次のコードを使用できます。

const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`);
wakeUpRoutine("Ava");

コードは次を返します：

Good morning, Ava! Today is a great day.

かっこを削除する

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

wakeUpRoutine = name => {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

ご覧のとおり、name パラメータが括弧で囲まれなくなりました。

Map、Filter、Reduceを使用した矢印関数

矢印関数を使用すると、1行で配列を変換できるため、矢印関数は、JavaScript配列メソッドのマップ、フィルター、およびリデュースで一般的に使用されます。

学生の成績がたくさんあるとしましょう。 1を追加します 最近のテストでエラーが発生したため、生徒は特定の質問に答えることができず、30の満点を獲得することはできませんでした。 。テストのスコアを修正するために使用できる矢印関数の例を次に示します。

const grades = [25, 26, 22, 28];
const fixStudentGrades = grades.map( score => score + 1 );
console.log(fixStudentGrades);

コードは次のようになります：

[26, 27, 23, 29]

ご覧のとおり、コードに1が追加されています gradesの各成績に 配列。

結論

矢印関数は、ES6 JavaScriptで導入された機能であり、より効率的で簡潔なコードを記述するために使用できます。矢印関数を使用すると、=>を使用できます functionの代わりに矢印 ステートメント、および特定の状況での1行関数の記述も容易にします。

このチュートリアルでは、JavaScriptで関数がどのように機能するかの基本を探り、次に矢印関数の記述方法について説明しました。さらに、暗黙の戻り値、括弧の削除、およびmapでの矢印関数の使用についても検討しました。 、filter 、およびreduce 関数。

これで、エキスパートのような矢印関数を作成するために必要な知識を身に付けることができます。