Dúvida

Oi Veronica.

O que o instrutor fez foi mapear o array e retornar uma lista formatada. O ES6 introduziu essa nova ferramenta para facilitar o código, mas daria pra fazer com um for ou while.

O array map funciona da seguinte forma: ele é uma funcao que recebe um callback como argumento e esse argumento tem 3 parametros, o elemento do array, o indice e o proprio array. O callback deve retornar o elemento formatado. O map deve ser usado quando vc quer que o array seja transformado, se vc precisa somente percorrer os itens do array use foreach ou for.

// uma lista simples
const array1 = [1, 4, 9, 16];

// 
const map1 = array1.map(function(x) {
// cada item é representado pela variável x
// agora retorne o valor da variável x e multiplique por 2
return x * 2
});

console.log(map1);
// o resultado esperado da variável map1: Array [2, 8, 18, 32]

Basicamente foi isso que o instrutor fez, percorreu o array, montou a string e depois juntou tudo usando o join

Abraços

Bom dia !!

Sim, esta parte entendi. minha dúvida seria quanto ao uso do ${model.negociacoes. Isso seria um template string ? Pois imaginei que o ${} servia apenas para colocármos variáveis. Mesmo assim, eloe não usou a crase e fiquei confusa. No vídeo ele fala em expressão. Poderia me esclarecer ?

Desde já agradeço !!

Oi Veronica. Tudo bom?

Nessa parte aqui o instrutor abre a crase logo depois do return e termina depois do <tr> O template string tem essa outra grande vantagem. Ele aceita quebra de linhas sem ter que concatenar. No JS antigo, para cada linha vc precisava concatenar a string. No template string, vc pode abrir a ` , escrever seu código e fechar em qqr ponto sem precisar usar o string += " string aqui";

return `
              <tr>
                  <td>${DateHelper.dataParaTexto(n.data)}</td>
                  <td>${n.quantidade}</td>
                  <td>${n.valor}</td>
                  <td>${n.volume}</td>
              </tr>
            `;

No template string ele também aceita chamar funcoes se vc assim desejar. ${DateHelper.dataParaTexto(n.data)} vai retornar uma string e vai ser impresso dentro do <td>.

Seria a mesma coisa que vc escrever

var string = "<td>";
string += DateHelper.dataParaTexto(n.data);
string += "</td>";

Se vc abrir o codigo que o babel-js transpila, vc vai ver que ele faz exatamente isso acima para os navegadores mais antigos.

Abraços

Outra coisa, assim como vc pode chamar funcoes dentro da template string, vc tbm pode chamar outras template strings dentro da template strings se assim vc desejar.

Foi por isso q dentro do <tbody> ele chama uma template string que é uma funcao e dentro da funcao ele mapeia o array com outra template string.