JavaScriptのif入れ子について

Question

初心者なので拙い文章ですいませんm(_ _)m
JavaScriptでifの中にifを入れる場合、中に入れるif、else ifの数に制限などはあるのでしょうか？

Comments

[m.ts10806]

https://teratail.com/help/question-tips#questionTips1-2 >投稿前に自分で一度調べてみましょう。そして調べたことを元に、一度は自分でやってみましょう。

[m.ts10806]

文章が拙いのは仕方ないところもありますが、内容が拙いのはこういう技術系質問サイトではマナー・ルール違反です。

[Lhankor_Mhy]

そうですか？　これはよい質問だと思いますが。

[m.ts10806]

「調べてこういう記事を見つけた（やってみた）が分からない（その内容が質問に書いてある）」ならまだ分かりますが。

[think49]

「範囲が広すぎる」「自分の意見をいわない」という意味では回答者のリスクが不本意に高い質問だとは思います。 最悪のケースとして「それは私が求めている答えではありません」「それは知っていました(別の回答をBA)」「やっぱり、そうなるんですね(その回答を仕方なくBA)」な返信が想像できます。

Answer 1

JavaScriptでifの中にifを入れる場合、中に入れるif、else ifの数に制限などはあるのでしょうか？

技術的制約はありませんが、可読性の観点から深いネストは敬遠されます。

• javascript if文 ネスト 深い - Google 検索

Re: unix-yuto さん

Comments

[m.ts10806]

> ネストの深さは闇の深さ
覚えがありすぎる。。。

[miyabi_pudding]

> mts10806さん
禿同です笑
あと僕の場合、三項演算子使いすぎで、わかりにくいって言われた逆パターンもあります　笑

Answer 2

var i = 0
if (++i)
if (++i)
if (++i)
//...
if (++i) 1;
console.log(i);

試してみたところ、当方の環境(win7、Firefox60)ですと、3010を超えるとスタックが溢れてエラーになりました。
また、

var i = 0
if (++i)
if (++i)
if (++i)
//...
if ( (++i) ) 1;
console.log(i);

としてみたところ、3010でもエラーになりましたので、if文以外のスタックやその他メモリの状況に左右されるかと思います。

Answer 3

あまり意識していない方も多いですがjavascriptにはelseifという構文がありませんので
常に真偽のどちらかの判定しかしていません。
「else if」は実際には「else{if(){　・・・}}」というelseのブロックの中でifを
ネストしているにすぎません。
なので論理的にはネストを気にするのはあまり意味がなく、あくまでも見た目上のネストだけ
気にしたほうがいいという認識がよいと思います

Comments

[miyabi_pudding]

し、知らなかった・・・。
確かに、{}でブロック分けしなくても動くってことは、そういうことですもんね。
勉強になりました。
横槍失礼しました。

[think49]

> 「else if」は実際には「else{if(){　・・・}}」というelseのブロックの中でifを
> ネストしているにすぎません。

ネストしているわけではありません。
この事例では BlockStatement -> IfStatement 内の BlockStatement の形でネストしていますが、IfStatement の構文は

if (Expression) Statement else Statement

であり、else に後続する Statement が IfStatement を含むことが出来る事で、再帰的に IfStatement を呼び出し、

if (Expression) Statement else IfStatement

となり、

if (a) {} else if {}

が成立します。
おそらく、yambejp さんは理解しているのであろうと思いますが、-評価の理由は「ネスト」という単語を使ったことにあるようにも感じています。
http://www.ecma-international.org/ecma-262/8.0/#sec-if-statement

[yambejp]

TO:think49さん、解説ありがとうございます。
MDNではelseにifはネストしていくと読み取ったのですが
どうも私の解釈がオカシイのかもしれません
ご指摘をもとによくよく噛み砕いて解釈をしてみます

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else

Answer 4

まず、最近のコンピュータは性能が高いので、何か上限があったとしても実用上問題が起こることはまずありません。

その上で、原理的に上限がありうるかという点について考えます。
if文のネスト(入れ子)ですが、単純に考えると、内部的にそのようなものは存在しません。
if文の開始部分が「条件判定し、満たされないなら、if文の終了地点へ飛ぶ(goto)」という動作で、if文の終了地点には何もありません。
なのでif文にネストになるような構造はそもそも無いのです。

ただ、スコープを切り替えたり何らかの最適化のためにif文のネストが何らかの意味を持つことも考えられます。
その場合であっても、JavaScriptが動くレベルのCPUなら、固定のスタックを食いつぶしてメモリ全体の制限より早く限界が来るみたいなことはないのではないかと思います。

---

【追記】
上記のように考えていたわけですが3000程度で上限に達するとは予想外でした。すみません。
私も試してみましたが数は違うもののどのブラウザでも(Firefox,Chrome,IE,Edge)千や万単位でメモリ不足や再帰の上限でエラーになりました。
この程度のネスト数でメモリ不足になる理由は私には分かりません。

Comments

[miyabi_pudding]

横槍失礼します。
やってみて動き確認してみましたが、そういうことなんですね。
ブロックで分けるのは、あくまで後の処理に影響を及ぼさないためにつけるだけであって、
本来的には、ifの仕様としては入れ子の概念は存在しないんですね。
大変勉強になりました。

Answer 5

試してみてはいかがでしょうか。

動くサンプル：https://jsfiddle.net/eb23wszf/

---

【Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！】
https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000#Consoleパネル

Answer 6

構文チェックをしてくれるeslintの中にcomplexityというルールがあり、
そのデフォルト設定は『20』となっています。
もしかしたらこの数字は、世界のエンジニアの心の叫びを集約した数字かもしれません。
日頃から他人に優しいコードを書くように心掛けたいと思います。
（他人というのは１年後の自分も含みます・・・）

Answer 7

ifやelseの数や制限については、他の方が答えてらっしゃるので、別角度から。

else if を複数以上使う場合、switch構文の方が、よかったりします。
例えば下記のようなパターン

変数juiceに、なんのジュースが入ってるかを判別する時とかです。

var juice = 'オレンジ'
// ↑ここでは決め打ちですが、juiceに何が入ってるかわからないとします。

switch(juice){
  case 'オレンジ':
    console.log('うーまいー！');
    break;
  case '抹茶':
    console.log('苦い・・・');
    break;
  case 'レッドブル':
    console.log('飲みすぎないように');
    break;
  default:
    console.log('なんだこれ？');
    break;
}

あと、ifが一行で値だけが変化するって時は三項演算子を使うと、ネストが抑えられるかと思います。

var hogehoge = true
// ↑trueかfalseが入ってる変数とします。

var message = hogehoge ? 'ほげほげいるよ' : 'ほげほげいない！';
// hogehogeがtrueだと左側、falseだと右側を使います。

if (message.indexOf('いない') != -1) {
  // messageに”いない”って文字列が入ってると、下記が実行されます
  console.log('いないらしい・・・');
  return false;
}

ちょっと、質問と趣旨が変わってしまってすみませんが、
switch構文や、三項演算子をうまく使えば、else ifも、ifのネストもけっこう抑えられるかと思います。

お役に立てられれば幸いです。