ここから本文です

JavaScriptについて質問なのですが、functionやconstructorのように()が付くものと...

izu********さん

2019/5/1515:31:22

JavaScriptについて質問なのですが、functionやconstructorのように()が付くものと、そのまま使用するものとの違いは何なのでしょうか??
きっとまだしっかりと意味を理解していないからこその疑問だと思いますが、

わかる方回答よろしくお願いいたします。

閲覧数:
23
回答数:
3

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2019/5/1517:20:46

関数名だけの表記は、そのまま単なる関数の名前。

────────────────
function ABC(){ ~ }
────────────────

という関数の定義があって、

────────────────
ABC;
────────────────

と記述しても、
関数の名前を叫んだだけで何も起こらない。

────────────────
var A = 10;
────────────────

のように変数を定義して、

────────────────
A;
────────────────

と書いても何も起こらないのと同じ。

────────────────
function ABC(){ ~ }

var func = ABC;
────────────────

と記述すれば、
変数 func に関数 ABC の参照を渡せるから、
func を関数として実行できるようになる。

────────────────
/* 定義 */
function ABC(){ ~ }
/* 代入 */
var func = ABC;
/* 実行( ①、② は同じ処理内容 )*/
func(); //①
ABC(); //②
────────────────

onclick のようなイベントハンドラとして関数を指定する場合も、
これと同じ。
要素の onclick に関数名を指定する。

────────────────
function ABC(){ ~ }
要素.onclick = ABC;
────────────────

関数名に () を付けると、
その場で関数が実行される。

────────────────
ABC(); // 実行される
────────────────

変数に ABC() のような () 付きの関数名を代入すると、
関数そのものではなく、
関数の実行結果(戻り値)が代入される。

────────────────
/* 定義 */
function ABC(){ return 10 }
/* 代入 */
var func = ABC();
/* 確認 */
console.log( func ); // 10
────────────────

  • ois********さん

    2019/5/1517:26:29

    ちなみに、
    関数定義に () をつければ実行される……
    ということで、無名関数

    ────────────────
    function(){ ~ }
    ────────────────

    に () をつけてその場で実行するのが、
    「即時関数」といわれるやつ。

    ────────────────
    ( function(){ ~ } )();
    ────────────────

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

hog********さん

2019/5/1721:17:00

おそらく、
1, const a = Func1();

2, const a = Func1;
の違いの事だろうと思うので、そこを中心にして説明します。

1のコードは、
「先ず関数(Func1)を実行して、その結果を変数(a)に代入」
という処理を行っています。
これは、そのままの意味です。

2のコードは、
「関数(Func1)の参照を変数(a)へと渡す」
という処理を行っています。
"参照"をしていので、変数(a)は、関数(Func1)と同じ挙動をします。
例えば、
function Func1(a){
return a*2;
}
var x = Func1(3);
var y = Func1;
console.log(x); // => 6
console.log(y); // => [Function: Func1]
console.log(y(5)); // => 10
console.log(Func1); // => [Function: Func1]
の様に、呼び出しの方法も、関数の挙動も同じになります。

プロフィール画像

カテゴリマスター

sii********さん

2019/5/1516:59:29

【関数の定義】

--------------------
function 関数名 (仮引数名) {
  関数の中身
}

const 変数名 = function 関数名 (仮引数名) {
  関数の中身
}
--------------------

functionを使って関数を定義する際は、括弧が必須です。

前者を関数宣言、後者を関数式と呼ぶことがありますが、関数式では関数名を省略することが可能です(いわゆる無名関数)。

--------------------
const 変数名 = (仮引数名1, 仮引数名2) => 関数の中身

const 変数名2 = 仮引数名1 => 関数の中身
--------------------

アロー関数では、仮引数が1つのみである場合、括弧を省略することができます。

------------

【関数の実行】

--------------------
関数名(引数)
--------------------

関数に括弧を付けると、関数の実行となります。逆に言うと、関数を実行するためには、後ろに括弧を付けなければなりません。

関数ではないものに対し、後ろに括弧を付けて、関数として実行しようとすると、エラーが発生します。

--------------------
new コンストラクタ名(引数)
new コンストラクタ名
--------------------

newの場合は、文法上、括弧を付けても付けなくても構いません。括弧を省略した場合は、引数無しとして扱われます。例えば、

--------------------
new Date()
new Date
--------------------

上の2行は全く同じ処理となります。

コンストラクタによっては、引数を必須としていることもあり得るので、その場合は括弧を付けて、引数を渡す必要があります。

------------

【即時関数】

--------------------
//↓←(1)
(function () { // ←(2)
  関数の中身
})() // ←(3)
--------------------

定義と同時に実行される関数を、即時関数と呼ぶことがあります。即時関数には色々な書き方がありますが、このような書き方もよく用いられます。

3組の括弧がありますが、(1)は定義した関数全体を囲う括弧、(2)はfunctionの後に続く括弧、(3)は関数全体を囲う括弧に続く括弧とします。

(1)の括弧は、関数宣言を関数式に変更するためのものです。行がfunctionから始まると関数宣言となり、関数宣言では即時関数が使えずエラーとなるので、括弧で囲うことで関数式にしています。

--------------------
!function () {
  関数の中身
}()
--------------------

とにかくfunctionで始まっていなければいいので、このように、括弧以外の記号を使うこともあります。

(2)の括弧は、最初に述べたように、functionを使って関数を定義する際、仮引数を設定するために必要な括弧です。

(3)は、先程述べたとおり、関数の後ろにカッコを付けることで、関数を実行しています。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる