Métodos de array no Javascript

 em Desenvolvimento

No Javascript existem diversas funções, e algumas delas operam em arrays, como pop, push etc. O que eu vou explicar neste tópico são algumas das principais funções que operam em array, as funções das quais eu vou falar são classificadas comoHigh-order functions . Neste tópico você verá ForEach, Map, Filter, Sort e Reduce.

Mas o que são High-order functions ?

Esse tipo de função não é nada mais do que uma função que recebe como argumento alguma função ou retorna alguma função.

Acho que o melhor jeito de entender as High-order function é tentar entender as funções e exemplos que eu darei a seguir com base nesta definição.

Para fazer os exemplos eu criei um array de biscoitos, onde cada um tem um nome, uma marca e uma quantidade de vendas, e salvei em um arquivo .js, como neste exemplo:

const biscoitos = [
{ nome: "Cookie", marca: "Bauduco", venda: 12 },
{ nome: "Cookie", marca: "Toddy", venda: 30 },
{ nome: "Biscoito agua e sal", marca: "Bauduco", venda: 10 },
{ nome: "Biscoito maizena", marca: "Marilan", venda: 8 },
{ nome: "Biscoito chocolate", marca: "Marilan", venda: 15 }
]

Antes de mais nada, eu vou usar nos exemplos algumas propriedades do ECMAScript 6, caso você queira saber mais sobre, veja o link abaixo:

O Guia do ES6: TUDO que você precisa saber
Você já ouviu falar em ES6, ECMAScript 6, ou ES2015 mas ainda não sabe direito o que é, quais seus benefícios e como…medium.com

1. ForEach

Você provavelmente conhece o laço de repetição for, muito utilizado em diversas linguagens de programação. Mas não estamos falando do for e sim do ForEach, que segue uma linha parecida.

O ForEach faz o que o nome diz (Para cada), operando em um array de elementos, então ele executa uma função para cada elemento dentro de um array.

Para um exemplo bem simples, vamos mostrar o nome de cada um dos biscoitos dentro do array, desta forma:

biscoitos.forEach(biscoito => {
console.log(biscoito.nome)
});

O que o código está fazendo é simplesmente pegar cada propriedade do array biscoitos, colocar em um argumento chamado biscoito e executar uma função, está função irá dar um console.log()no nome do biscoito. Simples não? no console fica assim:

2. Map

O map é uma função muito poderosa no Javascript, ela retorna um novo array com o argumento que você passou.

Vou mostrar um exemplo na prática, mas o mais importante para se lembrar é que o map cria um novo array

const nomeBiscoitos = biscoitos.map(biscoito => biscoito.nome)
console.log(nomeBiscoitos);

Aqui eu criei uma constante nomeBiscoito que recebe o array de biscoitos, e cria um novo array, passando um argumento chamado biscoito e pra cada item no array de biscoitos ele retorna o nome do biscoito, então o resultado seria:

Eu deixei o exemplo do ForEach ali para exemplificar melhor, eu fiz a mesma coisa nos dois exemplos (mostrei o nome de cada biscoito dentro do array), porém usando o map ele cria um novo array, isso gera muitas possibilidades, inclusive não é algo tão raro encontrar casos de ter um map dentro de outro.

3.Filter

O filter é uma função bem simples de se entender, porém também é bem poderosa, como o map. O filter basicamente filtra dentro do array as propriedades com as condições que você coloca e as retorna.

Então, vamos filtrar e retornar dentro do array de biscoitos apenas os biscoitos que são Cookies, desta forma:

const bolachaNaoBiscoito = biscoitos.filter(bolacha => 
bolacha.nome == 'Cookie')
console.log(bolachaNaoBiscoito);

Para você entender melhor o que este código esta fazendo, e também o que o filter faz, eu vou escrever outro exemplo sem usar o ES6, e depois usando ele…

const biscoitoBauduco = biscoitos.filter(function(biscoito) {
if (biscoito.marca == 'Bauduco') {
return true;
}
});
const biscoitoBauduco2 = biscoitos.filter(biscoito => 
biscoito.marca == 'Bauduco');
console.log(biscoitoBauduco);
console.log(biscoitoBauduco2);

