Iterando sobre arrays
Tags: javascript, beginners, programming, tutorial
Published: 2022-12-23 21:55:31

Nesse artigo vamos falar sobre como iterar sobre arrays em `javascript` usando os principais métodos da linguagem.

Antigamente a única forma de iterar sobre arrays era através dos loops convencionais (`for`, `while` e etc…). Agora temos vários métodos para iterar sobre os `arrays`, mas nesse artigo falaremos somente  de alguns que no caso são: `foreach`, `reduce`, `map` e o `filter`.

> :warning: Dica: Para melhor compreensão dos exemplos recomendo que leia os comentários do código.

---

## Foreach

O `foreach` recebe um `callback` que será executado para cada item do `array`. Esse `callback` recebe 3 argumentos, sendo que somente o primeiro é obrigatório, o primeiro argumento indica o item atual do `array`, o segundo argumento indica o index atual e o terceiro indica o `array` completo.

O método `foreach` sempre retorna `undefined` e por isso é recomendado usá-lo somente quando formos executar um efeito `colateral` no nosso código,e isto é,toda e qualquer modificação no estado da aplicação percebida fora do destino da `função` chamada. 

```javascript
const carros = ['ferrari', 'gol', 'audi', 'bmw']

carros.forEach((carroAtual, index, array) => {
	console.log(carroAtual) // na primeira vez que esse callback for executado o carroAtual vai ser igual a ferrari, na segunda vez vai ser igual a gol e assim por diante até acabar o array
	console.log(index) // Na primeira vez valerá 0 na segunda 1 e assim por diante até acabar o array
	console.log(array) // Sempre vai armazenar meu array completo (['ferrari', 'gol', 'audi', 'bmw'])
})
```

**Exemplo de uso:**

Vamos imaginar que temos um `array` que contém vários `objetos` que representam produtos de uma loja de eletrônicos e queremos inserir o nome desses produtos em uma lista no html, nesse caso o ideal é usarmos o `foreach` já que a única coisa que estamos fazendo é executar um efeito colateral.

```javascript
const ul = document.querySelector('ul');

const produtos = [
	{ nome: 'Celular', preco: 1227 },
	{ nome: 'Notebook', preco: 3000 },
	{ nome: 'Monitor', preco: 1550 },
	{ nome: 'Desktop', preco: 2500 },
	{ nome: 'Mouse', preco: 197 },
	{ nome: 'Teclado', preco: 250 },
	{ nome: 'Fone', preco: 400 },
];

produtos.forEach(produtoAtual => {
	ul.innerHTML += `<li>${produtoAtual.nome}</li>`;
});
```

---

## Map

O método `map` é idêntico ao `foreach`, vai executar seu `callback` para cada item do `array` até o `array `acabar. A única e principal diferença é que ele retorna um novo array. Então… Quando devemos usar o `map`? Devemos usar o `map` quando queremos um novo `array` com a mesma quantidade de itens do `array` original só que com os dados transformados.

**Exemplo de uso:**

Podemos criar um novo `array` usando `map` que contém somente os preços dos meus produtos.

```javascript
const produtos = [
	{ nome: 'Celular', preco: 1227 },
	{ nome: 'Notebook', preco: 3000 },
	{ nome: 'Monitor', preco: 1550 },
	{ nome: 'Desktop', preco: 2500 },
	{ nome: 'Mouse', preco: 197 },
	{ nome: 'Teclado', preco: 250 },
	{ nome: 'Fone', preco: 400 },
];

const precos = produtos.map(produtoAtual => {
	return produtoAtual.preco;
});


/*
a variavael preços agora armazena:
[
  1227, 3000, 1550,
  2500,  197,  250,
   400
]
*/
```

Podemos melhorar nosso `código` usando o `destructuring` e usando o retorno implícito da `arrow function`

```javascript
const precos = produtos.map(({ preco }) => preco);
```

---

## Filter

Podemos imaginar o `filter` exatamente como um filtrador de `array’s`. Ele retorna um novo `array` com os elementos filtrados.

**Exemplo de uso:**

