DEV Community

loading...

Métodos de Array - Filter

inando85 profile image Fernando Junior ・2 min read

Chegamos a mais um post da minha saga de estudos em JavaScript.

No último post eu falei sobre o método map

No post de hoje irei falar um pouco sobre o método de array filter.

Método Filter

O método filter, recebe uma função como argumento e executa essa função para cada um dos itens do array.

Usamos esse método quando baseado em uma condição, nós precisamos obter um novo array mas somente com alguns itens do array original.

A função que o método recebe como argumento, pode receber 3 parâmetros:

  • 1: Item, que é o item atual que está sendo iterado
  • 2: Index, que é o índice do item atual que está sendo iterado
  • 3: Array, que é o próprio array original que está sendo iterado

Dos 3 parâmetros, somente o item é obrigatório.

Exemplo básico da utilização do filter:

const randomNumbers = [36, 99, 37, 63]
const numbersGreaterThan37 = randomNumbers.filter(number => number > 37)
console.log(numbersGreaterThan37) // Array(2) [ 99, 63 ]
Enter fullscreen mode Exit fullscreen mode

Em cada iteração que a condição retornar em true, o item iterado será adicionado ao novo array, se caso todos os itens retornem false, o filter irá retornar um array vazio.

const randomNumbers = [36, 99, 37, 63]
const numbersGreaterThan99 = randomNumbers.filter(number => number > 99)
console.log(numbersGreaterThan37) // Array []
Enter fullscreen mode Exit fullscreen mode

Abaixo confirmaremos que o método filter mantém o array original intacto.

console.log(randomNumbers) // Array(4) [ 36, 99, 37, 63 ]
console.log(numbersGreaterThan37) // // Array(2) [ 99, 63 ]
console.log(numbersGreaterThan99) // Array []
Enter fullscreen mode Exit fullscreen mode

Agora trazendo para um caso mais próximo do que podemos fazer no dia a dia.

Temos um array com usuários e queremos filtrar apenas os usuários que sejam premium.

const users = [
  { name: 'Ada Lovelace', premium: true },
  { name: 'Grace Hopper', premium: false },
  { name: 'Alan Turing', premium: true },
  { name: 'Linus Torvalds', premium: false },
  { name: 'Margaret Hamilton', premium: true }
]

const premiumUsers = users.filter(user => user.premium)
console.log(premiumUsers)

/* 
Array(3) [ {…}, {…}, {…} ]
​
0: Object { name: "Ada Lovelace", premium: true }
​
1: Object { name: "Alan Turing", premium: true }
​
2: Object { name: "Margaret Hamilton", premium: true }
​
length: 3
*/
Enter fullscreen mode Exit fullscreen mode

Ficamos por aqui com mais um conteúdo dos meus estudos, vou deixar o link da documentação do site da MDN sobre o método filter.


Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub

Discussion (0)

pic
Editor guide