質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

654閲覧

JavaScriptの関数呼び出しにおける括弧の有無による違い

tmp-user

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/02 00:40

お世話になっております。

質問なのですがJavaScriptにて関数を呼び出す際にの()の有無による違いを伺いたいです。

「ゲームで学ぶJavaScript入門」という本を購入したのですが、関数呼び出しの際に
括弧が付いていないものが多数見られます。

ですが最近現場に配属されてJavaScriptもさわっていますが関数の呼び出しでは
test()のように後ろに括弧を付けています。

これらの違いは何なのでしょう。

本書のコードで括弧無しにした場合、ただしく動作しないケースもあったので
単純に省略しているだけ、というわけでもないのかと思い質問させていただきました。

備考:本書は2015年出版なのでもしかしたら書き方に差異があるかもしれません

html

1<input type="button" id="BTN">

JavaScript

1window.onload = function(){ 2 document.getElementById("BTN").onclick = test; 3} 4 5funtcion test(){ 6 alert('Hello'); 7}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

関数呼び出しの際に括弧が付いていないものが多数見られます。

認識が間違っています。

関数の後ろに括弧を付けることで関数を呼び出します。付けないと呼び出しません。

括弧の付いていない関数名だけの場合は、呼び出さずに、関数自体を表します。

JavaScript

1 2function foo(){ 3 alert("foo"); 4 return 1; 5} 6 7var aaa=foo; // 関数自体の代入 8var bbb=foo(); // 関数を呼び出して返り値 1 の代入 9aaa(); // 関数fooの呼び出し

投稿2020/04/02 00:48

otn

総合スコア84421

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

まず関数を実行させるにはお尻に()を付ける事は絶対です。
お尻()を確認するとJavaScriptは左の変数・値を関数だと認識して実行しようとします。

もしそれが関数ではなかったらJavaScriptはエラーで落ちます。

そしてJavaScrriptのユニークな仕様として、
関数を変数に所持したり、関数の引数に登録したり、戻り値で渡したりできます。
第一級関数と呼ばれ、宣言した関数をあちこちに持ち運べます。


関数は防犯グッズみたいなものです。
最も効果的な場面で使わなければ意味がありません。

親が子供に防犯グッズを渡す時を考えてみましょう。
「不審者に連れ去られそうになったら使いなさい」と渡しますよね?
使ってる最中のビービー鳴ってる防犯グッズを持たせても意味がありません。

それと同じ仕組みで、
JavaScriptには他人に関数をもたせて「ふさわしいタイミングで実行させる」という仕組みがあります。

イベントハンドラや非同期処理といったワードで調べれば具体例が出てきます。


具体例を一つあげましょう。
例えばボタンをクリックしたら処理が走ってほしい場面があったとします。

document.getElementById("BTN").onclick = 関数;

これは「ボタンが押されたら」という状況(イベント)で、
持たせた関数を実行しなさいという指示になります。

実行して値に変化した後のものを持たせても全く意味がありません。

ふさわしい状況まで使うのを待て!
未実行の関数を渡すから意味があるのです。

投稿2020/04/02 01:39

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

.onclick = test;

これはonclickプロパティにtest関数をコールバックとして設定しています。
結果としてclickしとときにtestが実行されますが
あまりいい書き方ではないですね

投稿2020/04/02 00:44

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/04/02 00:51

今だったらこんな風にかく感じですかねぇ・・・・ <script> window.addEventListener('DOMContentLoaded', ()=>{ const test=()=>{ alert('Hello'); } document.querySelector('#BTN').addEventListener('click',test); }); </script> <div id="BTN">button</div>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問