find() vs filter() em JavaScript - Explicando diferenças com exemplos

Uma pergunta comum em entrevistas que os desenvolvedores de JavaScript costumam fazer, é explicar a diferença entre os métodos find() e filter().

Neste tutorial de hoje, mostrarei o que são esses métodos e quando você deve usá-los.

O que é o método filter()?

Este método retorna todos os elementos da array que satisfazem a condição especificada na função callback.

Vamos ver com um exemplo como realmente funciona:

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

console.log("y is: ", y); // y is: [1]

Se você verificar a saída do exemplo acima, o valor de y é uma array de 1 elemento que satisfaz a condição.

Isso ocorre porque o métodos filter() itera sobre todos os elementos da array e, em seguida, retorna uma array filtrada que satisfaça a condição especificada.

O que é o método find()?

Este método retorna o primeiro elemento da array, que satisfaz a condição especificada na função callback.

Vamos ver com um exemplo como realmente funciona:

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y is: ", y); // y is: 1

Agora, se você vir a saída do exemplo acima, o valor de y é 1. Isso ocorre porque o método find() procura o primeiro elemento na array, que satisfaça a condição especificada.

As principais diferenças entre os exemplos acima são:

• filter() retorna um array contendo o elemento que satisfaz a condição, mas find() retorna o próprio elemento que satisfaz a condição.

• Em filter(), toda a array é iterada apesar do fato de que o elemento que está sendo procurado está presente no início.

Casos de uso para find() e filter()

Quando você tem um caso de uso em que mais de 1 elemento deve ser retornado e deseja executar a operação em todos os elementos, pode usar o método filter(). Mas se você espera que apenas um único elemento seja retornado do array, então você pode usar find() e evitar iterações extras.

Vejamos exemplos de ambos os casos de uso:

1. Exemplo de caso de uso de filter()

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y is: ", y); // y is: [2, 4]

No exemplo acima, filter() faz mais sentido, pois você deseja iterar todos os elementos da array, para encontrar os elementos que são divisíveis por 2.

2. Exemplo de caso de uso de find()

const emp = [
    {
        name: "Ram",
        empID: 101
    },
    {
        name: "Sham",
        empID: 102
    },
    {
        name: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res is: ", res); // res is: {name: 'Sham', empID: 102}

No exemplo acima, find() faz mais sentido, pois há apenas 1 funcionário que tem 102 como o empID, portanto, find() ajuda a evitar a iteração sobre o terceiro objeto na array.

Obrigado por ler!

Se você achou este artigo útil, compartilhe-o com seus amigos e colegas.