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

More than 1 year has passed since last update.


誰に向けて


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