Utilizar estruturas de repetições para encontrar um determinado conteúdo em uma array, além de ser mais trabalhoso, dificulta a manutenção do código. Isso ocorre em função do aumento de linhas para desenvolver a função de retorno dos dados desejados. Felizmente, temos uma alternativa para facilitar essa tarefa: o método JavaScript filter().

Como o próprio nome sugere, ele tem a função de filtrar o conteúdo de uma array. Faz parte de um conjunto de recursos disponíveis na linguagem JavaScript para a manipulação desse tipo de objeto. Por isso, é importante entender como funciona para saber como utilizá-lo em diferentes situações.

Para que você conheça um pouco mais sobre esse recurso, fizemos este post em que vamos mostrar:

• O que é e como funciona o método JavaScript filter()?
• Como é a sintaxe?
• Quais os 5 exemplos mais interessantes do método filter() na prática?
• O que é polyfill para o filter()?
• Qual a compatibilidade com os navegadores?

Vamos lá? Boa leitura!

O que é e como funciona o método JavaScript filter()?

O método filter() é um recurso que permite fazer a filtragem de elementos com apenas poucas linhas de comandos. Isso facilita o entendimento e a manutenção do código pelas pessoas que desenvolvem softwares.

Na prática, ele faz a leitura dos elementos da array em busca de um valor de referência passado por meio de uma função callback. Ao fazer o teste em cada elemento, o método retorna um ou mais conteúdos que atendam à especificação indicada na função callback e armazena o resultado em uma nova variável do tipo array.

Portanto, o resultado será o de todos os elementos que satisfaçam a condição do filtro. Vale ressaltar que a array original não sofre nenhum tipo de alteração pelo método filter().

Como é a sintaxe?

Antes de explicar a sintaxe do método filter(), vamos falar rapidamente sobre o que significa uma função callback. Na prática, ela é uma função de retorno, ou seja, ela executa uma ação para que seu resultado seja utilizado em uma outra função anterior.

Se você quiser saber um pouco mais sobre o assunto, dê uma olhada nesses exemplos práticos de sua utilização. É importante entender esse conceito, pois a sintaxe do método filter() utiliza uma função callback. Veja como é o comando:

var novaArray = arrayOriginal.filter(function(valorAtual, indice, varArray), thisArgumento))

No qual:

• novaArray: corresponde a uma nova variável do tipo array na qual são armazenados todos os resultados que satisfaçam a condição de filtragem;
• arrayOriginal: é o objeto original que serve de base para a aplicação do método filter;
• Função callback:
• valorAtual: é obrigatório e corresponde ao valor do elemento atual da array;
• índice: é opcional e referente ao índice do atual elemento;
• varArray: valor opcional e corresponde à array a que o valorAtual pertence;
• thisArgumento: valor opcional que funciona como o valor “this” ao executar a função callback.

Quais os 5 exemplos mais interessantes do método filter() na prática?

Nada melhor que exemplos práticos para visualizar o que diz a teoria. Por isso, confira, a seguir, algumas formas de utilizar o método filter().

Exemplo 1

Vamos imaginar uma variável do tipo array com uma sequência numérica de um a dez, e precisamos separar todos os elementos pares. Confira o código.

var numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function buscarNumerosPares (value) {
    if (value % 2 == 0) 
    return value;
}
var numerosPares = numeros.filter(buscarNumerosPares);
console.log(numerosPares);


Na primeira linha do código foi feita a declaração da variável array com os elementos necessários. A seguir, declaramos uma função callback, chamada buscarNumerosPares, que recebe cada elemento da array e faz um teste para identificar os números pares.

Isso é feito por meio da divisão de cada elemento por dois e, caso o restante da operação seja zero, significa que o número avaliado é par. Vale ressaltar que o operador % utilizado no código retorna o valor restante da divisão entre o elemento por dois. Caso ele seja zero, identifica o número avaliado como par.

Na próxima linha, finalmente, utilizamos o método filter(). Primeiro, declaramos uma variável do tipo array chamada numerosPares para armazenar o retorno do processamento. O comando numeros.filter(buscarNumerosPares) faz a chamada à função callback correspondente, por meio do envio de cada elemento da variável números.

Existem outras formas de escrever esse mesmo código. Veja o algoritmo, a seguir.

var numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var retorno = numeros.filter(pares => (pares %2)== 0);
console.log(retorno);


