# 改めてシリーズ-ArrowFunctions

目次

# はじめに

業務で使用している諸々の知識、使ってはいるものの本当に理解しているとは言い難いと感じるものもあります。
そのため今回改めてきになる知識を学び直す事にしました。

まずはどうも理解がしにくい(と自分は感じる)ArrowFunctionsから取り掛かります。

# 取りも直さずMDNで確認

MDN-ArrowFunctions

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

わかるような分からんような。
そんな時は具体例で記述していきます。

苗字と名前を連結する、引数を二つ持つ関数を定義してみよう。

# 書き換えてみよう

# 第1段階(Function)

const userName = function(first, last) {
  return first + last
}
userName('js','tarou')
// jstarou

馴染深いというか古式ゆかしい昔ながらのjsである。
ここから少しづつ現代に寄せていく。

# 第2段階(ArrowFunctions)

まずは単純にArrowFunctionsに変えます。

const userNameArrow = (first, last) => {
  return first + last
}
userNameArrow('js','arrow')
// jsarrow

# 第3段階(ArrowFunctionsかつreturnが1つ)

さらにreturnが一つの場合は{}とreturnが省略できます。
というわけでさらに省略。

const userNameArrowShort = (first, last) => first + last
userNameArrowShort('js','short')
// jsshort

# 第4段階(ArrowFunctionsかつreturnが1つかつ引数が1つ)

さらにさらに引数が一つだと()も省略が可能です。

const userNameArrowShortOne = first => first + 'one'
userNameArrowShortOne('js')
// jsone

# thisを束縛しないとは？

# 旧来のFunction

旧来のfunctionではthisは、関数が呼び出された呼び出し元のオブジェクトをさします。

var greetBoy = {
  name: "Tomo",
  handleGreet: function (message, handler) {
    handler(message)
  },
  greet: function() {
    var self = this
    this.handleGreet("Hello ", function(message) {
      name = "innerTomo",
      console.log(message + this.name, self.name)
    })
  }
}
greetBoy.greet()
// Hello InnerTomo Tomo

なのでvar self = thisというような形であえて親のスコープを退避してあげなければthis.nameはhandleGreet関数のスコープの中のnameをさす事になります。

# ArrowFunctions

かたやArrowFunctionsの場合は、その関数が定義されたスコープ自身をさします。

var greetBoy = {
  name: "Tomo",
  handleGreet: function (message, handler) {
    handler(message)
  },
  greet: function() {
    var self = this
    this.handleGreet("Hello ", (message) => {
      name = "innerTomo",
      console.log(message + this.name, self.name)
    })
  }
}
greetBoy.greet()
// Hello Tomo Tomo

この場合はhandleGreetが定義された定義されたスコープ自身(greet関数が属するスコープ)を指します。
そのためthis.nameは親のスコープのname(この場合はTomo)を参照することになります。