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

Last updated at 2024-12-13Posted at 2017-04-16

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

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

関数リテラルとは

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

例

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

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

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

例

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

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

例

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

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

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

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

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

1162