JavaScriptの1行のステートメントで中括弧は必要ですか?


161

中かっこを1行のステートメントに含めると、JavaScriptに害を及ぼす可能性があると聞いたことがあります。私はもうその理由を思い出せず、グーグル検索はあまり役に立たなかった。

JavaScriptで中括弧ですべてのステートメントを囲むことをお勧めするものはありますか?

誰もがそうしているように私は尋ねています。


5
注:1行に複数のステートメントがある場合でも、最初のステートメントのみがスコープを想定しているため、「1行のステートメント」ではなく単一のステートメントになります
Kris Ivanov

1
あなたはこの回答で
Blorgbeardは

@Blorgbeard:いいえ、実際にその回答に返信しました。
タワー

ああ、そうか。気にしないでください:)
Blorgbeardは'25

ここにあなたの答えです:medium.com/@jonathanabrams/...
エルワン・ルグラン

回答:


203

番号

しかし、それらは推奨されます。ステートメントを拡張する場合は、それらが必要になります。

これは完全に有効です

if (cond) 
    alert("Condition met!")
else
    alert("Condition not met!")

ただし、中括弧を使用することを強くお勧めします。なぜなら、自分(または他の誰か)がステートメントを展開する場合は必ず必要だからです。

これと同じ慣習が、ブレース付きのすべてのC構文スタイル言語に従います。C、C ++、Java、PHPでさえ、中括弧なしの1行のステートメントをサポートしています。たった2つの文字を保存しているだけで、一部の人のブレーススタイルでは行を保存していません。私は(次のような)完全なブレーススタイルを好むので、少し長くなる傾向があります。トレードオフは、非常に明確なコードの可読性があるという事実と非常によく一致しています。

if (cond) 
{
    alert("Condition met!")
}
else
{
    alert("Condition not met!")
}

28
+1、有益な回答。個人的には、私はこの「推奨される」ことを行うのが便利だとは思っていません。私はpythonをコード化したことがないので、物事を挿入するだけではなく、インデントが問題になることを期待します。ステートメントを追加する場合は、中括弧も追加します。常に。それが私に噛んだ一度も思い出せない。Cではなく、C#ではなく、JavaScriptではありません。
ヤコブ

16
@カーク:ダグラスクロックフォードはそれをお勧めします。それは主観的な個人的な決定であることに同意しますが、グループで作業するときは、中括弧を入力する方が簡単です。
ジョシュK

10
@ジョシュ、おお、まあクロックフォードはそれを言った。それは最後の言葉でなければなりません。;)(冗談です)問題は、この点の主観性がすべてのCライクな言語に及び、全体にわたって(両方の立場について)強い意見が見つかることです。
Kirk Woll、2011年

11
私の個人的な経験によると、ブレーサーを配置しないと、チームで作業するときに大きな混乱を招く可能性があります。
拝啓

4
常に中かっこ{}を使用することをお勧めします。@Arxが言ったように、省略した場合、エラーが発生する余地が大きくなります。中括弧を使用しなかったため Apple はiOSのSSL / TLSにバグさえありまし
Keenan Lidral-Porter

94

読みやすさの側面があります-複合ステートメントがある場合、非常に混乱する可能性があります。インデントは役立ちますが、コンパイラ/インタープリタには何の意味もありません。

var a;
var b;
var c;

//Indenting is clear
if (a===true)
  alert(a); //Only on IF
alert(b); //Always

//Indenting is bad
if (a===true)
  alert(a); //Only on IF
  alert(b); //Always but expected?

//Nested indenting is clear
if (a===true)
  if (b===true)
    alert(a); //Only on if-if
alert (b); //Always

//Nested indenting is misleading
if (a===true)
  if (b===true)
    alert(a); //Only on if-if
  alert (b); //Always but expected as part of first if?

//Compound line is misleading
//b will always alert, but suggests it's part of if
if (a===true) alert(a);alert(b); 
else alert(c); //Error, else isn't attached

そして、拡張性の側面があります:

//Problematic
if (a===true)
  alert(a);
  alert(b); //We're assuming this will happen with the if but it'll happen always
else       //This else is not connected to an if anymore - error
  alert(c);

//Obvious
if (a===true) {
  alert(a); //on if
  alert(b); //on if
} else {
  alert(c); //on !if
} 

常に角かっこがあれば、そのブロック内に他のステートメントを挿入することができると考えています。


4
そのため、常に1行として使用する必要がありますif (a===true) alert(a);。今では明らかです!
ジョアンピメンテルフェレイラ

