Encontrar el índice exacto de un elemento en un array, sin tener que recorrerlo manualmente, ahora es posible con el método findIndex de JavaScript. Si aún no sabes usarlo, quédate porque en este post te explicaré cómo usar esta herramienta como un verdadero experto y así agilizar tu código. Ten por seguro que, luego de que conozcas todos sus secretos, no volverás a recorrer un array de la misma forma.
¿Qué es findIndex en JavaScript?
El método findIndex en JavaScript te ayuda a encontrar la posición de un elemento en un array que cumpla con una condición que tú le especifiques a través de una función (callback). En lugar de devolverte el elemento en sí, te da su índice o posición en el array. Y si no encuentra ningún elemento que cumpla con la condición, te devuelve un -1, lo que significa que no encontró nada. Te resultará muy útil cuando necesites saber dónde está un elemento, no solo cuál es su valor.
Sintaxis de findIndex
Esta es la sintaxis básica:
arr.findIndex(callback(element[, index[, array]])[, thisArg])
Para que la entiendas mejor, voy a explicarte cada elemento de la sintaxis:
- callback: Es la función que se ejecuta en cada elemento del array hasta que se encuentra uno que cumpla la condición. Esta función recibe los siguientes parámetros:
- element: El elemento actual del array.
- index: (Opcional) El índice del elemento actual.
- array: (Opcional) El array sobre el que se está ejecutando findIndex.
- thisArg: (Opcional) El valor que se usará como this cuando se ejecute el callback.
El valor de retorno será el índice del primer elemento que pase la prueba del callback. Si no se encuentra ningún elemento, se devuelve -1.
¿Cómo usar el método findIndex?
Si realmente quieres aprovechar al máximo este método, tienes que entender su funcionamiento. Con este ejemplo te quedará más claro:
Ejemplo básico
Vas a suponer que tienes un array de frutas y necesitas encontrar la posición de una fruta específica, como “blueberries”. Lo puedes hacer así:
const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
const index = fruits.findIndex((fruit) => fruit === "blueberries");
console.log(index); // 3
console.log(fruits[index]); // blueberries
Como puedes ver, lo que hace findIndex es encontrar el valor “blueberries” que está en el índice 3 del array. Así de sencillo encuentras la posición de un elemento en un array.
Búsqueda de números primos
También puedes usar findIndex cuando vayas a buscar números primos dentro de un array:
function isPrime(element) {
for (let i = 2; i <= Math.sqrt(element); i++) {
if (element % i === 0) {
return false;
}
}
return element > 1;
}
const numbers = [4, 6, 8, 12, 7];
const primeIndex = numbers.findIndex(isPrime);
console.log(primeIndex); // 4
Lo que hizo findIndex fue encontrar el índice del primer número primo en el array (7), que está en la posición 4.
Aspectos clave del método findIndex
Te recomiendo tener en cuenta estos aspectos a la hora de trabajar con este método:
- Retorna el índice del primer elemento que pasa la prueba. Si hay más elementos que cumplan la condición, solo se devuelve el primero.
- Si no se encuentra ningún elemento que cumpla la condición, el valor retornado es -1.
- Si se modifica el array durante la ejecución del callback, el valor pasado al callback será el valor en el momento en que el elemento sea procesado.
- Los elementos eliminados aún son visitados durante la ejecución del callback.
Uso de thisArg
Aunque el argumento thisArg es opcional, puedes darle uso si quieres especificar el valor de this dentro de la función callback:
const obj = {
check: "banana",
};
const fruits = ["apple", "banana", "cantaloupe"];
const index = fruits.findIndex(function (fruit) {
return fruit === this.check;
}, obj);
console.log(index); // 1
Aquí, thisArg se usa para que la condición dentro del callback se refiera al valor de check dentro de obj, y así se pueda personalizar aún más la función de búsqueda.
Diferencia entre find y findIndex
Para que no te confundas y sepas cuándo usarlos, ten en cuenta que find devuelve el valor del elemento encontrado y findIndex devuelve el índice.
Por ejemplo, si usas find:
const numbers = [4, 6, 7, 12];
const prime = numbers.find(isPrime);
console.log(prime); // 7
Este código devolverá el valor 7, pero si hubieras usado findIndex, habrías obtenido el índice 2.
¿Cuándo usar Polyfill?
Como este método se introdujo en ES6, no todos los motores de JavaScript antiguos lo soportan. Entonces, usa Polyfill para las versiones anteriores:
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function (callback, thisArg) {
for (let i = 0; i < this.length; i++) {
if (callback.call(thisArg, this[i], i, this)) {
return i;
}
}
return -1;
};
}
Al usar el método findIndex de JavaScript lograrás buscar valores simples o condiciones más complejas. En caso de que desees seguir con tu aprendizaje, te aconsejo unirte al Bootcamp Desarrollo Web . En menos de nada podrás adquirir habilidades únicas e imprescindibles para ingresar en la industria tecnológica donde abundan las oportunidades laborales, estabilidad y los salarios altos. ¡El cambio de vida que esperas está a solo un paso!
