Capa

Table of Contents

  1. Map
  2. Filter
  3. Reduce
  4. Conclusão

Map

Para começar, vamos falar sobre o método map! O método map é muito útil quando por exemplo, precisamos “transfomar” ou mapear um array e criar um outro a partir dele.

Vamos ver um exemplo prático…
Temos um array que guarda os usuários de um sistema, e neste array temos 3 propridades do usuário: ID, nome e email. Como fazer para criar um outro array só com os IDs destes usuários?

1
2
3
4
5
6
7
8
9
10
11
12
13
let usuarios = [
{id: 5, nome: 'Guilherme Teste', email: 'teste123@gmail.com'},
{id: 6, nome: 'Victor Teste', email: 'teste456@gmail.com'},
{id: 7, nome: 'João das neves', email: 'joaodasneves@gmail.com'},
{id: 8, nome: 'Jaime Lannister', email: 'jaimelannister@gmail.com'},
{id: 9, nome: 'Harry Potter', email: 'hp7@gmail.com'}
];

let usuariosIds = usuarios.map(function(usuario) {
return usuario.id;
});

console.log(usuariosIds); // [5, 6, 7 ...]

Muito mais simples e bonito que o usar o tradicional loop, não?

Filter

O Filter, como o próprio nome já diz, é apropriado para filtrar um array.
Vamos aproveitar o array de usuários do exemplo anterior e vamos adicionar a propriedade “setor” a cada objeto do array.
Nos vámos usar a propriedade filter para filtrar os usuário do setor “financeiro”.

1
2
3
4
5
6
7
8
9
10
11
12
13
let usuarios = [
{id: 5, nome: 'Guilherme Teste', email: 'teste123@gmail.com', setor: 'TI'},
{id: 6, nome: 'Victor Teste', email: 'teste456@gmail.com', setor: 'Financeiro'},
{id: 7, nome: 'João das neves', email: 'joaodasneves@gmail.com', setor: 'Recursos Humanos'},
{id: 8, nome: 'Jaime Lannister', email: 'jaimelannister@gmail.com', setor: 'Financeiro'},
{id: 9, nome: 'Harry Potter', email: 'hp7@gmail.com', setor: 'Financeiro'}
];

let usuariosFinanceiro = usuarios.filter(function(usuario) {
return usuario.setor === 'Financeiro';
});

console.log(usuariosFinanceiro); // [Victor, Jaime, Harry]

O método filter é comumente deixado lado por muitos devs, então agora que você já sabe, use-o!

Reduce

Talvez o reduce seja o método menos conhecido para quem está chegando agora. Você deve usar o reduce quando é necessário encontrar um valor cumulativo ou concatenado com base nos elementos do array.
Para entender, é mais fácil usar um exemplo prático.

Supondo que seja necessário reduzir o array de usuários a uma soma dos salários de todos eles juntos, como fazer isso de forma fácil?

1
2
3
4
5
6
7
8
9
10
11
12
let usuarios = [
{id: 5, nome: 'Guilherme Teste', email: 'teste123@gmail.com', setor: 'TI', salario: 800},
{id: 6, nome: 'Victor Teste', email: 'teste456@gmail.com', setor: 'Financeiro', salario: 900},
{id: 7, nome: 'João das neves', email: 'joaodasneves@gmail.com', setor: 'Recursos Humanos', salario: 450},
{id: 8, nome: 'Jaime Lannister', email: 'jaimelannister@gmail.com', setor: 'Financeiro', salario: 600},
{id: 9, nome: 'Harry Potter', email: 'hp7@gmail.com', setor: 'Financeiro', salario: 700}
];
let soma = usuarios.reduce((valorAnterior, elementoAtual) => {
return valorAnterior + elementoAtual.salario;
}, 0);

console.log(soma); // 3450

Conclusão

É importante dizer que estes métodos não substituem o uso de loops. Existem casos onde usar loops é bastante eficaz.
Além disso, estes três métodos são a base da programação funcional, não apenas para o Javascript, mas para várias outras linguagens. Se você ainda não conhece muito sobre programação funcional, definitivamente deveria tirar um tempinho para estudar.