1
左中括弧と右中括弧を使用すると、条件が明確になります。私たちの間の夢想家にとっては、左と右の飛ぶ鳥とも呼ばれます。
HalfMens

61

質問は、1行のステートメントについて尋ねます。しかし、提供されている多くの例は、複数の行ステートメントに基づいて中括弧を省略しない理由を示しています。好みのコーディングスタイルであれば、1行でブラケットを使用しないことは完全に安全です。

たとえば、これで問題ないかという質問です。

 if (condition) statement;

これが大丈夫かどうかは尋ねません:

 if (condition)
   statement;

括弧を省略すると、構文が少なくなり、コードが読みやすくなります。

私のコーディングスタイルは、コードがブロックでない限り、ブラケットを使用しないことです。また、1行に複数のステートメントを使用しないでください(セミコロンで区切られます)。私はこれが読みやすく、明確であり、「if」ステートメントに範囲の問題がありません。その結果、単一のif条件ステートメントでブラケットを使用すると、3行が必要になります。このような:

 if (condition) {
   statement;
 }

1行のifステートメントを使用すると、垂直方向のスペースが少なくなり、コードがコンパクトになるため、望ましい方法です。

私は他の人にこの方法を使用するよう強制しませんが、それは私にとってはうまくいき、括弧を省くことがコーディング/スコープエラーにつながる方法で提供される例にこれ以上同意することはできませんでした。


1
私はいつも中かっこを必ず含めるべきだと感じていました...しかし、今それを考え直しています。あなたはあなたの側にairbnbスタイルガイドを持っています!
sendle

1
しかし、ほとんどのコードフォーマッタがそれを2行形式に変更し、問題のあるコードに戻ったことを忘れます。垂直方向のスペースの引数はばかげています。読みやすさは常に勝ち、今日の画面は巨大です。
キム

1
1行のステートメントを囲むために各ブラケットに追加された2行は、コードの保守(非常に慎重な開発者でさえ)によって引き起こされる可能性のある損傷と比較して、大きなコストではありません。あなた自身は神秘的なスキルを持つ優れた開発者になることができますが、同僚がそうであると想定することはできません。KISS、物事をコンテキストでラップし、他の人にとって可能な限り簡単にしてください。そうしないと、最終的に問題が発生します。
Maciej Tokarz

@senderleこれを制御するeslintルールは次の場所にあります:eslint.org/docs/rules/curly#multi /*eslint curly: ["error", "multi"]*/
silkfire

15

技術的にはありませんが、それ以外の場合は絶対にあります。

「個人的な好み」、「コードは問題なく動作する」、「私にとっては問題なく動作している」、「もっと読みやすい」ということを忘れてください。yada yada BS。これは、間違いを犯し、コーディングしているときに間違いを犯しやすいと私が信じている場合、非常に深刻な問題に簡単につながる可能性があります(信じられない?、有名なApple go to failバグをチェックしてください)。

議論:「個人の好み」

いいえそうではありません。あなたが火星を離れる一人のチームでない限り、いいえ。ほとんどの場合、他の人があなたのコードを読んだり変更したりするでしょう。真面目なコーディングチームでは、これが推奨される方法であるため、「個人的な好み」ではありません。

引数:「コードは問題なく実行されます」

スパゲッティコードもそうです!作成しても大丈夫ですか?

議論:「私にとってはうまく機能している」

私のキャリアでは、この問題が原因で作成された非常に多くのバグを見てきました。何回コメントアウトされ'DoSomething()'、なぜ'SomethingElse()'が呼び出されるのか困惑したことを覚えていないでしょう:

if (condition) 
    DoSomething();
SomethingElse();

または、「SomethingMore」を追加して、それが呼び出されないことに気づかなかった(インデントが別の意味であるとしても):

if (condition)
  DoSomething();
  SomethingMore();

ここに私が持っていた実際の例があります。誰かがfind&replace "console.log"=> を実行できるようにすべてのロギングをオフにすることを望んでいました//"console.log"

if (condition) 
   console.log("something");
SomethingElse();

問題がわかりましたか?

「これらはとても些細なことですが、私はそんなことは決してしません」と思っても 常にあなたより劣ったプログラミングスキルを持つチームメンバーがいることを覚えておいてください(うまくいけば、あなたはチームで最悪ではありません!)

議論:「もっと読みやすい」

私がプログラミングについて何かを学んだとしたら、それは単純なことが非常に複雑になるということです。これは非常に一般的です:

if (condition) 
    DoSomething();

