1
resposta

[Dúvida] DUVIDA SOBRE SPREAD OPERATOR

IMAGEM COM BLOCO DE CODIGO EM JAVASCRIPTOi, tenho pesquisado bastante sobre mas ainda não conseguir compreender esta parte do código, Gostaria de entender oque exatamente está acontecendo aqui: return [...acum, paragrafo] qual a necessidade de se ter o paragrafo ali se o acum já tem o valor processado ?

1 resposta

Oi, Francisco! Tudo bem?

O método reduce é utilizado para iterar sobre um array e acumular um resultado com base em uma função fornecida. No nosso caso, estamos utilizando o reduce para filtrar elementos vazios ("") do array paragrafos.

const result = paragrafos.reduce((acum, paragrafo) => {
    if (paragrafo) {
        return [...acum, paragrafo];
    }
    return acum;
}, []);

Neste trecho, estamos usando o reduce para iterar sobre cada elemento do array paragrafos, recebendo dois parâmetros principais:

  1. Uma função de callback que é executada para cada elemento do array.
  2. Um valor inicial para o acumulador (acum), que neste caso é um array vazio ([]).

Dentro da função callback:

  • acum é o acumulador que armazena o resultado parcial.
  • paragrafo é o elemento atual do array paragrafos que está sendo processado.

A lógica dentro do reduce é a seguinte:

  • Se paragrafo não for uma string vazia, ele é adicionado ao acumulador acum. Isso é feito utilizando o operador spread (...), que expande os elementos do array acum e adiciona o paragrafo ao final. O resultado é um novo array que contém todos os elementos anteriores de acum mais o paragrafo atual.
  • Se paragrafo for uma string vazia, ele não é adicionado ao acumulador e o acumulador acum é retornado inalterado.

Finalmente, o reduce retorna o acumulador final, que é armazenado na constante result.

Para ilustrar, vamos ver como o reduce processa o array paragrafos passo a passo:

  1. acum inicia como [].
  2. Iteração 1: paragrafo é "código". acum se torna ["código"].
  3. Iteração 2: paragrafo é "js". acum se torna ["código", "js"].
  4. Iteração 3: paragrafo é "". acum permanece ["código", "js"].
  5. Iteração 4: paragrafo é "web". acum se torna ["código", "js", "web"].
  6. Iteração 5: paragrafo é "". acum permanece ["código", "js", "web"].
  7. Iteração 6: paragrafo é "array". acum se torna ["código", "js", "web", "array"].

Assim, o resultado final armazenado em result será ["código", "js", "web", "array"], que é o array original sem os elementos vazios.

Espero ter ajudado!

Um forte abraço e bons estudos!