JavaScript における => の意味

1. JavaScript のアロー関数 =>
2. 引数なしのアロー関数
3. 引数が 1つのアロー関数
4. 複数行矢印関数
5. JavaScript でのアロー関数の呼び出しまたは実行
6. プロミスとコールバックでアロー関数を使用する
7. アロー関数の制限

JavaScript の関数を使用すると、特定のタスクを実行するコード ブロックを記述できます。 JavaScript で関数を記述するには、さまざまな方法があります。

この記事では、JavaScript のアロー関数とは何か、どのように機能するか、およびその制限について説明します。

JavaScript のアロー関数 =>

アロー関数は、等号 = と大なり記号 > の組み合わせです。 JavaScript の ES6 バージョンで導入されました。

これは、アロー関数として知られる、JavaScript で関数を記述する短い方法です。 アロー関数を使用する利点は、function 式よりも構文が短いことです。

アロー関数は、無名関数と呼ばれることもあります。 これは、これらの関数に名前がないためです。

以下のコード スニペットは、通常の関数の構文とアロー関数の構文の比較を示しています。

コード スニペット - JavaScript:

// normal fn
function abc() {}

// arrow
() => {}

アロー関数は、引数を取らないか、任意の数の引数を取ることができます。

引数なしのアロー関数

以下のコード スニペットは、引数を取らないアロー関数を示しています。 また、コードが 1 行しかないアロー関数がある場合は、以下に示すように中括弧の使用を避けることができます。

コード スニペット - JavaScript:

() => console.log('This is a single line arrow fn which takes no arguments')

引数が 1つのアロー関数

アロー関数に引数を渡したい場合は、丸括弧内に渡すことができます。 以下に、引数が 1つのアロー関数を示します。

コード スニペット - JavaScript:

(name) => console.log(`Good Morning ${name}`)

複数行矢印関数

上記の例では、1 行のコードを持つアロー関数を見てきました。 ただし、アロー関数内に複数行のコードを記述したい場合は、以下に示すように中かっこを使用する必要があります。

コード スニペット - JavaScript:

() => {
  greetMe();
  loadData();
  console.log('The data is loaded....')
}

JavaScript でのアロー関数の呼び出しまたは実行

アロー関数に名前がない場合、どうすればそれを呼び出したり実行したりできるのでしょうか? 答えは簡単です。 アロー関数を変数に格納して、その変数に名前を付けることができます。

次に、丸括弧 () を使用して、以下に示すように、通常の関数を実行する方法と同様に、その関数を呼び出しまたは実行できます。 これを式としてアロー関数と呼びます。

コード スニペット - JavaScript:

const abc = () => {
  console.log('hello');
}

アロー関数内にステートメントが 1つしかない場合は、中かっこ {} を削除して、アロー関数を 1 行で直接記述できます。 これにより、コードの可読性が向上し、コード行が削減されます。

コード スニペット - JavaScript:

const abc = () => console.log('hello');

また、アロー関数の場合、関数の実行後に何かを返したい場合は、return キーワードの代わりに () を使用することもできます。 ただし、通常の関数に関しては、return キーワードを使用する必要があります。

コード スニペット - JavaScript:

(params) => ({key: 'value'})

また、覚えておくべき重要な点の 1つは、通常の関数の this キーワードは、常に JavaScript で呼び出される関数のコンテキストを参照するということです。 しかし、これはアロー関数には当てはまりません。

アロー関数の this キーワードにはコンテキストがありません。 関数が存在するスコープを指します。

プロミスとコールバックでアロー関数を使用する

アロー関数の良いところは、複数の場所で (promise を使用して)、さまざまな方法で (コールバックとして) 使用できることです。

コード スニペット - JavaScript:

new Promise(function(resolve, reject) {
  funReturningPromise().then(data => resolve(data)).catch(err => reject(err));
});

ここでは、promise を使用しています。ご存知のように、promise はコールバック メソッドを引数として取ります。 このコールバックは、resolve と reject の 2つの引数を取ります。

promise オブジェクトを返す関数があるとしましょう。 約束 は、解決することも拒否することもできます。

したがって、promise に何が起こるかによって、then と catch の 2つのメソッドを使用できます。 上記の例に示すように、これらのメソッドでアロー関数を使用できます。

アロー関数の制限

1. コンストラクタ として使用できません。
2. call、apply、および bind メソッドには適していません。
3. this、arguments、または super へのバインディングを持たないため、メソッドとして使用しないでください。
4. new.target キーワードにアクセスできない。