Entrar Ainda não tem acesso?
1
resposta

arrow function retorna NaN

por Victor Osorio Sepulvida
| 71.5k xp | 4 posts

Estou praticando e surgiu uma duvida em relação ao retorno de uma arrow function, no codigo a seguir, estou tentando elevar todos os numeros de um array ao quadrado, o map vai me retornar um novo array com os numeros que passei como parametro elevados ao quadrado, até ai tudo bem: 

  const quadrados = arrayNumeros.map((numero) => {
      numero ** 2
   })

porem quando vou fazer a calculo com essa sintaxe me retorna um NaN : 

 quadrados.forEach(quadrado => {
    resultado = resultado + quadrado
 });

So me retornou o resultado certo quando eu escrevi o Map da forma mais curta, sem as chaves:

 
 const quadrados = arrayNumeros.map((numero) => numero ** 2);

gostaria de saber porque isso aconteceu?

o codigo completo: 

 
  const numeros = [1, 2, 3]

function somaQuadrado(arrayNumeros) {
  let resultado = 0

  const quadrados = arrayNumeros.map((numero) => numero ** 2)

  quadrados.forEach(quadrado => {
     resultado = resultado + quadrado
  });

  return resultado

}

console.log(somaQuadrado(numeros));
1 resposta
por Sarah Ocy Sousa Medeiros
| 1833.6k xp | 3782 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Victor! Tudo bem?

No JavaScript, quando usamos chaves {} em uma arrow function, precisamos especificar explicitamente o que queremos retornar usando a palavra-chave return. Como no primeiro exemplo, não usamos a palavra-chave return, então a função não retornou nada, o que significa que cada elemento do array quadrados é undefined, logo, quando tentamos somar undefined a um número, obtemos NaN.

Deixo abaixo como sugestão para estudo as possíveis sintaxes de uma arrow function:

// Função anônima tradicional
(function (a) {
  return a + 100;
});

// 1. Remova a palavra "function" e coloque uma seta entre o argumento e a abertura do corpo da função
(a) => {
  return a + 100;
};

// 2. Remova as chaves do corpo da função e a palavra "return" — o retorno é implícito.
(a) => a + 100;

// 3. Remova os parênteses do parâmetro
a => a + 100;

Dessa forma, podemos deixar o código da seguinte maneira também:

const quadrados = arrayNumeros.map((numero) => {
    return numero ** 2
})

Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