Vamos imaginar que precisamos dos produtos do nosso `array` que tenham o preço _**maior**_ que mil reais.

```javascript
const produtos = [
	{ nome: 'Celular', preco: 1227 },
	{ nome: 'Notebook', preco: 3000 },
	{ nome: 'Monitor', preco: 1550 },
	{ nome: 'Desktop', preco: 2500 },
	{ nome: 'Mouse', preco: 197 },
	{ nome: 'Teclado', preco: 250 },
	{ nome: 'Fone', preco: 400 },
];

const produtosCaros = produtos.filter(produtoAtual => {
	if (produtoAtual.preco >= 1000) {
		return produtoAtual;
	}
});
console.log(produtosCaros);

/*
A variavel produtosCaros agora armazena

[
  { nome: 'Celular', preco: 1227 },
  { nome: 'Notebook', preco: 3000 },
  { nome: 'Monitor', preco: 1550 },
  { nome: 'Desktop', preco: 2500 }
]
*/
```

Podemos melhorar nosso `código` usando `distructuring`, usando o retorno implícito da `arrow function` e evitando o `if`.

```javascript
const produtosCaros = produtos.filter(({ preco }) => preco >= 1000);
console.log(produtosCaros);
```

---

## Reduce

O `reduce` é um pouco mais complicado de entender mas garanto que com **_prática_** ele se tornará mais **_fácil_**. O `reduce` recebe dois argumentos, um `callback` que pode receber 4 parâmetros acumulador, valorAtual, index, array **_(exatamente nessa ordem)_**, o segundo parâmetro do `reduce` é um valor default que vai ser atribuído ao primeiro parâmetro da `callback` (acumulador) na primeira execução do `reduce`. Devemos usar o `reduce` quando a partir de um `array` eu queira retornar um valor único que **_não_** seja um `array`.

```javascript
const numeros = [10, 20, 30, 40, 50, 60];

const soma = numeros.reduce((acumulador, valorAtual, index, array) => {
	// Na primeira execução o acumulador vai ser igual ao item da primeira posição do array (10) e o valorAtual vai ser igual ao item da segunda posição do array (20)
	// Na segunda execução o acumulador vai valer 30, pois a soma de 10 + 20 é igual a 30, já o valorAtual vai ser igual ao terceiro item do array (30)
	// Na terceira execução o acumulador vai valer 60, pois 30 + 30 é igual a 60
	// Assim vai continuar até meu array acabar
	return acumulador + valorAtual;
});

console.log(soma);
```

**Exemplo de uso:**

Vamos imaginar que queremos somar o preço de todos os produtos para saber quanto temos no nosso estoque. Esse é um caso típico de uso para o `reduce` já que queremos retornar um único novo valor que não é um `array`.

```javascript
const produtos = [
	{ nome: 'Celular', preco: 1227 },
	{ nome: 'Notebook', preco: 3000 },
	{ nome: 'Monitor', preco: 1550 },
	{ nome: 'Desktop', preco: 2500 },
	{ nome: 'Mouse', preco: 197 },
	{ nome: 'Teclado', preco: 250 },
	{ nome: 'Fone', preco: 400 },
];

const valorTotalDoEstoque = produtos.reduce((acumulador, produtoAtual) => {
	return acumulador + produtoAtual.preco;
}, 0);
console.log(valorTotalDoEstoque);

/*
A variavel valorTotalDoEstoque agora armazena: 9124
*/
```

Podemos melhorar o nosso `código` usando `destructuring` e o retorno implícito da `arrow function`.

```javascript
const valorTotalDoEstoque = produtos.reduce(
	(acumulador, { preco }) => acumulador + preco,
	0,
);
console.log(valorTotalDoEstoque);
```

> :pencil: Nota: Nesse caso somos **_obrigados_** a passar o segundo parâmetro do `reduce`, se não tivéssemos passado o acumulador na primeira iteração seria um objeto e não é possível fazer uma operação matemática em um objeto.

- [Me siga no github!](https://github.com/l-Wendell)
- [Me siga no linkedin!](https://www.linkedin.com/in/lucas-wendell/)