Manipulação de array com map, filter e reduce

Introdução

Aprenda como manipular array de um modo funcional em Javascript, utilizando os métodos map, reduce e filter.

Na empresa onde trabalho começamos um Coding Dojo, que é basicamente uma reunião com programadores e programadoras a fim de resolver desafios e aperfeiçoar as habilidades com algoritmos.

O desafio dessa semana foi o seguinte, dado o array `empresas`: 

const empresas = [
    { nome:'Samsung',valorDeMercado: 50, CEO: 'Kim Hyun Suk', anoDeCriacao: 1938},
    { nome: 'Microsoft',valorDeMercado: 415, CEO: 'Satya Nadella', anoDeCriacao: 1975 },
    { nome: 'Intel',valorDeMercado: 117, CEO:'Brian Krzanich', anoDeCriacao: 1968},
    { nome: 'Facebook',valorDeMercado: 383, CEO:'Mark Zuckerberg', anoDeCriacao: 2004},
    { nome: 'Spotify',valorDeMercado: 30, CEO:'Daniel Ek', anoDeCriacao: 2006  },
    {nome: 'Apple', valorDeMercado: 845, CEO: 'Tim Cook', anoDeCriacao: 1976}
];

Tenho que exibir as seguintes informações:

• Empresas criadas depois dos anos 2000.
• O nome de cada empresa e de seu CEO.
• O valor de todas as empresas somadas.

A primeira coisa que precisamos mostrar são as empresas criadas depois dos anos 2000. O que podemos fazer nesse caso é criar uma maneira de filtrar o array para conseguir exibir essa informação.

Filter

Por sorte já existe um método para fazer esse tipo de filtro e adivinha o seu nome ? Isso mesmo filter. Ele vai percorrer todo o array e criar um novo com todos os elementos que passaram no teste implementado, no nosso caso, quando ano de criação for maior que 2000.

Como temos objetos dentro do array, precisamos acessar suas propriedade para fazer o filtro. Para isso basta chamar o nome do array seguido da notação de ponto e logo após, o nome da propriedade.

Então para acessar a propriedade anoDeCriacao fazemos:

empresas.anoDeCriacao

Agora basta criar a condição para exibir o`anoDeCriacao` maior que 2000, dentro do filter:

const anoDeCriacao = empresas.filter(empresa => (empresa.anoDeCriacao > 2000));

console.log( anoDeCriacao );

Como resultado temos:

[ { nome: 'Facebook',
    valorDeMercado: 383,
    CEO: 'Mark Zuckerberg',
    anoDeCriacao: 2004 },
  { nome: 'Spotify',
    valorDeMercado: 30,
    CEO: 'Daniel Ek',
    anoDeCriacao: 2006 } ]

Conseguimos realizar a primeira tarefa, agora para a segunda temos que exibir o nome das empresas e de seus CEOs. Seria interessante criar uma função que extraia esses dois valores para nós.

Map

Felizmente temos esse método pronto e ele se chama map, com ele é possível percorrer todos os item do array, executar alguma transformação nesses itens e retornar um novo array sem modificar o atual.

No nosso caso vamos percorrer o array e dentro de cada objeto vamos pegar as propriedades nome e CEO de cada empresa.

const exibeInformacoes = empresas.map( empresa => `${empresa.nome}` + ' CEO: ' + `${empresa.CEO}`);
console.log( exibeInformacoes )

Temos como resposta:

[ 'Samsung CEO: Kim Hyun Suk',
  'Microsoft CEO: Satya Nadella',
  'Intel CEO: Brian Krzanich',
  'Facebook CEO: Mark Zuckerberg',
  'Spotify CEO: Daniel Ek',
  'Apple CEO: Tim Cook' ]

Mais um item do nosso checklist concluído, agora falta exibir o valor de todas as empresas somadas. Seria interessante se já tivéssemos algo parecido com os dois últimos métodos, mas para somar todos os valores.

Reduce

E temos, o método reduce passa por cada item do array fazendo uma expressão escolhida, e no final vai devolver um único valor. Exatamente o que precisamos para fazer a soma do valor de mercado das empresas.

Ele recebe dois valores, um acumulado e um atual, no nosso caso o acumulado irá somar com o atual. Como no primeiro loop da soma não temos nenhum valor acumulado, então precisamos passar como segundo parâmetro esse valor, que no nosso caso vai ser 0.

Se não tivéssemos passado um valor de acumulado o `reduce` pegaria o primeiro item do array, tomando o como se fosse o valor acumulado.
Nosso código ficou terminado ficou assim:

const total = empresas.reduce((resultado, quantidade) => {
    return (resultado + quantidade.valorDeMercado ’);
}, 0);

Como resultado temos:

console.log( total )
1840

Com a utilização dos métodos como map, filter e reduce foi possível realizar todos os desafios propostos no Coding Dojo com códigos semânticos, simples e funcional.

Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação front-end. Nela, você verá como utilizar outros métodos do Javascript moderno, conhecer boas práticas e muito mais.