<img fetchpriority="high" decoding="async" class="aligncenter" src="https://media.giphy.com/media/ZVik7pBtu9dNS/giphy.gif" alt="" width="480" height="268" />
&nbsp;
Todo programador já sabe que estruturas de repetição são essenciais em linguagens de programação. O <code class="kc kv kw kx b">while</code> , o <code class="kc kv kw kx b">for</code> e o <code class="kc kv kw kx b">do while</code> se tornam nossos companheiros inseparáveis logo no início da carreira. Além disso, eles são muito úteis quando queremos operar sobre vetores, certo? Mas, às vezes, podemos fazer melhor 😁. O objetivo deste post é apresentar métodos simples do objeto <code class="kc kv kw kx b">Array</code> em <a href="https://dtidigital.com.br/blog/dicas-e-boas-praticas-com-javascript/">JavaScript</a> que aplicam princípios de programação funcional e podem melhorar a legibilidade do seu código. A programação funcional é muito defendida no ambiente do JS por autores consagrados, como <a class="bb cn kz la lb lc" href="https://medium.com/@_ericelliott" target="_blank" rel="noopener noreferrer">Eric Elliot</a> e <a class="bb cn kz la lb lc" href="https://github.com/getify" target="_blank" rel="noopener noreferrer">Kyle Simpson</a>, e ganhou força com o EcmaScript 6, que já é vastamente suportado.
&nbsp;
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#map-filter-e-reduce-os-personagens-principais">1 map, filter e reduce: os personagens principais</a></li><li><a href="#Juntando-forcas">2 Juntando forças</a></li><li><a href="#i">3 </a></li><li><a href="#Conclusao">4 Conclusão</a></li></ul></div>
<h2 id="5081" class="ld le fo bs br gg lf lg lh li lj lk ll lm ln lo lp">map, filter e reduce: os personagens principais</h2>
Todo array em JavaScript apresenta métodos de iteração utilitários para propósitos específicos. Aqui estão três mais relevantes:
<code class="kc kv kw kx b">Array.prototype.<a class="bb cn kz la lb lc" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank" rel="noopener noreferrer">map()</a></code> recebe uma função de transformação a ser aplicada a cada elemento do array e retorna uma coleção com os elementos transformados por essa função.
<pre>const vetor = [1, 2, 3, 4];
const vetorDobrado = vetor.map(function(x) {
 return 2 * x;
});

console.log(vetorDobrado) // 2, 4, 6, 8

</pre>
O código fica mais legível com o uso de <a class="bb cn kz la lb lc" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" target="_blank" rel="noopener noreferrer">arrow functions</a>👍:
<div class="kb l dg">
<pre>const vetor = [1, 2, 3, 4];
const vetorDobrado = vetor.map(x =&gt; 2 * x);

console.log(vetorDobrado) // 2, 4, 6, 8

</pre>
<code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank" rel="noopener noreferrer">Array.prototype.filter()</a></code> recebe uma função para filtragem do array. Ela deve retornar <code class="ks ll lm ln b">true</code> se o elemento passa no filtro e <code class="ks ll lm ln b">false</code> caso contrário.
<pre>const vetor = [1, 2, 3, 4];
const elementosPares = vetor.filter(x =&gt; x % 2 == 0);

console.log(elementosPares) // 2, 4</pre>
<code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" target="_blank" rel="noopener noreferrer">Array.prototype.reduce()</a></code> é um pouco mais complexo, utilizado para reduzir o conteúdo de um array a um único valor. Ele recebe dois parâmetros: a função de redução, que será aplicada a cada elemento, e o valor inicial de redução.
Por sua vez, a função de redução deve receber dois argumentos principais: o valor reduzido até agora, e o valor do elemento sendo iterado.
Se quiser somar todos os elementos, por exemplo:
<pre>const vetor = [1, 2, 3, 4];
const soma = vetor.reduce((acumulado, atual) =&gt; acumulado + atual, 0);

