.map() + Arrow Function | JavaScript: conhecendo o Browser e padrões de projeto

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por André Bisewski

| 148.2k xp | 96 posts

Dev Front-end

Boa noite!

Estou com dúvida referente aos ' {} ' da arrow function pelo menos quando usado junto ao ' .map() '.

Pois no exercicio 10 (Imprimindo com o map) eu tinha feito da seguinte forma:

let funcionariosTable = funcionarios.map(funcionario => {
        `
          <tr>
            <td>${funcionario.nome}</td>
            <td>${funcionario.endereco}</td>
            <td>${funcionario.salario}</td>
          </tr>
        `
      });
let funcionariosTableConcat = funcionariosTable.join('');
let tbody = document.querySelector("#body");
tbody.innerHTML = funcionariosTableConcat;

E não tinha dado certo. Mas foi só tirar os ' {} ' que funcionou.

Já no exercício 11 (Dominando o map). Eu tinha feito da seguinte forma:

let numeros = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100, 121];
let dobro = numeros.map(num =>
    return num * 2;
);
console.log(dobro);

E não tinha dado certo. Mas foi só adicionar as ' {} ' que funcionou.

Quando deve adicionar ' {} ' e quando não?

1 resposta

solução!

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

03/03/2018

Boa noite, André! Como vai?

Se vc tirar os parênteses o return fica implícito! Mas, se usar eles, então será obrigado a escrever o return!

Exemplo prático:

let funcionariosTable = funcionarios.map(funcionario => {
        return `
          <tr>
            <td>${funcionario.nome}</td>
            <td>${funcionario.endereco}</td>
            <td>${funcionario.salario}</td>
          </tr>
        `;
});

É o mesmo que:

let funcionariosTable = funcionarios.map(funcionario =>
        `
          <tr>
            <td>${funcionario.nome}</td>
            <td>${funcionario.endereco}</td>
            <td>${funcionario.salario}</td>
          </tr>
        `
);

E, por fim:

let numeros = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100, 121];
let dobro = numeros.map(num => num * 2);

É o mesmo que:

let numeros = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100, 121];
let dobro = numeros.map(num => {
     return num * 2;
});

Conseguiu pegar?

Grande abraço e bons estudos!