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

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

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

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

Q&A

解決済

3回答

5625閲覧

戻り値指定のないreturn文の挙動について

aae_11

総合スコア178

JavaScript

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

0グッド

1クリップ

投稿2019/08/16 02:28

編集2019/08/16 02:33

戻り値の指定がない場合のreturn文の挙動について、お聞きしたいことがあります。

js

1<script> 2 let isPlaying = false; 3 4 window.addEventListener('click',() => { 5 if(isPlaying === true){ 6 return; 7 } 8 9 isPlaying = true; 10 console.log('ok'); 11 12 }); 13 14 15 </script>

上記コードを実行しますと、一度目のクリックの際は、console.logに「ok」の文字が表示されますが、2度目のクリック以降は表示されません。
2度目以降のクリックでconsole.logが表示されないのは、if文が原因かと思うのですが、何故if文の結果がtrueであった場合に、それ以降の処理がされないのかが分かりません。
こちらの現象につきまして、ご説明頂けましたら幸いです。

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

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

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

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

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

guest

回答3

0

起きている現象は「戻り値の指定がない場合のreturn文」とは直接関係ないのでは。

returnの仕事はあくまで(大抵の言語で)「関数の終了」を表すもので、引数があろうとなかろうと宣言された時点で関数を終了します。
それだけです。

今回は初期値falseの変数isPlayingが1度目のクリック時点でfalseになるので、その後は画面リフレッシュでもされない限りずっとisPlaying===trueが成り立って実行されている関数(addEventListenerの第2引数の関数)が終了しています。

「その後には処理をしない」から空returnを入れたのではないのですか?
(意味が分からず入れているのか、他人のコードを持ってきた疑問なのかが分からない)

投稿2019/08/16 02:47

m.ts10806

総合スコア80765

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

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

0

何故if文の結果がfalseであった場合に、それ以降の処理がされないのかが分かりません。

この疑問がわかりません。2回目以降はisPlaying === trueが成立するため、そこで脱出してしまうと思うのですが。

投稿2019/08/16 02:30

maisumakun

総合スコア145123

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

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

aae_11

2019/08/16 02:34

質問を修正しました。falseではなく、trueでした。 そこで脱出してしまうとは、window.addEventListenerのブロックを抜けるという意味でしょうか?
maisumakun

2019/08/16 02:37

ブロックではなく、addEventListenerの引数となっている関数を脱出します。
guest

0

ベストアンサー

window.addEventListenerのブロックを抜けるという意味

イベントを登録したときの関数ブロックとif文内のブロックがうまく区別できていない気がします。

下記のコードはブラウザのウィンドウに対してクリックイベントを登録するだけのコードで、ブラウザのウィンドウのどこかをクリックすれば第二引数内の関数が実行されます。

javascript

1 window.addEventListener('click',() => { 2 //クリック時の処理を記述 3 });

その第二引数に渡した関数の中身は下記のようになっています。

javascript

1 if(isPlaying === true){ 2 return; 3 } 4 5 isPlaying = true; 6 console.log('ok');

isPlayingは外側のスコープにある変数で、初期値はfalseになっています。
そのため、1度目のクリックではif文の条件にあるisPlaying === trueと評価されます。

しかし、if文の後にisPlayingtrueにする処理が記述されているため、この行が実行された後、外側のスコープにある変数isPlayingtrueになります。

2度目のクリックではif文の条件にあるisPlaying === trueと評価されます。
真と評価された場合、if文は自身のブロックにある処理を実行します。

このコードではisPlaying === trueだった場合return;のみを呼ぶようになっています。returnの意味についてはm.ts10806さんの仰る通り、関数の終了を表すものです。
関数とは、function hoge(){}function(){}()=>{}等の引数と処理を記述できる構文のことです。

このコードにおける関数とはaddEventListenerメソッドの第二引数に渡した下記コードのことです。

javascript

1() => { 2 if(isPlaying === true){ 3 return; 4 } 5 6 isPlaying = true; 7 console.log('ok'); 8}

returnが呼ばれた時点で関数の実行は終了しますから、関数内においてreturnを実行した行以降の処理が呼ばれることはありません。

投稿2019/08/16 03:28

編集2019/08/16 03:41
BluOxy

総合スコア2663

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

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

aae_11

2019/08/16 03:37

ご丁寧に教えてくださりありがとうございます。 BluOxyさんのおっしゃります通り、if文のブロックと関数内のブロックを勘違いしてしまっておりました。 returnし、ブロックを抜けるのは、addEventlistenerの引数である関数ですよね。 ご丁寧にご説明くださり、助かりました。
BluOxy

2019/08/16 03:39

あ、勘違いされていたんですね。 そうではないと思い、書いていた記述を削除してしまいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問