Saiba o que é JavaScript forEach e como usar da melhor forma

Precisa entender melhor sobre o método forEach em JavaScript? Saiba aqui o que é e como funciona. 

O procedimento na área de Desenvolvimento tem a intenção de ser uma alternativa, ou substituir o convencional loop for por um código, a qual é mais fácil de fazer manutenção, e visualmente limpo.

Os desenvolvedores de JavaScript usam bastante a estrutura de repetição exatamente por ser mais prática para o dia a dia profissional. Isso porque ela reduz drasticamente a necessidade de escrever várias linhas de código, deixando tudo mais organizada.

Aprenda sobre o que é o método forEach em JavaScript, sintaxe, as aplicabilidades e os navegadores compatíveis com essa leitura. Aproveite!

O que é método forEach?

O método forEach é uma ação de iteração que executa uma função para cada elemento, seja de arrays simples ou arrays de objetos. Ele também pode ser usado em Mapas e Conjuntos na matriz de dados.

<Entenda: o que é Array em JavaScript, como criar e aplicar />

Como funciona o método forEach JavaScript?

Por ser um tipo de estrutura de repetição, o JavaScript forEach é muito utilizado para a manipulação de arrays. Ela é uma função nativa da API do JS.

Em síntese, é uma ferramenta indicada para quando é preciso executar uma determinada função em todos os seus elementos.

O método permite percorrer todos os elementos de um array e executar uma ação para cada um deles. Tal aplicação é feita com a inserção de uma função como um parâmetro. Uma observação é que ele não executa uma função para um array sem nenhum elemento.

Um aviso importante sobre o assunto é que toda vez que inserimos uma função como parâmetro em JavaScript, entramos em território de retorno de chamada, o famoso callback.

Desvendendado o callback

O callback é uma função que acontece após outra função ter sido executada. Ela é útil quando precisamos garantir que uma determinada ação seja executada logo após outra.

Quer um exemplo? Se você precisa carregar um arquivo antes de executar uma determinada função, pode usar uma função callback para garantir que o arquivo seja carregado antes da execução.

O recurso é invocado com três argumentos. Conheça-os:

• Valor do elemento: value (obrigatório);
• Índice do elemento: index (opcional);
• Objeto Array sendo percorrido: arr (opcional).

Há ainda um segundo argumento, sendo o thisArg que permite que o contexto this seja modificado, mas é pouco utilizado.

Vamos recordar sobre JavaScript

JavaScript é uma linguagem de programação, desenvolvida em 1995 por Brendan Eich, a pedido da empresa Netscape. Antes de ser conhecida como JS, teve o nome de LiveScript.

Trata-se de uma linguagem multi-paradigma, ou seja, que suporta vários paradigmas de programação, e, alguns dos principais paradigmas suportados são: programação orientada a objetos, programação funcional e programação imperativa.

Atualmente, o JavaScript é uma das linguagens mais fáceis de aprender, considerada uma das mais populares do mundo, usada principalmente para desenvolvimento web, mas que também pode ser aplicada na criação de aplicações mobile e de desktop.

Se você já tem alguma experiência com outras linguagens de programação, vai se adaptar rapidamente ao JavaScript. Se você nunca programou antes, também não terá muita dificuldade em aprender a linguagem.

<Aprenda: como usar o JavaScript (passo a passo) />

Qual a sua sintaxe?

Na prática, você pode usar como referência para a execução do loop a seguinte sintaxe abaixo:

array.forEach(funcao_callback(elemento [, indice [, array]])[, thisArgumento])

ou ainda,

array.forEach((value, index, arr) => {...}, thisArg);

Glossário do programador

• Array corresponde ao array de elementos;
• Elemento é que pertence ao array e referenciado para função call-back;
• Índice é o valor correspondente ao índice do elemento atual;
• thisArgumento ou thisArg corresponde ao valor “this”.

Quando usar esse recurso do JavaScript?

Como dissemos antes, você pode usá-lo para iterar uma matriz e aplicar uma função de retorno de chamada a cada elemento dessa matriz. 

Há muitas maneiras de usar o método forEach ( ). Veja abaixo.