Então desta forma, teremos como resultado do primeiro exemplo o retorno dos biscoitos que são Cookies dentro do array de biscoito, e depois o retorno dos biscoitos que são da marca Bauduco (duplicado, pois estamos fazendo de duas formas diferentes).

4. Sort

Para explicar melhor o sort, vamos pensar no exemplo do filter, o filter retornava os itens do array que atendiam as condições que eram impostas. O sort faz algo parecido, ele organiza o array com as condições que são impostas e nos retorna.

Para ter um exemplo melhor, vamos usar a propriedade venda dos biscoitos, e vamos organizar os biscoitos do que tem a menor venda, para o que tem a maior, com este código (novamente com um jeito com e sem ES6 para melhor compreensão):

const ordemBiscoitos = biscoitos
.sort((biscoito1, biscoito2) => biscoito1.venda - biscoito2.venda);
const ordemBiscoitos2 = biscoitos
.sort(function(biscoito1, biscoito2) {
if(biscoito1.venda - biscoito2.venda) {
return true;
}
});
console.log(ordemBiscoitos);
console.log(ordemBiscoitos2);

No código eu estou passando dois parâmetros para a função, a função recebe os dois parâmetros e os compara, o menor ela retorna true.

Veja que a ordem do array de biscoitos mudou, e ele está organizado com a menor venda até a maior.

Mas então surge a pergunta: “Mas você disse que o sort parece com o filter, onde está a semelhança?”

Bom, a semelhança é ambos não modificam o array original e nem criam um novo, os dois apenas usam métodos de mostrar o array original de alguma forma diferente, seja só os atributos que nos passarmos para ele (como o filter) ou então em uma ordem diferente (como o sort)

5. Reduce

O reduce já não é um método tão simples. O que ele faz é reduzir o array, e pode fazer isso de várias formas, eu vou dar um exemplo bem simples de como usar o reduce, mas lembre-se: reduce é mais complexo que apenas um método de soma

Bom no nosso array original temos a quantia de vendas de cada biscoito, então vamos criar um total para somar todas as vendas

const totalDeVendas = biscoitos.reduce((total, venda) => 
total += venda.venda, 0);
console.log(totalDeVendas);

O resultado é simples, a soma de vendas do array.

Agora vou chamar sua atenção para um número dentro da função do reduce, aquele 0 , bom, o reduce recebe dois parâmetros, a sua condição (ou seja, o que você quer que o reduce faça) e por onde ele irá começar, como estamos fazendo uma soma total, o reduce deve começar com 0, então isso é como se fosse o start do reduce. Se tirarmos o 0 o resultado é esse:

Isso acontece porque o reduce não sabe extamente o que deve fazer com os parâmetros que ele recebeu.

6.Combinações

Muitas vezes, apenas um método não irá resolver seu problema, porém nada impede que você utilize vários métodos de array.

Para exemplificar, vamos tentar somar o total de vendas somente da Bauduco, com o seguinte código:

const somaBauduco = biscoitos
.filter(biscoito => biscoito.marca == 'Bauduco')
.map(biscoito => biscoito.venda)
console.log(somaBauduco);
const resultadoSoma = somaBauduco
.reduce((a, b) => a + b, 0)
console.log(resultadoSoma);

Primeiro é filtrado do array de biscoitos (com filter), todos da marca Bauduco, após, é criado um novo array (com map) apenas com as vendas da bauduco, e por ultimo, eu peguei o array que o map retornou e reduzi ele (com reduce).

Eu separei este exemplo em duas constantes, para exemplificar melhor, mas poderia muito bem ser feito com apenas uma.


Obrigado por ler o post até aqui, espero que tenha aprendido o que sobre os métodos de array e o que são High-order functions, existem outros métodos de array no Javascript, aqui eu demonstrei como funcionam os principais, se você já as conhecia, é sempre bom relembrar 🙂

Se quiser ver todo o código com os exemplos, veja no meu GitHub, se quiser entrar em contato aqui está meu LinkedIn e meu E-mail, obrigado!

GitHub: https://github.com/BrenoP/High-order-functions-exemplos

LinkedIn: https://www.linkedin.com/in/brenoperetta/

Medium: https://medium.co/@peretta.breno

E-mail: peretta.breno@gmail.com

Postagens Recentes

Deixe um Comentário

Comece a digitar e pressione Enter para pesquisar