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