Fala meus queridos, como vocês estão? Nesse pequeno artigo quero comentar com vocês sobre a função find(), uma função de alta ordem presente na classe Array do Javasccript, esta é uma função muito poderosa usada para lidar com busca de dados dentro de um array.
Antes de praticar nós precisamos saber o que essa função faz e como ela opera. Falando de forma prática, esta função irá iterar um determinado array de dados e para cada elemento desse array será executado uma outra função que será passada como parâmetro da função find(). Esta função apelidada de callback tem como objetivo retornar um valor boleano para a função find(), e caso este valor seja true, o elemento do array iterado naquele momento será retornado pela função find().
Agora vamos fazer um exemplo prático para entendermos melhor o funcionamento da função find(). Os exemplos a seguir serão construídos com Typescript, Express e ESLint, mas também podem ser repetidos com Javascript, Express e ESLint, com exceção das tipagens do Typescript.
Para que este exemplo não fique simples demais, vou fazer uma mini API com apenas uma rota, que quando acessada retorna todas as cores armazenadas no sistema e quando passarmos o parâmetro pesquisa com o nome da cor, a rota retornará os dados daquela cor. Para que fique mais fácil de vocês seguirem, vocês pode acessar o projeto inicial aqui e a partir dele poderemos começar a seguir este artigo.
A estrutura inicial do projeto será a seguinte:
Veja que no arquivo src/server.ts estamos importando o Express assim como os tipos da Request e da Response para tiparmos nossa rota inicial que somente retorna uma mensagem de Hello World.
Agora iniciaremos a nossa API com o comando yarn dev no console:
Se abrirmos nossa rota no navegador obteremos a mensagem de Hello World, (Recomendo instalar a extensão de chrome chamada JSON Viwer para ter uma visualização de arquivos JSON no navegador):
Agora que temos nossa aplicação rodando vamos para a rota que retornará todas as cores que estão no arquivo coresData.json.
A primeira coisa a fazer é mover o arquivo coresData.json para a pasta src para evitar erros com o typescript, em seguida iremos importar o módulo fs do Node para lermos o arquivo coresData.json e então transformar os dados de JSON para Objeto.
import express, { Request, Response } from 'express';
import fs from 'fs'; // import módulo fs
const app = express();
app.use(express.json());
app.get('/', (req: Request, res: Response) => {
// leitura do arquivo coresData.json
const coresDataFile = fs.readFileSync(`${__dirname}/coresData.json`, {
encoding: 'utf-8',
});
// transforma JSON em Objeto
const coresData = JSON.parse(coresDataFile);
// Retorna todas as cores como um JSON
return res.status(200).json({ cores: coresData });
});
app.listen(3333, () => {
console.log('App running on <http://localhost:3333>');
});
Agora se acessarmos a rota principal em http://localhost:3333/ a nossa aplicação deve retornar todas as cores em formato JSON:
Agora só nos falta o implementar a lógica do atributo de pesquisa, para isso usaremos o a query que vem dentro da requisição, nós iremos esperar que o atributo pesquisa esteja presente na query da rota, caso não esteja nós só retornaremos todos os registros, mas se estiver presente nós iremos buscar uma cor cujo nome se encaixe com os dados digitados na pesquisa
Dentro do arquivo server, logo após os imports nós iremos criar uma função chamada pesquisaCor que recebe como parâmetro um match, ou seja uma string que será pesquisada, e também recebe os dados das cores para podermos pesquisar.
function pesquisaCor(match: string, coresData: any[]) {
const cor = coresData.find((cor) => {
return new RegExp(match, 'i').test(cor.name);
});
return cor;
}
Veja que a função find() está recebendo outra função como parâmetro, a nossa callback, essa calback vai receber como argumento um objeto cor que será passado para ela pela própria função find(). Devido a função find() chamar essa nossa callback uma vez para cada elemento presente no array, em cada momento o objeto de cor dentro da nossa callback vai ser diferente, mudando até que todas as cores tenham passado pela nossa callback. Essa callback precisa retornar para a função find() um valor booleano, ou seja, true ou false, e esse valor booleano vai decidir se o objeto de cor é o que será retornado para a nossa variável cor.
A função find() executará a nossa callback até que ela retorne true, então o primeiro registro que retornar true será o registro que irá para a nossa variável cor.
Agora precisamos utilizar nossa função dentro da rota, mas antes precisamos verificar se o atributo pesquisa foi passado para o query da requisição e caso esse atributo não exista, nós retornaremos todas as cores do nosso registro, mas se ele existir nós iremos chamar nosa função pesquisaCor para encontrar nossa cor, e então retornaremos essa cor em formato JSON.
import express, { Request, Response } from 'express';
import fs from 'fs';
// Função pesquisaCor
function pesquisaCor(match: string, coresData: any[]) {
// uso da função find para encontrar a cor dentro de coresData
const cor = coresData.find((cor) => {
return new RegExp(match, 'i').test(cor.name);
});
return cor;
}
const app = express();
app.use(express.json());
app.get('/', (req: Request, res: Response) => {
const coresDataFile = fs.readFileSync(`${__dirname}/coresData.json`, {
encoding: 'utf-8',
});
const coresData = JSON.parse(coresDataFile);
const { pesquisa } = req.query
// verifica se pesquisa existe, caso não, retorna todas as cores
if (!pesquisa) return res.status(200).json({ cores: coresData });
// chama o método pesquisaCor para retornar a cor com base na pesquisa e
// retorna essa cor como JSON.
const cor = pesquisaCor(pesquisa as string, coresData);
return res.status(200).json({ cor });
});
app.listen(3333, () => {
console.log('App running on <http://localhost:3333>');
});
Agora basta abrir o navegador e digitar a URL da API que será http://localhost:3333/ e passar o atributo query, então a URL final ficará algo do tipo: http://localhost:3333/?pesquisa=black, essa url retornará o primeiro registro que possua a palavra back no nome da cor.
Conclusão
Nesse pequeno artigo nós aprendemos como funciona a função find() e também vimos uma implementação dessa função em uma pequena API que retorna uma base de cores cadastradas. Fiquem a vontade para comentar possíveis erros, sugestões de melhorias ou seus elogios.
