ti-enxame.com

Por que os resultados variam com base no posicionamento das chaves?

Por que os trechos de código abaixo, extraídos de este artigo , produzem resultados diferentes devido a apenas uma alteração no posicionamento de chaves?

Quando a chave de abertura { Está em uma nova linha, test() retorna undefined, e "no - it broken: undefined" é exibido no alerta.

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

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

Quando a chave está na mesma linha que return, test() retorna um objeto e "fantástico" é alertado.

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

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

Essa é uma das armadilhas do JavaScript: inserção automática de ponto e vírgula. As linhas que não terminam com ponto-e-vírgula, mas podem ser o fim de uma instrução, são encerradas automaticamente; portanto, seu primeiro exemplo se parece efetivamente com o seguinte:

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

Veja também Guia de estilo JS de Douglas Crockford , que menciona a inserção de ponto e vírgula.

No seu segundo exemplo, você retorna um objeto (construído pelas chaves) com a propriedade javascript e seu valor de "fantastic", efetivamente o mesmo que este:

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

Javascript não requer ponto e vírgula no final das instruções, mas a desvantagem é que ele precisa adivinhar onde estão os pontos e vírgulas. Na maioria das vezes, isso não é um problema, mas às vezes inventa um ponto e vírgula em que você não pretendia.

Um exemplo do meu post sobre isso ( Javascript - quase não baseado em linhas ):

Se você formatar o código assim:

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

Então é interpretado assim:

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

A declaração de retorno assume a forma sem parâmetros e o argumento se torna uma declaração própria.

O mesmo acontece com o seu código. A função é interpretada como:

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

É porque o javascript costuma colocar ";" no final de cada linha, de modo básico, quando você retornar {na mesma linha, o mecanismo javascript verá que haverá algo a mais e, quando estiver na nova linha, ele pensará que você esqueceu de colocar ";" e coloca para você.

1
cichy

Pessoalmente, prefiro o Allman Style por legibilidade (vs K&R style).

Ao invés de…

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

Eu gosto…

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

  return obj;
}

Mas isso é uma solução alternativa. Eu posso viver com isso embora.

1
Michael R

As chaves aqui indicam a construção de um novo objeto. Portanto, seu código é equivalente a:

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

que funciona enquanto que se você escrever:

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

isso não funciona mais.

1
Darin Dimitrov

O problema é realmente a injeção de ponto e vírgula, conforme descrito acima. Acabei de ler uma boa postagem no blog sobre esse assunto. Ele explica esse problema e muito mais sobre javascript. Ele também contém algumas boas referências. Você pode ler aqui

0
Ivo van der Wijk