Help us understand the problem. What is going on with this article?

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

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

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

関数リテラルとは

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

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の代わりに=>が使われていますね。
アロー関数は基本的に以下の様に書きます。

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

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

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

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away