HOWTO · JavaScript
JavaScript における => の意味
この記事では、JavaScript のアロー関数とその構文の意味について説明します。
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つのメソッドを使用できます。 上記の例に示すように、これらのメソッドでアロー関数を使用できます。
アロー関数の制限
コンストラクタとして使用できません。call、apply、およびbindメソッドには適していません。this、arguments、またはsuperへのバインディングを持たないため、メソッドとして使用しないでください。new.targetキーワードにアクセスできない。
