Métodos de arrays en Javascript Parte 1
Tags: javascript, programming, beginners, spanish
Published: 2023-08-01 20:12:46

Una vez se entiende el [funcionamiento principal de los arrays](https://dev.to/stevendev/arrays-en-javascript-3fe9), 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.

```javascript
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 push Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7un9q8r3b7nw3zcceu8.png)

### 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()`.

```javascript
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 unshift Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhll46d30c3gkm60c6as.png)

### 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.

```javascript
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
```

![Método find Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4aniveh47waubpn0k55.png)

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.

```javascript
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
```

![Método findIndex Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tw4kbb0d6kabez0n7th.png)

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!