Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1395
1160

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted 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

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

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

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; を書かなくてよくなったりします。

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

1395
1160
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

1395
1160

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?