今回は、JavaScriptのアロー関数について学んでいきます。
今回の記事は、JavaScriptの入門知識が少しあれば理解できるようになっています。
では、Let’s Go!!
アロー関数とは？
まず、アロー関数を使った関数の定義方法を紹介していきます。
let 変数名 = (引数１,引数２,引数３・・・) => {
処理・・・
}アロー関数を使い、関数を定義するとこのようになります。()の中に引数を記述し、{}の中に処理を記述します。
ちなみに、引数が一つの場合は、()を省略することも可能です。
let 変数名 = 引数 => { 処理 }他にも、処理が一行だけの場合、{}を省略することができます。
let 変数名 = 引数 => console.log("executed");また、実行時は通常の関数と同じように呼び出すことができます。
通常の関数との違い
次に、アロー関数と通常の関数の違いについて解説していきます。
１．コンパクトさ
まず、一つ目の違いはコンパクトさです。
/* 通常の関数 */
let 変数名 = function(引数１, 引数２, ...){
処理・・・
};
/* アロー関数 */
let 変数名 = (引数１,引数２,・・・) => {
処理・・・
}↑上のコードを見たらわかると思いますが、アロー関数の方が圧倒的にみやすく、コンパクトになっています。
たいして差が無いように思えますが、アロー関数に慣れてくると「function」を書くのが段々面倒くさくなってきます。
このような理由からアロー関数は、関数を引数として渡す場合などでよく使われています。
２．アロー関数の制限
二つ目の違いは、アロー関数はコンストラクタを生成できないことです。
コンパクトなことは、アロー関数が通常の関数より優れている点ですが、当然デメリットもあります。
それは、アロー関数は基本的にメソッドとして使用できないことです。アロー関数では、コンストラクタを生成することができないのです。
アロー関数のサンプルプログラム
最後に、アロー関数の使用例をサンプルコードを参考に、解説していきます。興味がある方は、ぜひコードをコピーして、ブラウザ実行サイトなどで実行して見て下さい。
サンプル１ ～自己紹介プログラム～
まず、サンプル一つ目に自己紹介用のプログラムを紹介していきます。
/* 自己紹介プログラム */
let introduce = name => console.log("Hello, I am " + name + ".");
introduce("taro");
//出力結果: Hello, I am taro.自分の名前を引数にすれば、自己紹介してくれるプログラムです。
関数を宣言するのに、アロー関数を使っていますが、問題なく動作しています。introduce関数を実行する際に引数を変えれば、出力される名前も変わります。試してみてください。
サンプル２ ～足し算プログラム～
次に、足し算をするプログラムを紹介します。
/* 足し算をするプログラム */
let add = (num1,num2) => console.log(num1 + num2);
add(3,4);
//出力結果： 7引数1と引数２を足して、表示するプログラムです。今回の例の場合、引数１＋引数２でしたが、「＋」を「×」に変えれば、引数１と引数２をかけるプログラムにもなります。
また、引数の数を増やすことで、２つ以上の数の加法も計算することができます。
見た通り、アロー関数のプログラムでも、通常の関数と同じように使用することができます。
まとめ
アロー関数についてわかったでしょうか。
関数を定義する際に積極的に使ってみてください。最後まで読んで頂きありがとうございました。ぜひ、他の記事も読んで見て下さい。
コメント