20
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-15

#誰に向けて

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?