異なるブラウザー/環境/ユースケースでテストされた後、または新しい機能が追加された後、次のようになります。

if (a != null)
   if (condition) 
      DoSomething();
   else
      DoSomethingElse(); 
      DoSomethingMore();
else 
    if (b == null)
         alert("error b");
    else 
         alert("error a");

これとこれを比較してください:

 if (a != null) {
    if (condition) { 
       DoSomething();
    }
    else {
       DoSomethingElse();
       DoSomethingMore();
    }
 } else if (b == null) {
    alert("error b");
 } else {
    alert("error a");
 }

PS:ボーナスポイントは、上記の例のバグに気付いた人に与えられます。


2
明らかなバグはDoSomethingMore()です。しかし、別のバグもあります。aがnullでbがnullの場合、「エラーb」のみが発生し、「エラーa」は発生しません。
ロケットの高速化

あなたの例では、開発チームはコーディングの方法をまったく知りません、中括弧はそれらを助けません...
Carlos ABS

例の一部は、Apple開発チームからのものです
Caner

13

メンテナンス性の問題はありません!

皆さんの問題は、どこにでもセミコロンを置くことです。複数のステートメントに中括弧は必要ありません。ステートメントを追加する場合は、カンマを使用してください。

if (a > 1)
 alert("foo"),
 alert("bar"),
 alert("lorem"),
 alert("ipsum");
else
 alert("blah");

これは期待どおりに実行される有効なコードです!


2
あなたは意味しないifelsealertしていないIfElseAlert
アニッシュグプタ2012年

わあ、知らなかったので、教えてくれてありがとう!ほとんどの人はこの重要な詳細を省いているようです。
Hendeca 2014年

13
これはJavaScriptで機能しますが、あなたがそうしたいと思う理由は私を超えています。私は大多数の開発者がこれを認識していないと推測しています(これは私がこれを読む前に含めていました)。このことは、開発者の間ですぐに保守性の問題になると思います。時には、最も賢い方法が最善ではありません。
Simon

14
これは恐ろしいことです。誰かが今、第二のブロックの最後の文に、あなたがすることができ、バグ持ちでコンマにセミコロンを回すために声明と忘れを追加する場合は、本当にあまりにもラインルック道の最後にカンマやセミコロンので見つけるのは難しいが同様。
インゴビュルク2015年

