Javascript forEach
Tags: javascript
Published: 2020-09-11 23:28:06

<h2>Introdução</h2>

<p>O Javascript contém diversas estruturas de repetição, e uma delas é o forEach. O forEach é utilizado para percorrer um array, que pode ser um array simples, ou um array de objetos.</p>

<h2>Array simples</h2>

<p>O forEach funciona da seguinte maneira, a partir de um array, você usa o forEach, e na prática, ele executará uma função para cada elemento do seu array. Essa função é chamada de função de callback. Vamos ver um exemplo:</p>
<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let array_de_pessoas = ['João', 'Maria', 'José'];
array_de_pessoas.forEach((valorAtual, indice, array) => {
  console.log(`${valorAtual}, ${indice}, ${array}`);
  //irá imprimir o resultado no console:
  //João, 0, João,Maria
  //Maria, 1, João,Maria
});</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Vamos entender melhor o que acontece nessa função. Na primeira linha, eu tenho o array de pessoas no qual será percorrido pela função foreach. Na linha 2 eu faço o array de pessoas chamar a função forEach, e depois do primeiro parênteses, é a função que é executada para cada valor do array, a função de callback.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A função de callback pode receber até 3 parâmetros, e eles não são obrigatórios, caso queira, pode utilizar somente o primeiro e não passar mais nenhum. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>O primeiro parâmetro, é o valor atual, esse valor vai ser cada item do array, no nosso exemplo, temos um array com 3 posições, o forEach ele vai executar a função de callback uma vez para cada posição do array, sendo assim, na primeira vez que executar, o nosso valor atual conterá o nome do João, na segunda terá Maria, e na terceira José.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>O segundo é o índice, todo array, tem um índice, que é utilizado para marcar cada posição do array, e o índice começa sempre em 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>O terceiro é o array propriamente dito, caso você precise, você pode utilizar esse terceiro parâmetro para realizar algum processamento com esses dados, porém normalmente não é comum precisar desse parâmetro.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Então dessa forma você pode percorrer todo um array, e manipular os dados desejados, e com esses parâmetros você pode utilizar melhor sua lógica para resolver determinado problema.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Array de objetos</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Os arrays de objetos são muito comuns, e há momentos que precisamos percorrer esses dados, e funciona da mesma maneira do array simples, a única diferença é que em cada posição, que seria o valorAtual, em vez de ter somente uma string, vai ter um objeto literal, e dessa forma você pode acessar cada posição do objeto, por exemplo:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let pessoas = [
  {
    nome: 'Joao', 
    idade: 30
  }, 
  { 
    nome: 'Maria', 
    idade: 20 
  }
];
pessoas.forEach((pessoa, index, array) => { 
    console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`)
    //vai aparecer no console
    //O nome é: João e tem a idade 30
    //O nome é: Maria e tem a idade 20
});</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading -->
<h2>Break foreach, parando o loop</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Há momentos nos quais você pode querer parar a execução de um loop, por exemplo, você está procurando por um valor dentro de um array, e quando você o acha, você não quer continuar passando pelo loop, porque não precisa, porém <span style="text-decoration: underline;">não é possível fazer isso com o foreach</span>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Caso você precise fazer isso, é necessário utilizar o loop <span style="text-decoration: underline;">for</span> que com ele é possível ter o controle de parada com o break.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Pulando para a próxima posição "continue"</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>No forEach não é possível dar um continue e pular para a próxima posição do array, mas o que da para fazer, é colocar um return na função, que no caso, quando a função estiver executando em determinado elemento e você colocar o return, ele vai parar a execução naquela posição e vai para a próxima, por exemplo:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let pessoas = [
  {
    nome: 'Joao', 
    idade: 30
  }, 
  { 
    nome: 'Maria', 
    idade: 20 
  }
];
pessoas.forEach((pessoa, index, array) => { 
    if(idade > 25){
         return;
    }
    console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`)
    //vai aparecer no console
    //O nome é: Maria e tem a idade 20
});</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Nesse caso, o forEach pulou o João, porque ele tem idade maior que 25, e então o forEach pulou essa posição no array e foi executar a próxima posição.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Para saber mais</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Caso você queira ver uma explicação detalhada e com um exemplo prático e real que pode ser utilizado no dia-a-dia, gravei um vídeo que vou deixar aqui abaixo:</p>
<!-- /wp:paragraph -->

https://youtu.be/Q3tiAEvWhOE

<!-- wp:heading -->
<h2>Conclusão</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O forEach é uma estrutura de repetição, que se bem utilizada, pode ser muito útil. Se estiver precisando percorrer um array para realizar algum processamento e não esperar nenhum retorno, essa é uma opção ideal para solucionar o seu problema. Espero que tenha gostado, até o próximo post :)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span style="text-decoration: underline;">Referências:</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a class="rank-math-link" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span style="text-decoration: underline;">Newsletter</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="http://programandosolucoes.dev.br/assinar-a-newsletter/" class="rank-math-link">http://programandosolucoes.dev.br/assinar-a-newsletter/</a></p>
<!-- /wp:paragraph -->