Les accolades sont-elles nécessaires dans les instructions sur une ligne en JavaScript?

Une fois, j'ai entendu dire que laisser les accolades dans des déclarations sur une ligne pouvait être nuisible en JavaScript. Je ne me souviens plus du raisonnement et une recherche sur Google n'a pas beaucoup aidé.

Y a-t-il quelque chose qui fait que c'est une bonne idée d'entourer toutes les instructions entre accolades en JavaScript?

Je demande, car tout le monde semble le faire.

Non

Mais ils sont recommandés. Si jamais vous développez la déclaration, vous en aurez besoin.

C'est parfaitement valable

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

Cependant, il est fortement recommandé de toujours utiliser des accolades, car si vous (ou quelqu'un d'autre) développez un jour l'instruction, elle sera requise.

Cette même pratique s'applique à tous les langages de style syntaxique C avec accolades. C, C ++, Java, même PHP prennent tous en charge une instruction de ligne sans accolades. Vous devez réaliser que vous n'enregistrez que deux caractères et qu'avec les styles de contreventement de certaines personnes, vous n'enregistrez même pas une ligne. Je préfère un style d'accolade complète (comme suit), donc il a tendance à être un peu plus long. Le compromis est très bien réalisé avec le fait que vous avez une lisibilité du code extrêmement claire.

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

Il y a un aspect de lisibilité - en ce que lorsque vous avez des instructions composées, cela peut devenir très déroutant. L'indentation aide mais ne signifie rien pour le compilateur / interpréteur.

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

Et puis il y a un aspect d'extensibilité:

//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
} 

On pense que si vous avez toujours les crochets, vous savez insérer d'autres instructions à l'intérieur de ce bloc.

La question porte sur les déclarations sur une seule ligne. Pourtant, les nombreux exemples fournis montrent des raisons de ne pas omettre les accolades basées sur des instructions sur plusieurs lignes. Il est tout à fait sûr de ne pas utiliser de parenthèses sur une seule ligne, si c'est le style de codage que vous préférez.

Par exemple, la question demande si cela est correct:

 if (condition) statement;

Il ne demande pas si cela est correct:

 if (condition)
   statement;

Je pense qu'il est préférable de laisser les crochets car cela rend le code plus lisible avec une syntaxe moins superflue.

Mon style de codage est de ne jamais utiliser de crochets à moins que le code ne soit un bloc. Et de ne jamais utiliser plusieurs instructions sur une seule ligne (séparées par des points-virgules). Je trouve cela facile à lire et clair et je n'ai jamais de problèmes de portée sur les déclarations «si». Par conséquent, l'utilisation de crochets sur une seule instruction de condition if nécessiterait 3 lignes. Comme ça:

 if (condition) {
   statement;
 }

L'utilisation d'une instruction if sur une ligne est préférable car elle utilise moins d'espace vertical et le code est plus compact.

Je ne forcerais pas les autres à utiliser cette méthode, mais cela fonctionne pour moi et je ne pourrais pas être plus en désaccord avec les exemples fournis sur la façon dont le fait de laisser de côté les crochets conduit à des erreurs de codage / de portée.

Techniquement non mais sinon absolument oui !!!

Oubliez "C'est une préférence personnelle", "le code fonctionnera très bien", "il a bien fonctionné pour moi", "c'est plus lisible" yada yada BS. Cela pourrait facilement conduire à des problèmes très graves si vous faites une erreur et croyez-moi, il est très facile de faire une erreur lorsque vous codez (ne croyez pas?, Consultez le célèbre bug Apple go to fail ).

Argument: "C'est une préférence personnelle"

Non, ce n'est pas le cas. À moins que vous ne soyez une équipe d'un seul homme partant sur Mars, non. La plupart du temps, d'autres personnes liront / modifieront votre code. Dans toute équipe de codage sérieuse, ce sera la méthode recommandée, donc ce n'est pas une «préférence personnelle».

Argument: "le code fonctionnera très bien"

Il en va de même pour le code spaghetti! Cela signifie-t-il que vous pouvez le créer?

Argument: "cela a bien fonctionné pour moi"

Dans ma carrière, j'ai vu tellement de bugs créés à cause de ce problème. Vous ne vous souvenez probablement pas combien de fois vous avez commenté 'DoSomething()'et déconcerté par la raison de l' 'SomethingElse()'appel:

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

