JavaScript アロー関数を説明するよ

  • 24
    いいね
  • 0
    コメント

なんとなく使っていたアロー関数を言語化してみました。

さっそくアロー関数の説明に入ろうと思うのですが、その前に前提である関数リテラルについて説明します。

関数リテラルとは

リテラルとはソースコードに直接べた書きした、文字や数字のことです。

var name = "taro";
var age = 18;
//"taro" 18 がリテラル

つまり関数リテラルとはソースコードに直接べた書きされた関数のこと。
JavaScriptでは関数はデータ型のひとつなので、変数に代入したり、関数の引数として渡したり、戻り値として関数を返すことが可能です。

関数リテラルの例

var getTriangle = function(base,height){
 return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10

関数リテラルは宣言した時点では名前を持たないことから 匿名関数 無名関数 と呼ばれます。
上記の例ではfunction(base,height){...};と名前のない関数を定義した上で変数getTriangleに格納しています。

以上が関数リテラルの説明になります。
ここでなぜ関数リテラルの説明をしたかというと、アロー関数は関数リテラルをシンプルに記述する方法だからです。

アロー関数とは

アロー関数とは その名の通り、 =>(矢)を使って関数リテラルを記述します。
さっそく例を見ていきましょう。

let getTriangle = (base, height) => {
  return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10

上記の例ではfunctionの代わりに=>が使われていますね。
アロー関数は基本的に以下の様に書きます。

(引数,...)=>{...関数の本体...}

よりシンプルにアロー関数を記述する

アロー関数は条件によってさらに簡素化できます。

1,本体が一文である場合

本体が一文である場合、ブロックを表す{...}を省略できます。
また、文の戻り値がそのまま戻り値とみなされるので、return命令も省略できます。

let getTriangle = (base, height) => base * height / 2;
console.log(getTriangle(10,2));//10

2,引数がひとつの場合

引数がひとつの場合、引数をくくるカッコも省略できます。

let getCircle = radius =>radius * radius * Math.PI;
console.log(getCircle(10))//314.1592653589793;

3,引数がない場合

引数がない場合はカッコを省略せずに記述します。

var show =()=> console.log('Hello, world!'); 
show(); //Hello, world!

thisの固定

アロー関数では、thisはアロー関数が宣言された場所によって決まります。
つまり定義したコンテキストでthisを固定します。
これによってvar self = this; を書かなくてよくなったりします。

以上で簡単にはなりますがアロー関数の説明を終わります。