Javascript: Exemplos do Array map() e reduce()

Array map()

A função map() é muito útil para transformar um array num outro array. Essa transformação é realizada através de uma função que você mesmo define e passa como parâmetro.

// novo array com os elementos multiplicados por 2: > [1,2,3].map( n=>n*2 ) [2, 4, 6]
Code language: JavaScript (javascript)

Espero que com os exemplos abaixo, fique bastante claro a utilidade dessa função que hoje já é uma das que eu mais uso no Javascript.

/* Neste primeiro exemplo, pego um array de números e converto para um array de strings */ // função que transforma um número numa string: var converteNumeroEmTexto = function( num ) { return "Sou o " + num; }; // array de números var numeros = [1, 2, 3, 4]; /* o map() abaixo irá executar a função converteNumeroEmTexto() para cada elemento do array numeros e o labels será um novo array com todos os elementos já convertidos. */ var labels = numeros.map( converteNumeroEmTexto ); // o resultado será // labels = ['Sou o 1','Sou o 2','Sou o 3','Sou o 4']
Code language: JavaScript (javascript)

Acho que essa função começa a ficar mais interessante quando temos um array cujo elementos são objetos:

// cria um novo array apenas com a propriedade 'nome': var registros = [{id: 1, nome: 'Sergio'}, {id: 2, nome: 'Maria'}, {id: 3, nome: 'José'}]; /* nesse exemplo de map() eu usei o 'arrow function' ao invés de criar uma function só para retornar a propriedade nome. */ var nomes = registros.map( reg => reg.nome ); // nomes = ['Sergio','Maria','José']
Code language: JavaScript (javascript)

Array map() e reduce()

O map() tem um amigo que se chama reduce(). Essa dupla é perfeita quando você quer fazer um processamento em um array de modo a gerar um único resultado. No próximo exemplo, eu tenho um array de objetos e quero o total de uma de suas propriedades.

let carro1 = {nome: 'Ferrari', preco: 1000000}; let carro2 = {nome: 'Corolla', preco: 90000}; let carro3 = {nome: 'Hilux', preco: 200000}; let carros = [carro1, carro2, carro3]; let total = carros.map(c=>c.preco) .reduce((tot,preco)=>tot+preco,0); console.log(total); // exibe: 1290000
Code language: JavaScript (javascript)

O método reduce() tem a seguinte sintaxe:

<array>.reduce( <callbackFn>, <valorInicial> ) 

Parâmetros:
* <callbackFn> - função que será chamada 
para cada elemento do <array> com os 
seguintes parâmetros:

1. <acc> - Acumulador (resultado parcial)
2. <cur> - Valor do elemento atual
3. <idx> - índice do elemento atual
4. <src> - o array original
 Essa função deve retornar o valor para <acc> 
para a próxima execução de <callbackFn> ou, 
se já tiver terminado, o resultado de reduce().

* <valorInicial> - É o valor do parâmetro <acc> 
quando <callbackFn> for executado pela primeira vez.

Retorno:
O .reduce() retorna o resultado da última execução de 
<callbackFn>.

Segue o passo-a-passo de execução do exemplo anterior:

  1. O primeiro elemento do array carros é passado para a função de callback do map( c=> c.preco ). Ou seja, c é igual a {nome: 'Ferrari', preco: 1000000};
  2. A função de callback retorna o valor da propriedade preco do primeiro elemento que é 100000. Mas, o map() ainda não terminou de transformar o array carros.
  3. O map() faz a mesma operação para o segundo elemento onde c={nome: 'Corolla', preco: 90000}. A função de callback retorna c.preço que dessa vez é 90000;
  4. Dessa vez map() executa o callback passando o terceiro elemento (c={nome: 'Hilux', preco: 200000}) e o resultado do callback c=>c.preco é 200000;
  5. O map() terminou o array carros e retorna um novo array apenas com os retornos das execuções do callback, ou seja, apenas os preços, que são: [1000000, 90000, 200000].
  6. O reduce() vai atuar nesse novo array apenas com os preços. Ele não tem mais a visibilidade do array carros.
  7. O reduce() vai pegar o primeiro elemento do array de preços que é 1000000 e esse será o valor parâmetro preco da função de callback (tot, preco) => tot+preco e o parâmetro tot terá o valor inicial que é 0 (zero). O valor inicial pode ser qualquer valor que você precise. O 0 (zero) foi usado porque ele foi especificado como segundo parâmetro da chamada de reduce();
  8. A função de callback faz a soma tot+preco que é igual a 100000;
  9. Agora, reduce() vai executar novamente a função de callback passando o segundo elemento do array de preços (preco=90000) e o resultado da primeira chamada no parâmetro tot que foi 1000000. A função de callback vai somar os dois valores (tot, preco) => tot+preco e retornará 1090000.
  10. Dessa vez, reduce() vai passar o preco = 200000 e o tot = 1090000 para a função de callback. A função de callback somará novamente os dois valores e o resultado será 1290000.
  11. Como não há mais elementos no array de preços, o valor 1290000 é a resposta final do método reduce().

Concatenando um array de strings com reduce()

Nos exemplos acima eu apenas usei manipulação de números (soma) mas o reduce() pode ser usado para elementos de qualquer tipo. Você pode, por exemplo, usar o reduce() para concatenar numa única string um array de strings.

// array de nomes let nomes = ['Maria', 'João', 'José']; //função de concatenação let fn = (acc, nome, idx)=> acc + (idx?',':'') + ' ' + nome; // execução do reduce() variando o valor inicial let saudacao = nomes.reduce( fn, 'Olá' ); console.log(saudacao); // "Olá Maria, João, José" let despedida = nomes.reduce( fn, 'Tchau' ); console.log(despedida); // "Tchau Maria, João, José"
Code language: JavaScript (javascript)

Gostou? Por favor, avalie abaixo a utilidade desse post. Sua resposta ajudará na melhoria desse conteúdo.

Este post foi útil para você?

1 comentário

Deixe um comentário

O seu endereço de e-mail não será publicado.