1
私は「ヘミングウェイ風」のアプローチを好む:とてもきれい。そして、の間のスペースなしif(同様、if(true) doSomething();
victorf

8

1行のステートメントで中かっこを使用するプログラミング上の理由はありません。

これは、プログラマーの好みと読みやすさにのみ影響します。

そのため、コードが壊れることはありません。


7

@Josh K(Java、Cなどにも適用されます)が述べた理由に加えて、JavaScriptの特別な問題の1つは、セミコロンの自動挿入です。ウィキペディアの例から:

return
a + b;

// Returns undefined. Treated as:
//   return;
//   a + b;

したがって、次のように使用すると、予期しない結果が生じる可能性があります。

if (x)
   return
   a + b;

書くことはあまり良くありません

if (x) {
   return
   a + b;
}

しかし、おそらくここではエラーを検出するのが少し簡単です(?)


これらの例はすべて、筆者が一時的で、ラインごとに、またはそれが機能するまで支払われない限り、私には恐ろしく見えます。
Cees Timmerman


4

良い答えはたくさんあるので、中括弧を省略できる「ルール」と言う場合を除いて、繰り返しはしません。この場合、フロー制御は終了していることはすでに明らかです。

フロー制御が終了するため、「不良ケース」でさえ迅速に特定(および修正)できます。この概念/構造の「ルール」は、多くの言語にも適用されます。

if (x)
    return y;
    always();

もちろん、これがリンターを使用する理由でもあります。


3

これが推奨される理由です

私が書いたとしましょう

if(someVal)
    alert("True");

次に、次の開発者が来て、「ああ、私は何か他のことをする必要がある」と言うので、彼らは書きます

if(someVal)
    alert("True");
    alert("AlsoTrue");

ご覧のとおり、最初の開発者は中括弧を使用しなかったため、「AlsoTrue」は常にtrueになります。


不正解です。「else」がありません:if(someVal)alert( "True"); else alert( "AlsoTrue"); 正しいでしょう。{}がとても読みやすいので、私はそれを使用しません。
Gerrit B

1
え?else文はありませんでした。中括弧がないと、誰かが新しい行を追加するとバグが発生する可能性があると言っていました。私の考えを理解できなかったと思います。
Amir Raminfar、2015

彼が言っていることは、2行目は何があっても実行されるということだと思います。中括弧のないIfステートメントは1行しか実行できません。
PostCodeism 2016年

3

私は現在ミニファイアに取り組んでいます。今でも、2つの巨大なスクリプトで確認しています。実験的にわかった:中括弧に「;」、「return」、「for」、「if」、「else」、 「while」、「do」、「function」。無関係な改行。

function a(b){if(c){d}else{e}} //ok  
function a(b){if(c)d;else e}   //ok

もちろん、その後に他の右中かっこがない場合は、右中かっこをセミコロンに置き換える必要があります。

関数はコンマで終わってはなりません。

var a,b=function()c;  //ok *but not in Chrome
var b=function()c,a;  //error  

ChromeとFFでテスト済み。


2

常にそれを見つけた

if(valid) return;

私の目には簡単です

if(valid) {
  return;
}

などの条件付き

(valid) ? ifTrue() : ifFalse();

(私の個人的な意見)よりも読みやすい

if(valid) {
  ifTrue();
} else {
  ifFalse();
}

でもそれはコーディングスタイルに帰着すると思います


2

質問には直接回答しませんが、以下は1行のif条件に関する短い構文です

例:

var i=true;
if(i){
  dosomething();
}

このように書くことができます:

var i=true;
i && dosomething();


1

この答えは同じような経験について検索しているので見つけたので、自分の経験で答えることにしました。

ブラケットなしのステートメントはほとんどのブラウザーで機能しますが、実際には、ブラケットなしのメソッドが一部のブラウザーで機能しないことをテストしました。

2018年2月26日以降、このステートメントはPale Moonで機能しますが、Google Chromeでは機能しません。

function foo()
   return bar;

0

ステートメントの開始インデントレベルは、その上にある左中括弧の数と等しくなければなりません。(引用符やコメント付きのブレース、またはプリプロセッサディレクティブ内のブレースを除く)

それ以外の場合は、K&Rが適切なインデントスタイルになります。スタイルを修正するには、短いシンプルなifステートメントを1行に配置することをお勧めします。

if (foo) bar();    // I like this. It's also consistent with Python FWIW

の代わりに

if (foo)
   bar();   // not so good

エディターを作成している場合は、自動フォーマットボタンでバーをfooと同じ行まで吸い上げ、次のようにReturnキーを押すと、バーの周りに中かっこを挿入します。

if (foo) {
  bar();    // better
}

次に、ifステートメントの本文内のバーの上または下に新しいステートメントを追加するのが簡単で一貫しています

if (foo) {
  bar();    // consistent
  baz();    // easy to read and maintain
}

-1

時々それらは必要であるようです!自分では信じられませんでしたが、昨日、Firebugセッション(最近のFirefox 22.0)で、

if (! my.condition.key)
    do something;

my.condition.keytrueだったにもかかわらず、何かを実行しました。ブレースを追加する:

if (! my.condition.var) {
    do something;
}

その問題を修正しました。中括弧がなくても機能する例は無数にありますが、この場合は確実に機能しません。

1行に複数のステートメントを記述する傾向がある人は、もちろん必ず中括弧使用する必要があります。

if (condition)
    do something; do something else;

見つけるのは難しいです。


中括弧がないためにif条件がtrueになったシナリオを知りたいのですが、それを思い出したり、実際の例を示したりできますか?
gitsitgo 14

条件式は常にステートメントの前に評価されます。また、インタープリターのバグを表すので、この例を実際に見たいと思っています。
セミコロン2015

-1

中かっこを他のものだけにしておくこともできます。John Resigのこの記事に見られるように。

if(2 == 1){
    if(1 == 2){
        console.log("We will never get here")
    }
} else 
    console.log("We will get here")

[Qtブレーススタイル] [1]では、elseブレースの使用法に一致するようにの両側にブロックが必要です。この例ではelse、コードレビューに合格するためにブロックにブレースが必要です。[1]:wiki.qt.io/Qt_Coding_Style#Braces
pixelgrease

なぜ反対票か。上記のステートメントは100%正確です。
ジョンストン

-1

複数の行で中括弧以外のifステートメントを作成する方法があります..(なんて英語だろう...)しかし、それはちょっと面倒です:

if(true)
   funcName();
else
   return null;


function funcName(){
  //Do Stuff Here...
}

中括弧を省略した場合、それほど多くの改行は必要ありません。上記缶は、2本のライン上のように書くこと: if (true) funcName()および else return null
フォボスは、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.