Perceba que, nesse exemplo, fazemos a declaração da variável de retorno e já atribuímos a ela o resultado do método filter(). Para isso, utilizamos a arrow function, que é uma forma mais simples de utilizar funções. Dessa forma, o que vier depois da declaração => é entendido como uma função. A saída para os dois códigos acima é a mesma.

 /*Saída:
  Array(5) [2, 4, 6, 8, 10]
 */


Exemplo 2

No exemplo a seguir, buscaremos na variável do tipo array quais estados se iniciam com a letra S. Confira o código.

var estados = ["São Paulo", "Minas Gerais", "Rio de Janeiro", "Rio Grande do Norte", "Santa Catarina", "Acre"];
function retornaEstado (value){
    if (value.charAt(0) == "S") 
    return value;
}
var resultado = estados.filter(retornaEstado);
console.log(resultado);


Em primeiro lugar, declaramos a variável estados com cinco elementos com as iniciais variadas. A seguir, fizemos uma função chamada retornaEstado, que lê o primeiro caractere de cada elemento em busca da letra S.

Perceba que para ler o primeiro caractere, utilizamos o método charAt(), que retorna o caractere de uma string, de acordo com o índice referenciado. No nosso exemplo, buscamos o índice 0, pois corresponde ao caractere inicial da string.

O próximo passo é utilizar a função. Para isso, criamos a variável do tipo array chamada resultado para armazenar o retorno do método filter(). Então, aplicamos o método na array estados e chamamos a função retornaEstado, que retornará dois elementos: “São Paulo” e “Santa Catarina”.

Assim como no exemplo anterior, podemos utilizar a arrow function para escrever esse código. Veja como ele fica ao utilizarmos essa opção, que terá o mesmo resultado.

var estados = ["São Paulo", "Minas Gerais", "Rio de Janeiro", "Rio Grande do Norte", "Santa Catarina", "Acre"];
var resultado = estados.filter( estadosComS  => (estadosComS.charAt(0) == "S"));
console.log(resultado);


Exemplo 3

Neste exemplo, vamos falar sobre uma array de variáveis do tipo objeto. É importante dizer que o tipo objeto é utilizado quando queremos armazenar mais de uma característica de um mesmo elemento.

Por exemplo, podemos ter uma lista de produtos com as seguintes informações sobre cada item: id, descrição e categoria do produto. Portanto, podemos criar um objeto chamado produtos que contenha essas características e armazenar vários desses objetos em uma array.

Em JavaScript, cada característica do objeto é chamada de propriedade. Assim, um objeto pode ter várias propriedades, que contêm um identificador e o seu valor correspondente. Podemos utilizar o método filter() para acessar os elementos em uma array de objetos. Confira o exemplo.

