Javascript アロー関数を簡単にまとめて学ぶ

#はじめに
アロー関数？書けるよ。あまり理解してないけどって人向けに具体的な使用例の一部をお伝えする記事です。
アロー関数とは、

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

つまり従来より簡潔に書けるし明瞭な構文で書けるってこと。
ちなみに関数とメソッドの違いは、

• 単独で 呼び出せる のが関数

myfunc(); <- こんな形の奴

• 単独で 呼び出せない のが関数

var str = 'user1,user2,user3';
 
var result = str.split(','); <- メソッド

従来の関数の書き方との書き換え方

引数の値を2倍にして返り値で返す関数で例えると、

• 従来の書き方

index.js

function doubleUp(num){
   return num * 2;
} 

• アロー関数で書き換えた書き方 その1

index.js

const doubleUp = (num) => {
   return num * 2;
} 

• アロー関数で書き換えた書き方 その2.0 (引数が一つの場合に限る)

index.js

const doubleUp = num => {
   return num * 2;
} 

• アロー関数で書き換えた書き方 その2.1 (引数が一つ以上の場合)

index.js

const doubleUp = (a, b) => a * b;

• アロー関数で書き換えた書き方 その3.0 (関数の処理が returnで一行の場合に限る)

index.js

const doubleUp = num => num * 2;

• アロー関数で書き換えた書き方 その3.1 (関数の処理が returnで一行以上の場合)

index.js

const doubleUp = num => {
   alert('hoge');
   return num * 2;
}

アロー関数と無名関数の挙動って一緒なの？

結論から言うと一緒じゃない。
関数内で this を使う場合は挙動が変わってくるんじゃい。
以下の関数を見るんじゃい。

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される
    
       window.setTimeout(function() {
          console.log(this.age) // undefined が出力される
      }, 1000);
   }
};

console.log(this)で両方とも出力してもらえればわかると思うんじゃい。
window に関してはそもそも callName というオブジェクトがないんじゃい。
なので参照しようとすると undefined になるんじゃい。

しかし上記のようなオブジェクトにおいてageプロパティをwindow.setTimeout...内で使用したいというケースはよくあるケース。

ではどうするかというと、こうする。

• やり方 その１

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //  "30" が出力される

    
       window.setTimeout(function() {
          console.log(this.age) //  "30" が出力される
      }.bind(this), 1000);
   }
};

bind()は引数とされている this と callName直下のスコープ内にある this を同じものとする機能があるんじゃい。

• やり方 その2

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される
      let hoge = this;
    
       window.setTimeout(function() {
          console.log(hoge.age) //"30" が出力される
      }, 1000);
   }
};

hoge変数にpersonオブジェクトのスコープを代入してあげるんじゃい。

• やり方 その3

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される
    
       window.setTimeout(function() {
          console.log(this.age) //"30" が出力される
      }.call(this), 1000);
   }
};

callメソッドを使うんじゃい。

• やり方 その4

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される
    
       window.setTimeout(() => {
          console.log(this.age) //"30" が出力される
      }, 1000);
   }
};

アロー関数を使うんじゃい。
アロー関数内を使うと、アロー関数内でthisが定義されないんじゃい。
javascriptの性質上, アロー関数内でthisを見つけられない場合スコープチェーンを辿って
上の階層に同じ変数名のものを探すんじゃい。

最終的にグローバル変数まで探して見つかれなければ undefined を返すんじゃい。
こういう使い方があるんじゃい。

以上じゃい。

ps:
こういうやり方もあるよ〜」とかあれば教えて欲しいんじゃい。
勉強になるんじゃい。