{"id":114711,"date":"2023-08-01T10:48:28","date_gmt":"2023-08-01T13:48:28","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/javascript-find-localizando-elementos-em-um-array-com-find-em-javascript\/"},"modified":"2023-08-01T10:48:28","modified_gmt":"2023-08-01T13:48:28","slug":"javascript-find-localizando-elementos-em-um-array-com-find-em-javascript","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/javascript-find-localizando-elementos-em-um-array-com-find-em-javascript\/","title":{"rendered":"JavaScript Find: Localizando Elementos em um Array com find em JavaScript"},"content":{"rendered":"


\n<\/p>\n

O que \u00e9 o m\u00e9todo find em JavaScript?<\/h1>\n

O m\u00e9todo find<\/code> \u00e9 uma fun\u00e7\u00e3o nativa do JavaScript que permite localizar e retornar o primeiro elemento de um array que satisfa\u00e7a uma determinada condi\u00e7\u00e3o. Ele foi introduzido na vers\u00e3o ECMAScript 6 (ES6) e \u00e9 muito \u00fatil quando precisamos realizar buscas espec\u00edficas em arrays. O find<\/code> percorre cada elemento do array at\u00e9 encontrar o primeiro que satisfa\u00e7a a condi\u00e7\u00e3o estipulada, retornando-o como resultado. Caso nenhum elemento seja encontrado, o m\u00e9todo retorna undefined<\/code>.<\/p>\n

Como usar o m\u00e9todo find para localizar elementos em um array em JavaScript?<\/h2>\n

A sintaxe b\u00e1sica do m\u00e9todo find<\/code> \u00e9 a seguinte:<\/p>\n

array.find(callback[, thisArg]);\n  <\/code><\/pre>\n
O par\u00e2metro callback<\/code> \u00e9 a fun\u00e7\u00e3o que ser\u00e1 chamada para cada elemento do array. Ela pode receber at\u00e9 tr\u00eas argumentos: element<\/code>, index<\/code> e array<\/code>. O argumento element<\/code> representa o elemento atual, index<\/code> representa o \u00edndice do elemento no array e array<\/code> \u00e9 uma refer\u00eancia ao array original.<\/p>\n
A condi\u00e7\u00e3o que queremos verificar pode ser implementada dentro da fun\u00e7\u00e3o callback. Por exemplo, suponha que temos um array de objetos pessoas<\/code> e queremos encontrar o primeiro objeto que tenha a propriedade idade<\/code> igual a 25. Podemos usar o m\u00e9todo find<\/code> da seguinte maneira:<\/p>\n
const pessoas = [\n    { nome: 'Jo\u00e3o', idade: 20 },\n    { nome: 'Maria', idade: 25 },\n    { nome: 'Pedro', idade: 30 }\n  ];\n\n  const pessoaEncontrada = pessoas.find(function(elemento) {\n    return elemento.idade === 25;\n  });\n\n  console.log(pessoaEncontrada); \/\/ { nome: 'Maria', idade: 25 }\n  <\/code><\/pre>\n
Nesse exemplo, a fun\u00e7\u00e3o de callback verifica se a propriedade idade<\/code> de cada objeto \u00e9 igual a 25. Assim que encontra o primeiro objeto que satisfaz essa condi\u00e7\u00e3o, o m\u00e9todo find<\/code> retorna o objeto encontrado ({ nome: 'Maria', idade: 25 }<\/code>). Caso nenhum objeto seja encontrado, o m\u00e9todo retorna undefined<\/code>.<\/p>\n
Exemplos de uso do m\u00e9todo find para encontrar elementos em um array em JavaScript<\/h2>\n
O m\u00e9todo find<\/code> oferece uma s\u00e9rie de possibilidades para a busca de elementos em um array. Al\u00e9m de comparar propriedades de objetos, podemos utilizar fun\u00e7\u00f5es mais complexas como condi\u00e7\u00f5es de busca. Vejamos alguns exemplos:<\/p>\n
    \n
  1. \n      Localizando um elemento em um array de n\u00fameros:<\/p>\n
    const numeros = [1, 2, 3, 4, 5];\n\nconst numeroEncontrado = numeros.find(function(elemento) {\n  return elemento % 2 === 0;\n});\n\nconsole.log(numeroEncontrado); \/\/ 2\n<\/code><\/pre>\n<\/li>\n
  2. \n      Localizando uma string em um array de strings:<\/p>\n
    const frutas = ['ma\u00e7\u00e3', 'banana', 'laranja'];\n\nconst frutaEncontrada = frutas.find(function(elemento) {\n  return elemento === 'banana';\n});\n\nconsole.log(frutaEncontrada); \/\/ 'banana'\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
    Dicas e considera\u00e7\u00f5es ao utilizar o m\u00e9todo find em JavaScript<\/h2>\n