0
0

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 1 year has passed since last update.

関数リテラル、関数宣言、関数コンストラクタによる挙動の違いをまとめた

Posted at

関数リテラルだとうまくいかないけど、関数宣言で書き換えてみたらうまくいった、なんてことがあったので、それぞれについてまとめてみます。
調べて自分の言葉でまとめているので、言い回しが不適切な部分もあると思います。見つけられた場合は訂正してくださると助かります。

宣言の違い

関数リテラル

let func1 = function(){
    console.log("関数リテラル");
}

無名関数として宣言する。
再帰関数であれば下のように名前を付けて宣言するが、基本上で良い。
(再帰関数でも上のようにして宣言出来なくはない。)

let func1 = function function1(){
    console.log("関数リテラル");
}

関数リテラルは、「関数式」、「function演算子」とも呼ばれる。

関数宣言

function func1(){
    console.log("関数宣言");
}

「function文」とも呼ばれる。

関数コンストラクタ

let func1 = new Function(console.log("関数コンストラクタ"));

「functionコンストラクタ」と呼んだ方が適切なのかもしれない。
が、ここでは変わらず関数コンストラクタと書く。

let 関数名 = new Function(引数1,引数2,,実行する処理1;実行する処理2;);

上のようにして書くが、newは省略でき、引数はなくてもよい。

実験してみる

明らかに蛇足な記述もあるが、そのまま残して実験結果とする。
console.log("a");などは、関数が呼び出された場合、どの記述で呼び出されたのか分かりやすくするために書いた。

関数リテラル

func1;
console.log("a");
func1();
console.log("b");
console.log(func1);
console.log("c");
console.log(func1());
console.log("d");

let func1 = function(){
    console.log("関数リテラル");
}

console.log("--------------関数記述後---------------------")

func1;
console.log("a");
func1();
console.log("b");
console.log(func1);
console.log("c");
console.log(func1());
console.log("d");

実験結果

関数記述前はどの式も関数を呼び出せなかったため、コメントアウトして実行した。

a
b
c
d
--------------関数記述後---------------------
a
関数リテラル
b
ƒ (){
    console.log("関数リテラル");
}
c
関数リテラル
undefined
d

先に書くが、func1;ではどの関数の宣言の仕方でもerrorとなった。
また、cとdの間のconsole.log(func1());で起こっていることは、

  1. ()内のfunc1()が実行され、関数リテラルと表示される
  2. func1()の戻り値をconsole.logしようとするが、設定されていなかったのでundefined と表示される

と考えた。

関数宣言

関数の記述以外の部分は関数リテラルの場合と同じなので省略する。

function func1(){
    console.log("関数宣言");
}

実行結果

a
関数宣言
b
ƒ func1(){
    console.log("関数宣言");
}
c
関数宣言
undefined
d
--------------関数記述後---------------------
a
関数宣言
b
ƒ func1(){
    console.log("関数宣言");
}
c
関数宣言
undefined
d

関数コンストラクタ

let func1 = new Function(console.log("関数コンストラクタ"));

こちらも関数記述前は呼び出す

実行結果

a
b
c
d
関数コンストラクタ
--------------関数記述後---------------------
a
b
ƒ anonymous(
) {
undefined
}
c
undefined
d

主に参考にしたサイト

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?