Stew On This pt-br Explainer

Explicação de Sopa de percalços

Objetivo deste desafio:
Usando as ferramentas que você aprendeu nas três lições anteriores agora você vai enfrentar um código cheio de enganos. Você encontrará esses erros um por um e os corrigirá, o que resultará em imprima uma lista de ingredientes com seus pesos individuais.

Passo a passo da solução:

  1. newRecipe é uma array de objetos com ‘name’ e ‘kilos’ como propriedades (à esquerda de (:) no objeto) e seus valores à direita são os nomes e kilos de cada ingrediente. Por exemplo:
    name: beans,
    kilos: 4,

O valor 4 para ‘kilos’ está correto, entretanto, o valor para ‘name’ é feijões sem aspas. Isso faz o computador ler feijões como uma variável e não como uma string. Acrescente aspas para alterar sua sintaxe para ser uma string e não uma variável.

  1. O código atualmente está percorrendo a array newRecipe, mas nós não conseguimos ver o que está acontecendo de fato. Para conseguir isso, podemos simplesmente adicionar um console.log dentro do laço for para registrar o resultado do laço for no console. Por exemplo:
    console.log(element.name + element.kilos);
  1. Agora podemos ver que o laço for está iterando pela array newRecipe, mas no console o que estamos vendo é:
    NaN
    NaN
    NaN
    NaN

Isso confirma que o laço for realmente está percorrendo os quatro objetos da array newRecipe, mas em vez de ver os nomes ou kilos dos ingredientes, vemos apenas um erro. Isso se deve ao fato de que a função está usando um for…in loop em vez de um laço for…of. Isso é problemático porque o laço for…in itera sobre as propriedades de um objeto e newRecipe é uma array.

Vamos tirar um minuto e pensar por que estamos vendo NaN. Em primeiro lugar, como um lembrete, NaN é um termo em JavaScript e em várias outras linguagens de programação que significa Not a Number (não é um número). Até agora sabemos que adicionar element.name a element.kilos está imprimindo esse resultado. Vamos simplificar o código um pouco para facilitar a visualização do que está ocorrendo e ver o que acontece se registrarmos apenas o elemento no console (console.log).

    function printRecipe(recipe) {
           for(var element in recipe) {
               console.log(element);
    }
}

printRecipe(newRecipe);

Quando fazemos isso, vemos impresso no console:

     0
     1
     2
     3

Eles são simplesmente os índices dos quatro itens da array newRecipe. Agora vamos experimentar registrar no console o mesmo trecho do código, mas agora usando a notação de ponto com ‘name’:

    function printRecipe(recipe) {
           for(var element in recipe) {
               console.log(element.name);
    }
}

printRecipe(newRecipe);

O que vemos no console? Existem quatro linhas sendo iteradas, mas todas elas estão em branco, o que significa no contexto do Grasshopper que estão indefinidas. Por que elas estão indefinidas? Pense assim, registrar o element.name no console com um for…in loop seria o equivalente a:

     0.name
     1.name
     2.name
     3.name

Um índice por si só não tem nenhum par de propriedade-valor associado a ele, portanto tentar obter a propriedade ‘name’ de um índice é praticamente tentar obter algo que não existe ou algo indefinido. Agora vamos voltar para o código inicial:

       function printRecipe(recipe) {
                for(var element in recipe) {
                       element.name + element.kilos;
    }
}

printRecipe(newRecipe);

Agora nós sabemos que se precisarmos registrar element.name + element.kilos; no console isso é exatamente a mesma coisa do que tentar registrar undefined + undefined no console. Você pode se perguntar, por que isso resulta em NaN e não apenas undefined? A razão se deve ao operador de adição. Lembre-se, em JavaScript nós podemos usar o operador de adição para concatenar (combinar) strings com outras strings, strings com números e também simplesmente aplicações matemáticas normais. A principal lição aqui é que ao usar esse formato para operações matemáticas e tentar combinar uma ou mais coisas indefinidas, isso resultará sempre em NaN. Para corrigir esse problema, simplesmente precisamos mudar o loop for in para um loop for of:

 function printRecipe(recipe) {
                for(var element of recipe) {
                      console.log(element.name + element.kilos);
    }
}

Agora, no console.log, quando adicionamos os dois, não vemos NaN impresso no console, mas, em vez disso, as sequências de nomes de ingredientes e o número que corresponde a seus quilos.

2 Likes

Eu fiz todas as alterações e permaneceu em erro --’

1 Like

Oi Rafael
o meu deu certo, mudei name: string

e mudei for in para for of

1 Like

sim, eu tinha feito isso, porem nao estava usando for of. mas ja resolvi tbm

Obrigado por responder, achei que a comunidade ja estava morta kk

1 Like