Métodos de arrays en Javascript Parte 1

Una vez se entiende el funcionamiento principal de los arrays, surgen otros interrogantes y necesidades, como por ejemplo: ¿Cómo agrego un elemento al final del array? ¿Cómo ordeno un array? ¿Cómo busco un elemento que cumpla con una condición? Debido a que estas necesidades son recurrentes a la hora de desarrollar un programa, la mayoría de lenguajes de programación disponen de métodos por defecto para realizar estas tareas de forma simple y óptima. Javascript incluye muchos métodos por defecto, que se deben conocer para encontrar soluciones adecuadas a los requerimientos del programa. En esta primera parte se describirán algunos de estos métodos con ejemplos prácticos.

Método push()

Generalmente no es necesario que los arrays lleven un orden y simplemente se necesita agregar nuevos elementos al final de un array existente. Para este tipo de casos el push() cumple con esa función y permite tener un código limpio y legible. El método push() recibe uno o varios elementos como parámetro, los añade al final del array y adicionalmente retorna la cantidad de elementos después de la adición.

const sports = ['⚽', '🏀', '🏈'];

// Se agrega un deporte al final del array
// Se guarda el nuevo total de elementos en 'total'
const total = sports.push('🏐');
console.log(total); // 4
console.log(sports); // ['⚽', '🏀', '🏈', '🏐']

// Se agregan dos deportes al final del array
// Se guarda el nuevo total de elementos en 'total2'
const total2 = sports.push('⚾', '🎾');
console.log(total2); // 6
console.log(sports); // ['⚽', '🏀', '🏈', '🏐', '⚾', '🎾']

Método unshift()

No siempre se busca agregar elementos al final del array, sino que por el contrario se necesita agregarlos al principio. Javascript también dispone de un método para hacer esto llamado unshift(), este método también recibe uno o varios elementos como parámetro y devuelve la nueva cantidad de elementos, pero al contrario del push(), este los agrega al principio. Veamos el mismo ejemplo anterior pero implementado con unshift().

const sports = ['⚽', '🏀', '🏈'];

// Se agrega un deporte al principio del array
// Se guarda el nuevo total de elementos en 'total'
const total = sports.unshift('🏐');
console.log(total); // 4
console.log(sports); // ['🏐', '⚽', '🏀', '🏈']

// Se agregan dos deportes al principio del array
// Se guarda el nuevo total de elementos en 'total2'
const total2 = sports.unshift('⚾', '🎾');
console.log(total2); // 6
console.log(sports); // ['⚾', '🎾', '🏐', '⚽', '🏀', '🏈']

Método find()

Los arrays tienden a crecer en tamaño y en variedad de elementos que tiene almacenados, perdiendo relativamente el control de en que índice está guardado cierto elemento o incluso saber si el elemento existe dentro del array. El método find() facilita la búsqueda elementos dentro de un array. Este método recibe como parámetro una función con una condición y devuelve el primer elemento que cumpla con esta, aunque si no encuentra el elemento devolverá undefined. En este ejemplo usaremos un array de números para facilitar la comprensión del método.

const numbers = [4, 6, 12, 23, 58, 6];

// Buscamos un elemento que sea mayor que 12
// El método devolverá el primer elemento que cumpla con la condición
const greaterThan12 = numbers.find( (number) => number > 12 );
console.log(greaterThan12); // 23

// Ahora buscamos un elemento que sea igual a 6
const equalTo6 = numbers.find( (number) => number === 6 );
console.log(equalTo6); // 6

// Buscamos un elemento que sea mayor que 100
// Como ningún elemento cumple con la condición, devuelve undefined
const greaterThan100 = numbers.find( (number) => number > 100 );
console.log(greaterThan100); // undefined

Intencionalmente el array tiene dos elementos repetidos, porque pese a que existen dos elementos con el mismo valor 6, al buscarlo con el find() nos retornará el primero que encuentre y el otro se ignora por completo, esto quiere decir que el método detiene la búsqueda una vez encuentre el elemento que cumpla con la condición.

Método findIndex()

Si se quiere conocer el índice de un elemento para posteriormente modificarlo, el método findIndex() cumple con esa función. Este método tiene una funcionalidad parecida al find(), con la diferencia que en este caso no se devuelve el elemento sino el índice de este. Igualmente recibe una función como parámetro con una condición y devuelve el índice del primer elemento que cumpla con esta, pero si no encuentra ningún elemento retorna -1. Usando el mismo ejemplo con los números.

const numbers = [4, 6, 12, 23, 58, 6];

// Buscamos un elemento que sea mayor que 10
// El método devolverá el índice del primer elemento que cumpla con la condición
const greaterThan10Index = numbers.findIndex( (number) => number > 10 );
console.log(greaterThan10Index); // 2

// Con el índice, se puede modificar el valor de esa posición en el array
numbers[greaterThan10Index] = 10;
console.log(numbers); // [4, 6, 10, 23, 58, 6]

// Buscamos un elemento que sea mayor que 100
// Como ningún elemento cumple con la condición, devuelve -1
const greaterThan100Index = numbers.findIndex( (number) => number > 100 );
console.log(greaterThan100Index ); // -1

Estos solo son algunos métodos de los que dispone Javascript para manipular y buscar en arrays. La idea es hacer un par de post adicionales con método útiles y que se usan mucho en el día a día como desarrollador de Javacript.

Hasta una próxima!