El índice de un elemento en un arreglo es importante cuando realizamos búsquedas o comprobamos si determinado valor existe en un arreglo. Hoy veremos dos maneras de buscar la posición de un elemento en un arreglo de JavaScript.

Como primer ejemplo veremos el uso de indexOf, que busca datos en arreglos con tipos de datos que no son objetos.

En segundo lugar, veremos una nueva versión llamada findIndex que nos permite definir una función que será la que busque a partir de un criterio, algo así como un indexOf mejorado.

Esto sirve muy bien cuando queremos buscar dentro de un arreglo de objetos o cuando queremos que se cumpla cierto criterio de búsqueda.

Cómo saber si un elemento existe

Aunque el motivo de este post es saber el índice, index o posición numérica de un elemento dentro de un arreglo, los métodos expuestos aquí devuelven el índice o -1, y si devuelven -1 significa que no encontraron el índice.

Esto lo podemos usar para comparar. Si lo que devuelven es -1, el valor no existe.

Sobre lastIndexOf

indexOf comienza a buscar desde el inicio, o desde la izquierda, como quieras verlo. En cambio, lastIndexOf busca desde la derecha, es por eso que es “Last”, porque busca el último elemento.

Tómalo en cuenta por si tus necesidades son distintas, o si tu arreglo podría tener más de una vez el elemento y quieres buscar su última ocurrencia.

Usar indexOf para buscar índice de arreglo

Ahora sí a lo que venimos. Vamos a ver un ejemplo sencillo para saber en dónde está un elemento.

let arreglo = [1, 2, 50, 1, 2, 3, 88, 45],
	busqueda = 50;
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando ", busqueda);
let indice = arreglo.indexOf(busqueda);
console.log("El elemento buscado está en el índice ", indice);

La salida en este caso es 2, pues el 50 está en el índice 2 del arreglo.

También funciona para cadenas, así:

let arreglo = ["perro", "gato", "ballena", "vaca", "burro"],
	busqueda = "gato";
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando ", busqueda);
let indice = arreglo.indexOf(busqueda);
console.log("El elemento buscado está en el índice ", indice);

Bueno, de hecho funciona para cualquier tipo de dato, siempre y cuando no sea un objeto.

findIndex para buscar índice en un arreglo a través de un criterio

Este método me gusta más, ya que uno define la forma en la que el elemento será buscado. De esta manera, podemos comparar propiedades de un objeto o incluso el objeto completo, pero vamos por partes.

Buscar índice comparando una propiedad

En este primer ejemplo vamos a buscar una mascota a partir de un nombre. Es decir, compararemos la propiedad del objeto con una búsqueda.

let arreglo = [{
	nombre: "Maggie",
	tipo: "Perro",
	edad: 3,
}, {
	nombre: "Guayaba",
	tipo: "Perro",
	edad: 1,
}, {
	nombre: "Snowball",
	tipo: "Gato",
	edad: 1,
},
];
let busqueda = "Guayaba";
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando en donde el nombre sea igual a: ", busqueda);
let indice = arreglo.findIndex(mascota => mascota.nombre === busqueda);
console.log("El elemento buscado está en el índice ", indice);

Lo importante es la parte en donde llamamos a findIndex. Utilizamos una función flecha para regresar un booleano, este booleano le indica a findIndex que hemos encontrado el valor.

Es decir, la función va a recorrer el arreglo, y comparará los valores con la búsqueda. Si la función regresa false, seguirá buscando. Si regresa true, se detiene y nos da el índice.

Comparar objetos para buscar índice en arreglo de JS

Ahora veamos cómo comparar el objeto completo. Hay muchas formas de compararlo, sobre todo cuando queremos que se haga de manera eficiente.

Aquí no veremos la forma eficiente, sino una que funciona. Lo que haremos será codificar el objeto a una cadena JSON, y una cadena JSON es eso: una cadena, nada más.

De esta manera, al convertir dos objetos a JSON, si tienen exactamente las mismas propiedades y valores, se dice que son iguales.

let arreglo = [{
	nombre: "Maggie",
	tipo: "Perro",
	edad: 3,
}, {
	nombre: "Guayaba",
	tipo: "Perro",
	edad: 1,
}, {
	nombre: "Snowball",
	tipo: "Gato",
	edad: 1,
},
];
// La búsqueda la pasamos a JSON
let busqueda = JSON.stringify({
	nombre: "Snowball",
	tipo: "Gato",
	edad: 1,
});
console.log("Tenemos el arreglo: ", arreglo);
console.log("Buscando en donde el objeto sea igual a: ", busqueda);
let indice = arreglo.findIndex(mascota => JSON.stringify(mascota) === busqueda);
console.log("El elemento buscado está en el índice ", indice);

La parte importante ahora es en donde convertimos el objeto a JSON, de forma que su tipo ahora es cadena.

Igualmente podríamos comparar propiedad por propiedad, pero sería un poco más complejo por si en el futuro agregamos más propiedades.

Como sea, aunque es un poco sucio, funciona.

Conclusiones y compatibilidad

El método que más funciona es findIndex, pues nos permite buscar a partir de un criterio. Aquí lo usamos para objetos, pero igualmente podríamos usarlo para buscar el índice en donde el valor sea mayor a determinado número, o donde una cadena empiece con determinada letra, etcétera.

Espero por el bien del mundo que no tengamos que seguir soportando viejos navegadores (personalmente no lo hago), pero en caso de que tú quieras tener el método findIndex mira esta página para ver un polyfill y esas cosas de compatibilidad.

Ah, por cierto, también existe el método find, que funciona exactamente igual que lastIndexOf pero devuelve el valor en lugar del índice.