Pourquoi les résultats varient-ils en fonction du placement de l'accolade?

Question

J'ai lu cet article, où un exemple est illustré. Veuillez expliquer pourquoi les extraits de code ci-dessous renvoient des résultats différents en raison de changements dans le placement d'entre les accolades.

Exemple avec une accolade d'ouverture { sur la nouvelle ligne.

function test()
{
  return
  { /* <----curly brace in new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

test() retours undefined.

Exemple avec une accolade d'ouverture { sur la même ligne que return.

function test()
{
  return { /* <----inline curly brace */
    javascript : "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

test() renvoie un objet.

Ici est l'exemple vivant méfiez-vous des accolades.

Answer 1

C'est l'un des pièges de javascript: automatique point-virgule insertion. Les lignes qui ne se termine pas par un point-virgule, mais pourrait être la fin d'une instruction sont résilié automatiquement, de sorte que votre premier exemple semble effectivement comme ceci:

function test()
{
  return; // <- notice the inserted semicolon
  { 
    javascript : "fantastic"
  };
}

Voir aussi http://javascript.crockford.com/code.html

Dans votre second exemple, on retourne un objet (construit par les accolades) avec la propriété javascript et sa valeur de fantastique, effectivement la même chose que ceci:

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}

Answer 2

Javascript ne nécessite pas de point-virgule à la fin de déclarations, mais l'inconvénient est qu'il faut deviner où les points-virgules sont. La plupart du temps ce n'est pas un problème, mais parfois, il invente un point-virgule où vous n'avez pas l'intention de l'un.

Un exemple de partir de mon blog à ce sujet (Javascript – presque pas de ligne de base):

Si vous formatez le code comme ceci:

function getAnswer() {
   var answer = 42;
   return
      answer;
}

Il est interprété comme ceci:

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

L'instruction return prend c'est sans paramètre de forme, et l'argument devient une déclaration sur ses propres.

La même chose arrive à votre code. La fonction est interprété comme:

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}

Answer 3

C'est parce que javascript met le plus souvent ";" à la fin de chaque ligne, donc lorsque vous avez return {dans la même ligne, le moteur javascript voit qu'il y aura quelque chose de plus, et quand il est dans la nouvelle ligne, il pense que vous avez oublié de mettre ";" et le met pour vous.

Answer 4

Les accolades indiquent ici la construction d'un nouvel objet. Votre code est donc équivalent à:

 function test() {
  var a = { javascript : "fantastic" };
  return a;
}
 

ce qui fonctionne alors que si vous écrivez:

 function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted 
      a;
}
 

ça ne marche plus.

Answer 5

Le problème est en effet l'injection de point-virgule comme décrit ci-dessus. Je viens de lire un bon blog sur ce sujet. Il explique ce problème et beaucoup plus sur le javascript. Il contient également de bonnes références. Vous pouvez le lire ici