7 Mejores métodos arreglos javascript

Si estás iniciando en programación y desarrollo debes conocer los métodos arreglos javascript para mejorar tu código. Cada herramienta o conocimiento adicional que tengamos va a hacer que nuestra lógica de programación encuentre nuevos caminos, nuevas formas de encontrar un resultado.

Es por esta razón que hoy quiero hablarte sobre los métodos de arreglos en javascript y algunos ejemplos para que los apliques en tus proyectos. Claro está que existen muchos más que estos 7 ejemplos, pero considero por mi experiencia que estos van a ser de prioridad en tu código, así que vamos a empezar.

Lo que vas a necesitar

Aquí te comparto algunos enlaces importantes que te ayudarán a entender mejor este nuevo post:

• Repositorio: Si vienes del video de youtube o bien lo verás más abajo, haz click aquí para ver el código que uso en el video.
• Git y github: si usarás el repositorio pero no sabes cómo descargarlo a tu compu, haz click aquí para ver el post sobre git y github.
• Ejecutar Javascript paso a paso en VS Code: si bien en el video uso node para ejecutar en la terminal el código, haz click aquí para ver otros métodos de ejecución.

Qué son los métodos en javascript

Los métodos son funciones que permiten modificar elementos del arreglo. En otras palabras son funciones previamente realizadas que solucionan una o varias necesidades, modificando, creando, filtrando o encontrando datos de un arreglo.

Cómo ejecutar un método arreglo javascript

Los métodos permiten ahorrar líneas de código y lo mejor de todo es que funcionan. Cada método tiene una particularidad o funcionalidad pero todos en teoría se ejecutan de la misma forma:

nombreDelArreglo.nombreDelMetodo(posibles argumentos);

Esta es la forma particular de ejecución aunque algunos métodos retornen otro arreglo por ende, no modifica el actual así que necesitarás guardar el resultado en otra variable, como por ejemplo:

var nuevoArreglo = nombreDelArreglo.nombreDelMetodo(posibles argumentos);

Método Push

El método push es uno de mis favoritos, por no decir que es el que más uso la verdad. Pero bueno, el método push agrega un elemento en la última posición del arreglo. IMPORTANTE: NO REEMPLAZA LA ULTIMA POSICION, si no que agrega una nueva posición y en esta ingresa el elemento dado. Este es un ejemplo:

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];

arregloNumeros.push(770);

// resultado: arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57,770];

Dentro del paréntesis se agrega el valor que queremos añadir en la nueva última posición del arreglo. En este caso como vemos, push modifica el arreglo actual.

Método unshift

El método unshift creará una nueva primera posición del arreglo y agregará un valor a esta posición. Claro está que no reemplaza el valor de la primera posición, es importante decirlo así que vamos a ver un ejemplo:

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];

arregloNumeros.unshift(456);

// resultado: arregloNumeros = [456,1,2,3,89,72,67,7,34,4,6,57];

Cómo vemos el método unshift agregó el valor 456 a la nueva primera posición. También es un método de arreglo en javascript que modifica el arreglo actual.

Método pop

El método pop elimina la última posición del arreglo. A diferencia de los anteriores, no necesita un argumento para ejecutarse, así que vamos a ver el ejemplo:

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];

arregloNumeros.pop();

// resultado: arregloNumeros = [1,2,3,89,72,67,7,34,4,6];

Cómo vemos, el método pop arreglo javascript simplemente elimina la última posición del arreglo ejecutado y listo.

Método shift

El método shift elimina la primera posición del arreglo. Al igual que pop, no necesita un argumento para ejecutarse así que vamos a ver un ejemplo:

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];

arregloNumeros.shift();

// resultado: arregloNumeros = [2,3,89,72,67,7,34,4,6, 57];

De esta manera, el método shift permite eliminar la primera posición sin modificar las demás posiciones del arreglo.

Método slice

El método slice permite crear un nuevo arreglo partiendo de un inicio y un final indicado en los argumentos. Al ejecutar el método slice se solicita un inicio y un final. Estos 2 argumentos siendo números, inidcan 2 posiciones del arreglo actual. A partir de estos retorna un nuevo arreglo con esos valores SIN INCLUIR LA ÚLTIMA POSICIÓN O POSICIÓN FINAL INDICADA. Vamos a ver el ejemplo.

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];

var arregloSlice = arregloNumeros.slice(3, 5);

// resultado: arregloSlice = [89,72];

Aquí podemos observar que el método slice se ejecuta pero el resultado se guarda en una nueva variable. Ahora, cuando iniciamos 3 como inicio, la posición 3 tiene como valor el número 89. Luego indicamos la posición 5 cómo posición final pero como esta posición no se cuenta para el nuevo arreglo, entonces solo entran las posiciones 3 y 4.

Esto dando como resultado un nuevo arreglo con los números 89 y 72 en las primeras posiciones.

Método foreach

Este en definitiva foreach es uno de los métodos que más utilizo. Incluso en el ejemplo los uso ambos. Ahora, el método forech permite recorrer un arreglo y ejecutar una función en cada una de esas posiciones. Entonces lo que se indique dentro de la función en si afectará a todas y cada una de las posiciones.

var arregloNumeros = [1,2,3,89,72,67,7,34,4,6,57];
var arregloForeach = [];

arregloNumeros.forEach(numeroActual => {
    
    // si el elemento actual es mayor a 5, entonces poner en la última posición del arreglo arregloForeach
    if(numeroActual>5){
        arregloForeach.push(numeroActual);
    }

});

// Resultado: arregloForeach = [89, 72, 67, 7, 34, 6, 57];

Al crear el método en VS Code vemos que inmediatamente nos crea un primer argumento llamado «element» pero este se puede modificar. Yo lo cambié a «numeroActual» y esta variable representará la posición actual del arreglo. Como decir arreglo de vasos, y «element» podemos cambiarlo a «vaso». Un singular en teoría.

Ahora, vemos que al recorrer el arreglo le pedimos que busque solo los números mayores a 5 y luego que los ponga en la última posición de un nuevo arreglo que creamos previamente. Por ende este nuevo arreglo solo tendrá los valores que sean mayores a 5.

Método map

Por último pero no menos importante, el método map. Este método map permite recorrer el arreglo actual y ejecutar una función a los elementos del arreglo. Algo similar a foreach pero a diferencia, este método no modifica el arreglo actual y retorna un nuevo arreglo con el resultado de la función.

var arregloNumeros = [1,2,3];

var arregloMap = arregloNumeros.map(function(num){
    return num * 3;
});

// resultado: arregloMap = [3, 6, 9];

Entonces vemos que el método map de arreglos en javascript, ejecutó la función a todos los elementos del arreglo y luego lo retornó en un nuevo arreglo, el cual guardamos en una variable externa.

Video de ayuda

Hice este video para guiarte mejor en el proceso. Si te gustó no olvides dar like y suscribirte para nuevos videos y ayudarme como creador de contenido a ser más recomendado en youtube 😎

Producto sugerido

Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.

Conclusión

Los métodos de arreglos en javascript en definitiva mejorarán nuestro código y es importante conocer no necesariamente todos, pero si los que creamos que van a afectar más frecuentemente nuestra manera de escribir código. Si acostumbramos a hacer ciertas prácticas de búsqueda o modificación en arreglos, puede que alguno de estos métodos nos libere de ese trabajo.