Métodos de Array - Filter

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 ]

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 []

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 []

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
*/