中かっこを1行のステートメントに含めると、JavaScriptに害を及ぼす可能性があると聞いたことがあります。私はもうその理由を思い出せず、グーグル検索はあまり役に立たなかった。
JavaScriptで中括弧ですべてのステートメントを囲むことをお勧めするものはありますか?
誰もがそうしているように私は尋ねています。
中かっこを1行のステートメントに含めると、JavaScriptに害を及ぼす可能性があると聞いたことがあります。私はもうその理由を思い出せず、グーグル検索はあまり役に立たなかった。
JavaScriptで中括弧ですべてのステートメントを囲むことをお勧めするものはありますか?
誰もがそうしているように私は尋ねています。
回答:
しかし、それらは推奨されます。ステートメントを拡張する場合は、それらが必要になります。
これは完全に有効です
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!")
}
読みやすさの側面があります-複合ステートメントがある場合、非常に混乱する可能性があります。インデントは役立ちますが、コンパイラ/インタープリタには何の意味もありません。
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
}
常に角かっこがあれば、そのブロック内に他のステートメントを挿入することができると考えています。
if (a===true) alert(a);
。今では明らかです!
質問は、1行のステートメントについて尋ねます。しかし、提供されている多くの例は、複数の行ステートメントに基づいて中括弧を省略しない理由を示しています。好みのコーディングスタイルであれば、1行でブラケットを使用しないことは完全に安全です。
たとえば、これで問題ないかという質問です。
if (condition) statement;
これが大丈夫かどうかは尋ねません:
if (condition)
statement;
括弧を省略すると、構文が少なくなり、コードが読みやすくなります。
私のコーディングスタイルは、コードがブロックでない限り、ブラケットを使用しないことです。また、1行に複数のステートメントを使用しないでください(セミコロンで区切られます)。私はこれが読みやすく、明確であり、「if」ステートメントに範囲の問題がありません。その結果、単一のif条件ステートメントでブラケットを使用すると、3行が必要になります。このような:
if (condition) {
statement;
}
1行のifステートメントを使用すると、垂直方向のスペースが少なくなり、コードがコンパクトになるため、望ましい方法です。
私は他の人にこの方法を使用するよう強制しませんが、それは私にとってはうまくいき、括弧を省くことがコーディング/スコープエラーにつながる方法で提供される例にこれ以上同意することはできませんでした。
/*eslint curly: ["error", "multi"]*/
技術的にはありませんが、それ以外の場合は絶対にあります。
「個人的な好み」、「コードは問題なく動作する」、「私にとっては問題なく動作している」、「もっと読みやすい」ということを忘れてください。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:ボーナスポイントは、上記の例のバグに気付いた人に与えられます。
メンテナンス性の問題はありません!
皆さんの問題は、どこにでもセミコロンを置くことです。複数のステートメントに中括弧は必要ありません。ステートメントを追加する場合は、カンマを使用してください。
if (a > 1)
alert("foo"),
alert("bar"),
alert("lorem"),
alert("ipsum");
else
alert("blah");
これは期待どおりに実行される有効なコードです!
if
、else
とalert
していないIf
、Else
とAlert
?
@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;
}
しかし、おそらくここではエラーを検出するのが少し簡単です(?)
良い答えはたくさんあるので、中括弧を省略できる「ルール」と言う場合を除いて、繰り返しはしません。。この場合、フロー制御は終了していることはすでに明らかです。
フロー制御が終了するため、「不良ケース」でさえ迅速に特定(および修正)できます。この概念/構造の「ルール」は、多くの言語にも適用されます。
if (x)
return y;
always();
もちろん、これがリンターを使用する理由でもあります。
これが推奨される理由です
私が書いたとしましょう
if(someVal)
alert("True");
次に、次の開発者が来て、「ああ、私は何か他のことをする必要がある」と言うので、彼らは書きます
if(someVal)
alert("True");
alert("AlsoTrue");
ご覧のとおり、最初の開発者は中括弧を使用しなかったため、「AlsoTrue」は常にtrueになります。
私は現在ミニファイアに取り組んでいます。今でも、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でテスト済み。
JavaScriptには多くの問題があります。見てみましょう、それについて話してJavaScriptの建築家ダグラス・クロックフォードあれば文は罰金をするようだが、リターン文が問題を導入することができます。
return
{
ok:false;
}
//silent error (return undefined)
return{
ok:true;
}
//works well in javascript
ステートメントの開始インデントレベルは、その上にある左中括弧の数と等しくなければなりません。(引用符やコメント付きのブレース、またはプリプロセッサディレクティブ内のブレースを除く)
それ以外の場合は、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
}
時々それらは必要であるようです!自分では信じられませんでしたが、昨日、Firebugセッション(最近のFirefox 22.0)で、
if (! my.condition.key)
do something;
my.condition.keyがtrueだったにもかかわらず、何かを実行しました。ブレースを追加する:
if (! my.condition.var) {
do something;
}
その問題を修正しました。中括弧がなくても機能する例は無数にありますが、この場合は確実に機能しません。
1行に複数のステートメントを記述する傾向がある人は、もちろん必ず中括弧を使用する必要があります。
if (condition)
do something; do something else;
見つけるのは難しいです。
中かっこを他のものだけにしておくこともできます。John Resigのこの記事に見られるように。
if(2 == 1){
if(1 == 2){
console.log("We will never get here")
}
} else
console.log("We will get here")
else
ブレースの使用法に一致するようにの両側にブロックが必要です。この例ではelse
、コードレビューに合格するためにブロックにブレースが必要です。[1]:wiki.qt.io/Qt_Coding_Style#Braces