Confira exemplos dessa utilização

Primeiro exemplo #1

Criação de um array com os números de 1 a 6 e visualização no console do navegador apenas os números pares.

var arrayNumeros = [1,2,3,4,5,6];

function verificaPares(elemento){

    if (elemento % 2 == 0) 

    console.log(elemento);

}

arrayNumeros.forEach(verificaPares);

/*saída:

2

4

6

*/

Segundo exemplo #2

Outro modo é declarar a função em simultâneo, em que usa o comando. Veja abaixo:

var arrayNumeros = [1,2,3,4,5,6];

arrayNumeros.forEach(function(elemento){

    if (elemento % 2 == 0)

    console.log(elemento);

});

/* saída:

2

4

6

*/

Terceiro exemplo #3

Outra forma é usar o JavaScript forEach object, ou seja, usar o método forEach() com um array de objetos. Entenda abaixo uma variável com objetos que listam a marca e modelo de cada veículo.

var marcas = [{marca: 'Ford', modelo: 'Focus'},

              {marca: 'BMW', modelo: 'BMW Z4'},

              {marca: 'Fiat', modelo: 'Palio'},

              {marca: 'Audi', modelo: 'A3'}];

marcas.forEach((elemento) => {

      console.log("Marca: " + elemento.marca + " - modelo: " + elemento.modelo);

})

/* saída:

Marca: Ford - modelo: Focus

Marca: BMW - modelo: BMW Z4

Marca: Fiat - modelo: Palio

Marca: Audi - modelo: A3

*/

O JavaScript forEach é compatível com todos os navegadores?

Não. O recurso não é aceito em todos os navegadores, isso porque alguns não estão padronizados ou possuem versões antigas.

As versões dos navegadores compatíveis são:

• Edge 12;
• Firefox 21;
• Internet Explorer 10;
• Opera 15;
• Safari 6;
• iOS Safari 6;
• Android Browser 81;
• Opera Mobile 46;
• Chrome 23;
• Chrome for Android 81;
• Firefox for Android 68;
• Samsung Internet 4.

Qual a diferença entre forEach e map em JavaScript?

Não confunda os termos e aplicações. Veja abaixo as distinções entre ambas.

O método do map() recebe uma função como parâmetro. Essa função é invocada para cada elemento do Array, e ao final, o método retorna um array totalmente novo preenchido com os resultados da chamada da função fornecida.

Já o método forEach() recebe uma função como argumento e a executa uma vez para cada elemento do Array. Contudo, ao invés de retornar um novo array como o método map(), ele retorna undefined.

O que mais considerar ao usar JavaScript forEach?

Entenda três pontos de atenção ao desenvolver seu código:

1. O forEach não manipula o Array original;
2. O escopo da variável difere no forEach;
3. Dá para sair do loop for mais cedo com break.

Mercado de trabalho para desenvolvedores

O mercado de trabalho para desenvolvedores no Brasil está em constante crescimento, com novas oportunidades surgindo a cada dia. Com a popularidade crescente da tecnologia, mais empresas estão buscando profissionais qualificados para atender às suas necessidades.

Desenvolvedores de software são altamente procurados, como a demanda por novas aplicações e sites aumenta. Aqueles que estão familiarizados com as ferramentas e linguagens de programação mais populares tendem a ter mais oportunidades de emprego tanto no Brasil quanto no exterior.

Os salários dos programadores variam conforme a região do país, mas, em geral, são competitivos. Em suma, os profissionais mais experientes e bem qualificados podem esperar ganhar mais.

Quer aprender mais? Participe do bootcamp Arquiteto(a) de Soluções. Um conteúdo completo que vai te ensinar tudo sobre as tecnologias mais utilizadas nas soluções arquiteturais para as camadas de infraestrutura, armazenamento de dados, rede, nuvem, cibersegurança e aplicações digitais.

São assuntos focados no que você realmente precisa aprender e desenvolver! Você poderá estudar onde e quando quiser!

Conheça a assinatura Multi Mais e tenha acesso imediato a TODOS os cursos e bootcamps oferecidos pela XP educação!