JavaScript 関数の書き方(無名関数とArrow関数)

JavaScript 関数の書き方

この記事を読んでわかること

• 関数の書き方
• 無名関数とArrow関数の違い
• 関数の呼び出し方について

無名関数とArrow関数の違い

無名関数とArrow関数の大きな違いは、thisがどういう役割になるかです。

また、下記のような制約もあります。

• this や super への結びつけを持たないので、メソッドとして使用することはできません。
• arguments や new.target キーワードがありません。
• call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。
• コンストラクターとして使用することはできません。

（参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions ）

基本的なJavaScriptの関数の書き方

今回は三角形の面積を求める関数を例にして解説をしていきます

無名関数の書き方

// 三角形の面積
function triangleArea(base, height) {
  return (base * height) / 2
}

Arrow関数の書き方

// Arrow関数で三角形の面積
const triangleArea_1 = (base, height) => {
  return (base * height) / 2
}

JavaScriptの関数の呼び出す方法

関数の呼び出し方については、2つともほとんど変わりません。

具体的な呼び出し方については、下記のような流れになります。

無名関数の呼び出し方

var base = 4
var height = 4

// 三角形の面積
function triangleArea(base, height) {
  return (base * height) / 2
}

console.log(triangleArea(base, height))

Arrow関数の呼び出し方

var base = 4
var height = 4

// Arrow関数で三角形の面積を求める
const triangleArea_1 = (base, height) => {
  return (base * height) / 2
}

console.log(triangleArea_1(base, height))

まとめ

• Arrow関数と無名関数の違いについて
  • this や super への結びつけを持たないので、メソッドとして使用することはできません。
  • arguments や new.target キーワードがありません。
  • call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。
  • コンストラクターとして使用することはできません。

初心者におすすめの参考書