なんとなく使っていたアロー関数を言語化してみました。
さっそくアロー関数の説明に入ろうと思うのですが、その前提である関数リテラルについて説明します。
関数リテラルとは
リテラルとはソースコードに直接べた書きした文字や数字のことです。
例
var name = "taro";
var age = 18;
//"taro" 18 がリテラル
つまり関数リテラルとはソースコードに直接べた書きされた関数のこと。
JavaScriptでは関数はデータ型のひとつなので、変数に代入したり、関数の引数として渡したり、戻り値として関数を返すことが可能です。
関数リテラルの例
let 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の代わりに=>が使われていますね。
アロー関数は基本的に以下の様に書きます。
(引数,...) => {...関数の本体...}
function
を使った場合を再掲しますので、見比べてみてください。
let getTriangle = function(base,height){
return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10
よりシンプルにアロー関数を記述する
アロー関数は条件によってさらに簡素化できます。
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,引数がない場合
引数がない場合はカッコを省略せずに記述します。
let show = () => console.log('Hello, world!');
show(); //Hello, world!
thisの固定
アロー関数では、thisはアロー関数が宣言された場所によって決まります。
つまり定義したコンテキストでthisを固定します。
これによってvar self = this;
を書かなくてよくなったりします。
以上で簡単にはなりますがアロー関数の説明を終わります。