Ou ajouté 'SomethingMore' et n'a pas remarqué qu'il ne sera pas appelé (même si l'indentation implique le contraire):

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

Voici un exemple concret que j'ai eu. Quelqu'un a voulu désactiver toute la journalisation afin de lancer find & replace "console.log"=> //"console.log":

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

Vous voyez le problème?

Même si vous pensez, "ce sont si insignifiants, je ne ferais jamais cela"; rappelez-vous qu'il y aura toujours un membre de l'équipe avec des compétences en programmation inférieures à vous (j'espère que vous n'êtes pas le pire de l'équipe!)

Argument: "c'est plus lisible"

Si j'ai appris quelque chose sur la programmation, c'est que les choses simples deviennent très vite très complexes. Il est très courant que ceci:

if (condition) 
    DoSomething();

se transforme en ce qui suit après avoir été testé avec différents navigateurs / environnements / cas d'utilisation ou de nouvelles fonctionnalités sont ajoutées:

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

Et comparez-le avec ceci:

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

PS: les points bonus vont à celui qui a remarqué le bogue dans l'exemple ci-dessus.

Il n'y a aucun problème de maintenabilité!

Le problème avec vous tous est que vous mettez des points-virgules partout. Vous n'avez pas besoin d'accolades pour plusieurs instructions. Si vous souhaitez ajouter une instruction, utilisez simplement des virgules.

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

Ceci est un code valide qui fonctionnera comme prévu!

Il n'y a aucune raison de programmation d'utiliser les accolades sur les instructions d'une ligne.

Cela ne dépend que des préférences et de la lisibilité des codeurs.

Votre code ne cassera pas à cause de cela.

En plus de la raison mentionnée par @Josh K (qui s'applique également à Java, C etc.), un problème particulier en JavaScript est l'insertion automatique de points-virgules . De l'exemple de Wikipédia:

return
a + b;

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

Donc, cela peut également donner des résultats inattendus, s'il est utilisé comme ceci:

if (x)
   return
   a + b;

Ce n'est pas vraiment mieux d'écrire

if (x) {
   return
   a + b;
}

mais peut-être qu'ici l'erreur est un peu plus facile à détecter (?)

C'est une question de style, mais les accolades bouclées sont bonnes pour éviter d'éventuelles suspensions .

Il y a beaucoup de bonnes réponses, donc je ne vais pas répéter, sauf pour dire ma «règle» quand les accolades peuvent être omises: à des conditions qui «retournent» ou «jettent» (par exemple) comme seule déclaration . Dans ce cas, le contrôle de flux est déjà clair qu'il se termine:

Même le «mauvais cas» peut être rapidement identifié (et corrigé) grâce au contrôle de flux de terminaison. Cette «règle» concept / structure s'applique également à un certain nombre de langues.

if (x)
    return y;
    always();

Bien sûr, c'est aussi pourquoi on peut utiliser un linter.

Voici pourquoi il est recommandé

Disons que j'écris

if(someVal)
    alert("True");

Puis le développeur suivant arrive et dit "Oh, je dois faire autre chose", alors ils écrivent

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

Maintenant, comme vous pouvez le voir, "AlsoTrue" sera toujours vrai, car le premier développeur n'a pas utilisé d'accolades.

Je travaille actuellement sur un minifier. Même maintenant, je le vérifie sur deux énormes scripts. Expérimentalement, j'ai découvert: vous pouvez supprimer les accolades derrière pour, if, else, while, function * si les accolades n'incluent pas ';', 'return', 'for', 'if', 'else', 'while', 'do', 'function'. Sauts de ligne indépendants.

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

Bien sûr, vous devez remplacer l'accolade fermante par un point-virgule si elle n'est pas suivie par une autre accolade fermante.

Une fonction ne doit pas se terminer par une virgule.

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

Testé sur Chrome et FF.

J'ai toujours trouvé ça

if(valid) return;

est plus facile pour mes yeux que

if(valid) {
  return;
}

également conditionnel tel que

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

sont plus faciles à lire (mon opinion personnelle) plutôt que

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

mais je suppose que cela se résume au style de codage

Ne répond pas directement à la question, mais vous trouverez ci-dessous une courte syntaxe sur la condition if sur une ligne

Ex:

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

Peut être écrit comme ceci:

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

Il existe de nombreux problèmes avec javascript. Jetez un œil à l' architecte JavaScript Douglas Crockford qui en parle. L' instruction if semble convenir mais l' instruction return peut poser un problème.

return
{
    ok:false;
}
//silent error (return undefined)

return{
    ok:true;
}
//works well in javascript

J'ai trouvé cette réponse en recherchant une expérience similaire, alors j'ai décidé d'y répondre avec mon expérience.

Les instructions sans parenthèse fonctionnent dans la plupart des navigateurs, cependant, j'ai testé que les méthodes sans parenthèses ne fonctionnent pas dans certains navigateurs.

Depuis le 26 février 2018, cette déclaration fonctionne dans Pale Moon, mais pas dans Google Chrome.

function foo()
   return bar;

Le niveau d'indentation de début d'une instruction doit être égal au nombre d'accolades ouvertes au-dessus. (à l'exclusion des accolades entre guillemets ou commentés ou dans les directives du préprocesseur)

Sinon, K&R serait un bon style d'indentation. Pour corriger leur style, je recommande de placer de courtes instructions if simples sur une seule ligne.

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

au lieu de

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

Si j'écrivais un éditeur, je ferais en sorte que son bouton de formatage automatique suce la barre jusqu'à la même ligne que foo, et je le ferais insérer des accolades autour de la barre si vous appuyez sur Entrée avant comme ceci:

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

Ensuite, il est facile et cohérent d'ajouter de nouvelles instructions au-dessus ou en dessous de la barre dans le corps de l'instruction if

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

Parfois, ils semblent nécessaires! Je ne pouvais pas le croire moi-même, mais hier, il m'est venu à l'esprit lors d'une session Firebug (récente Firefox 22.0) que

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

exécuté faire quelque chose malgré my.condition.key était vrai . Ajout d'accolades:

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

fixé cette question. Il existe des myriards d'exemples où cela fonctionne apparemment sans les accolades, mais dans ce cas, ce n'est certainement pas le cas.

Les personnes qui ont tendance à mettre plus d'une déclaration sur une ligne devraient très certainement toujours utiliser des accolades, bien sûr, car des choses comme

if (condition)
    do something; do something else;

sont difficiles à trouver.

Je voudrais juste noter que vous pouvez également laisser les accolades hors de l'autre. Comme vu dans cet article de John Resig's .

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

Il existe un moyen d'obtenir plusieurs lignes non accolades si des instructions. (Wow what anglais ..) mais c'est un peu tedius:

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


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