HTML
JavaScript
初心者
まとめ
新人プログラマ応援

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

誰に向けて

  • JS初学者に向けて

目次

1.関数宣言
2.関数リテラル
3.アロー関数
4.それぞれの違い
5.まとめの表

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 呼び出し元によって変わる 呼び出し元によって変わる 宣言した時点で固定