console.log(soma) // 10</pre>
No trecho acima, definimos que o valor inicial de redução é zero, e a cada iteração a função de redução deve retornar a soma do valor de redução acumulado com o valor do elemento daquela iteração. Na primeira iteração, realiza-se 0 + 1 = 1. Depois, 1 + 2 = 3. Em seguida, 3 + 3 = 6 e, por fim, 6 + 4 = 10
&nbsp;
</div>
<h2 id="054c" class="lt lu ct bc bb hc lv lw lx ly lz ma mb mc md me mf">Juntando forças</h2>
Como map e filter retornam arrays, é possível encadear esses métodos. Isso possibilita que operações mais elaboradas sejam feitas de forma bem limpa. Essa prática é chamada piping. Em inglês, pipe significa “cano”, o que se assemelha ao fluxo dos dados quando são encadeados.
Agora vamos à um exemplo mais contextualizado. Imagine que você precise saber a quantidade de filhos das pessoas adultas em um array de pessoas:
<pre>const pessoas = [
 {
 nome: 'Joaquim',
 idade: 30,
 quantidadeFilhos: 2,
 },
 {
 nome: 'Ana',
 idade: 45,
 quantidadeFilhos: 3,
 },
 {
 nome: 'Creuza',
 idade: 88,
 quantidadeFilhos: 8,
 },
];</pre>
Supondo que um adulto é alguém com menos de 65 anos, pode-se realizar essa tarefa da seguinte maneira:
<pre>const IdadeIdosos = 65;

const quantidadeFilhosDosJovens = pessoas
 .filter(pessoa =&gt; pessoa.idade &lt; IdadeIdosos)
 .map(pessoa =&gt; pessoa.quantidadeFilhos)
 .reduce((quantidadeTotal, quantidade) =&gt; quantidadeTotal + quantidade, 0);
 
console.log(quantidadeFilhosDosJovens); // 5</pre>
Quando a estrutura do map, filter e reduce já estiverem familiares, você perceberá que o código se torna muito mais legível do que a versão imperativa:
<pre>const IdadeIdosos = 65;

let quantidadeFilhosDosJovens = 0;
for (let i = 0; i &lt; pessoas.length; i++) {
 if (pessoas[i].idade &lt; IdadeIdosos) {
 quantidadeFilhosDosJovens += pessoas[i].quantidadeFilhos;
 }
}

console.log(quantidadeFilhosDosJovens); // 5</pre>
Chique, né? E se você quiser o máximo da legibilidade, basta atribuir as funções utilizadas a variáveis e repassá-las aos métodos que foram aprendidos:
<pre>const IdadeIdosos = 65;
const ehJovem = pessoa =&gt; pessoa.idade &lt; IdadeIdosos;
const obterQuantidadeFilhos = pessoa =&gt; pessoa.quantidadeFilhos;
const somar = (quantidadeTotal, quantidade) =&gt; quantidadeTotal + quantidade;

const quantidadeFilhosDosJovens = pessoas
 .filter(ehJovem)
 .map(obterQuantidadeFilhos)
 .reduce(somar, 0);
 
console.log(quantidadeFilhosDosJovens); // 5</pre>
Existem outros métodos do objeto <code class="ks ll lm ln b">Array</code> que também contornam a necessidade de utiliza-se um laço <code class="ks ll lm ln b">for</code> . Confira na <a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">página da MDN</a> os métodos <code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find" target="_blank" rel="noopener noreferrer">.find()</a></code> , <code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some" target="_blank" rel="noopener noreferrer">.some()</a></code> , <code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every" target="_blank" rel="noopener noreferrer">.every()</a></code> e <code class="ks ll lm ln b"><a class="bx dj lp lq lr ls" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes" target="_blank" rel="noopener noreferrer">.includes()</a></code> para aprender mais.
<h2></h2>
<h2 id="1546" class="lt lu ct bc bb hc lv lw lx ly lz ma mb mc md me mf">Conclusão</h2>
O ES6 trouxe novas maneiras de operar sobre arrays. Esses novos caminhos são mais legíveis, por serem mais declarativos, melhoram a reutilização de código e utilizam toda a força da característica multi-paradigma do JavaScript. Com todas essas novas ferramentas em mãos, são pouquíssimos os casos em que a utilização de um <code class="ks ll lm ln b">for</code> nativo é imprescindível.

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

JavaScript – O laço for: um personagem secundário

One-stop shop em tecnologia

Confira outros artigos