var produtos = [
    {id: 1, descricao: "Smartphone", categoria: "Eletrônico"},
    {id: 2, descricao: "Notebook", categoria: "Eletrônico"},
    {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"},
    {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"},
    {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"}
]
function retornaEletronico (value){
    if (value.categoria == "Eletrônico")
    return value;
}
var produtosEletronico = produtos.filter(retornaEletronico);
produtosEletronico.forEach(produtoEletro => { 
    console.log(produtoEletro);
})
/* saída:
Object {descricao: "Smartphone", categoria: "Eletrônico"}
Object {descricao: "Notebook", categoria: "Eletrônico"}
*/


Primeiramente, declaramos a array com cinco objetos que vamos chamar de produtos. A seguir, declaramos uma função chamada retornaEletronico, que devolverá todos os objetos que sejam da categoria eletrônico.

Perceba que a validação na função acessa a propriedade categoria para compará-la com o conteúdo desejado. Na próxima linha, é feita a declaração da variável de retorno para a aplicação do javascript filter object.

A seguir, exibimos o resultado na console dos objetos selecionados pelo filtro. Para isso, utilizamos a estrutura de repetição forEach, que lê todos os elementos da array e executa o comando console.log para exibir o resultado correspondente ao depurarmos o código.

Exemplo 4

Neste exemplo, vamos utilizar a mesma situação do anterior. Entretanto, vamos desenvolver o código com a arrow function e selecionar os produtos que sejam da categoria eletrodomésticos. Veja como fica o código.

var produtos = [
    {id: 1, descricao: "Smartphone", categoria: "Eletrônico"},
    {id: 2, descricao: "Notebook", categoria: "Eletrônico"},
    {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"},
    {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"},
    {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"} 
]
var produtosEletrodomestico = produtos.filter(produto => produto.categoria == "Eletrodoméstico");
produtosEletrodomestico.forEach(produto => { 
    console.log(produto);
});
/* saída:
Object {descricao: "Geladeira", categoria: "Eletrodoméstico"}
Object {descricao: "Liquidificador", categoria: "Eletrodoméstico"}
Object {descricao: "Fogão", categoria: "Eletrodoméstico"}
*/


Criamos a variável produtosEletrodomesticos e já aplicamos o filtro para selecionar, em cada produto, a propriedade categoria que atenda à condição desejada. No próximo passo, todos os elementos armazenados na nova array são exibidos na console por meio da estrutura de repetição forEach.

Exemplo 5

Outra forma de utilizar o filter() é para criar uma nova array com elementos válidos. Imagine uma array que tenha objetos nulos ou indefinidos junto a outros conteúdos. Portanto, o JavaScript array filter() pode ser uma alternativa para selecionar os elementos que tenham os dados consistentes. Confira.

var produtos = [
    {id: 1, descricao: "Smartphone", categoria: "Eletrônico"},
    {id: 2, descricao: "Notebook", categoria: "Eletrônico"},
    {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"},
    {},
    {id: null },
    {id: NaN},
    {id: 'undefined' },
    {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"},
    {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"}
]
function filtrarPorDescricao(value) {
    if ('id' in value && typeof(value.id) === 'number' && !isNaN(value.id)) {
         return value;
    } 
}
var produtosValidos = produtos.filter(filtrarPorDescricao);
produtosValidos.forEach(produto => { 
    console.log(produto);
})
/* saída
Object {id: 1, descricao: "Smartphone", categoria: "Eletrônico"}
Object {id: 2, descricao: "Notebook", categoria: "Eletrônico"}
Object {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico"}
Object {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico"}
Object {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico"}  
*/

No código acima, adicionamos alguns elementos inválidos e nulos para executar o teste. A seguir, fizemos uma função, chamada filtrarPorDescricao, que identifica os elementos inválidos e retorna apenas os que tiverem um valor numérico armazenado na propriedade id.

Dessa forma, criamos uma nova array de objetos apenas com produtos válidos e listamos o resultado na console do navegador.

O que é polyfill para o filter()?

O método filter() foi adicionado ao JavaScript a partir da EMCA-262 5.1th Edition, que é a especificação de linguagem de script implementada pelo JavaScript. Isso significa que alguns navegadores, especialmente os mais antigos, podem não estar preparados para atender às mudanças apresentadas com a nova especificação.

O método filter(), por exemplo, é um dos recursos que podem não funcionar nesses navegadores. Por isso, existem os polyfills, que são códigos que devem ser adicionados no início do código que utiliza esse recurso.

Assim, caso a pessoa utilize algum desses navegadores, não tem a funcionalidade interrompida por falhas por incompatibilidade. Vale ressaltar que o código pode ser encontrado na página do MDN Web Docs, na documentação sobre o método filter().

Qual a compatibilidade com os navegadores?

Como dissemos no tópico anterior, o método filter() foi adicionado ao JavaScript a partir da 5.1 edição da EMCA-262, que foi lançada em 2011. Portanto, é um recurso relativamente novo.

Entretanto, os principais navegadores oferecem suporte a esse recurso. Confira, a seguir, a partir de qual versão essa funcionalidade roda perfeitamente em cada navegador.

• Chrome: 1;
• Edge: 12;
• Firefox: 1.5;
• Internet Explorer: 9;
• Opera: 9.5;
• Safari: 3;
• Android webview: <=37;
• Chrome for Android: 18;
• Firefox for Android: 4;
• Opera for Android: 10.1;
• Safari on iOS: 1;
• Samsung Internet: 1.0.

O método JavaScript filter() é um recurso que permite a manipulação de elementos em uma array. Trata-se de uma forma de reduzir as linhas de código, pois é possível utilizá-lo em substituição às estruturas de repetição usadas para selecionar elementos em uma array. Por isso, é importante entender como ele funciona para utilizá-lo da melhor forma em suas aplicações web.

Gostou do nosso conteúdo sobre as formas de aplicação do método filter()? Então, confira este guia inicial imperdível sobre expressões regulares!