誰に向けて

JS初学者に向けて

1.関数宣言

最もオーソドックスな書き方。

pikotaro_func.js

function pikotaro(pen,fruits) {
  return fruits + pen;
}

console.log(pikotaro('pen','apple'));  //->applepen

2.関数リテラル

変数に関数を代入する形式の書き方。

pikotaro_lt.js

let pikotaro = function(pen,fruits) {
  return fruits + pen;
}

console.log(pikotaro('pen','apple'));  //->applepen

3.アロー関数

関数リテラルをシンプルにした書き方。
'function'を省略する。

pikotaro_arrow.js

let pikotaro = (pen,fruits) => {
  return fruits + pen;
} //処理が1つの場合、{}を省略できる。

console.log(pikotaro('pen','apple'));  //->applepen

それぞれの関数の違い

1.呼び出しの違い

関数宣言のみ、宣言したら順不同でどこからでも呼び出せる。

pikotaro_func.js

console.log(pikotaro('pen','apple'));  //->applepen

function pikotaro(pen,fruits) {
  return fruits + pen;
}

console.log(pikotaro('pen','apple'));  //->applepen

関数リテラルとアロー関数は、宣言前に呼び出すと怒られる。

pikotaro_lt.js

console.log(pikotaro('pen','apple'));  //->怒られる

let pikotaro = function(pen,fruits) {
  return fruits + pen;
}

console.log(pikotaro('pen','apple'));  //->applepen

pikotaro_arrow.js

console.log(pikotaro('pen','apple'));  //->怒られる

let pikotaro = (pen,fruits) => {
  return fruits + pen;
} //処理が1つの場合、{}を省略できる。

console.log(pikotaro('pen','apple'));  //->applepen

2.オブジェクト生成の違い

オブジェクトを生成する関数を、
コンストラクタ関数と呼ぶ。

オブジェクトはフィールドを持てる。
例えば、コンビオブジェクトは「ボケ」「ツッコミ」などのフィールドを持てる。

関数宣言と関数リテラルではコンストラクタ関数を作成できる。

combi_func.js

function Combi(boke,tsukkomi) {
  this.boke = boke;
  this.tsukkomi = tsukkomi;
}

var downtown = new Combi('matsumoto','hamada');
console.log(downtown);  //->Combi {boke: "matsumoto", tsukkomi: "hamada"}

combi_lt.js

var Combi = function(boke,tsukkomi) {
  this.boke = boke;
  this.tsukkomi = tsukkomi;
}

var downtown = new Combi('matsumoto','hamada');
console.log(downtown);  //->Combi {boke: "matsumoto", tsukkomi: "hamada"}

アロー関数では、コンストラクタ関数を作成できない。

combi_arrow.js

var Combi = (boke,tsukkomi) => {
  this.boke = boke;
  this.tsukkomi = tsukkomi;
}

var downtown = new Combi('matsumoto','hamada');
console.log(downtown);  //->怒られる

まとめ

表にすると以下のようになる。

	関数宣言	関数リテラル	アロー関数
呼び出し	どこでも呼び出せる	宣言箇所以降	宣言箇所以降
オブジェクト生成	できる	できる	できない
this	呼び出し元によって変わる	呼び出し元によって変わる	宣言した時点で固定

お笑い好きによるJavaScriptの関数宣言まとめ