More than 3 years have passed since last update.

なんとなく使っていたアロー関数を改めて調べてみました

Posted at 2021-08-31

はじめに

普段何気なく使っているものでも原理を理解しないまま使ってしまっていることが多く、今回改めてアロー関数の理解を深めてみました。

下記矢印のような記号を使った省略記法。

const sayHello = (name) => {
	console.log("hello" + "," + name);
};

sayHello(Taro);
//出力結果　hello,Taro

本来の関数リテラルだと下記のように書く。

const sayHello = function(name){
	console.log("hello" + "," + name);
};

sayHello(Taro);
//出力結果　hello,Taro

関数リテラルをより簡略に記述できる。

functionではなく変数に代入する形で関数を定義したもの。

先程のこれ。

const sayHello = function(name){
	console.log("hello" + "," + name);
};

sayHello(Taro);
//出力結果　hello,Taro

関数名をつけなくていいため一度きりの処理を定義するときに楽。

普段仕事でfunctionを使わないようにしているという記事もあったので今後は関数リテラル（関数式）で書くのが主流になるのか・・

ようするに一度しか処理で利用しない関数（再利用しない）にいちいち関数名をつけたくない。なぜなら同じ関数名を誤ってつけると処理が上書きされるから。また、どうせ名前ないなら短い記述でシンプルにかけるからいいよねってことだと理解。

リテラルとはプログラム上で数値や文字列など、データ型の値を直接記述できるように構文として定義されたものです。たとえば、"と"で囲んだ範囲が文字列リテラルで、これは文字列型のデータを表現しています。

// ""で囲んだ範囲が文字列リテラル
const str = "こんにちは";

true; // => true
false; // => false

省略後

//functionと()を省略
//{}を省略
const sayHello = name => console.log("hello" + "," + name);

sayHello(Taro);
//出力結果　hello,Taro

先程のコード

const sayHello = function(name){
	console.log("hello" + "," + name);
};

sayHello(Taro);
//出力結果　hello,Taro

通常の書き方

let numbers = [1, 2, 3, 4, 5];

const doubleNum = numbers.map(function(number){
	return number * 2;
};

省略後

let numbers = [1, 2, 3, 4, 5];

const doubleNum = numbers.map(number => number * 2);

シンプル！

今回は触りの部分だけをまとめましたが、通常関数とアロー関数ではthisを使える使えないの違いがあったり、prototype, argumentsのありなしがあったりと奥が深い。アロー関数を用いた関数式で定義された変数はthisの参照先が異なるためクラスメソッドとしては使えないなど。

引き続き研究を続けたいと思います。