Saltar al contenido
Programación

Funciones más importantes de los Array en Javascript

marzo 19, 2021

En este artículo vamos a enumerar y a explicar las funciones más importantes que puedes usar para el manejo de los Arrays en Javascript. Un array es una estructura de datos que consiste en arreglo de datos, algo así como una matriz.

El manejo correcto de los arrays puede facilitarte muchos procesos que son complejos de hacer, o consumen muchos recursos si los intentas hacer de una forma manual. Es por eso que vamos a repasar los métodos de arrays que vas a usar mucho como programador.

map( )

El método map( ) se llama con un punto después del array, esto genera un callback el cual recibirá cada elemento del array, dentro de la función puedes hacer con la información lo que desees, convertirla o tratarla de la forma que quieras, luego, con un return puedes retornar un nuevo elemento con el que se creará un nuevo array.

Este método es uno de los que yo más uso en mis proyectos ya que me permite manejar completamente la data de los array que utilizo. Cuando la información está tal y como quiero entonces retorno la información ya tratada. Veamos un ejemplo:

const heros =
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 2,  name: "Batman",     fullName: "Terry McGinnis", publisher: "DC Comics"     },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 4,  name: "Venom",      fullName: "Eddie Brock",    publisher: "Anti-Venom"    },
{ id: 5,  name: "Deadpool",   fullName: "Wade Wilson",    publisher: "Evil Deadpool" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 9,  name: "Flash",      fullName: "Jay Garrick",    publisher: "DC Comics"     },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }];
const transformedHeros = heros.map((hero) => {
  // Aquí puedes hacer lo que desees con la información
  
  // Este return devuelve cada elemento que del nuevo array
  return {
    name: hero.name,
    publisher: hero.publisher,
    isFamous: true,
  }
});

console.log(transformedHeros);
// OUTPUT //
[{ name: 'Iron Man', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Batman', publisher: 'DC Comics', isFamous: true },
{ name: 'Spider-Man', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Venom', publisher: 'Anti-Venom', isFamous: true },
{ name: 'Deadpool', publisher: 'Evil Deadpool', isFamous: true },
{ name: 'Thanos', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Thor', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Hulk', publisher: 'Marvel Comics', isFamous: true },
{ name: 'Flash', publisher: 'DC Comics', isFamous: true },
{ name: 'Wolverine', publisher: 'Marvel Comics', isFamous: true }]

filter( )

Esta función es similar al anterior, sin embargo funciona un poco diferente, en este función solo se devuelven los elementos que cumplan alguna condición específica. Esto suele hacerse con un return directo en forma de objeto. Para que esto quede más claro vamos a ver un ejemplo en código.

Cuando utilizas el método filter( ) debes igual el resultado a una variable que se convertirá en un nuevo array que contendrá únicamente los valores que cumplan la condición que especificaste. Veamos el ejemplo:

const heros =
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 2,  name: "Batman",     fullName: "Terry McGinnis", publisher: "DC Comics"     },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 4,  name: "Venom",      fullName: "Eddie Brock",    publisher: "Anti-Venom"    },
{ id: 5,  name: "Deadpool",   fullName: "Wade Wilson",    publisher: "Evil Deadpool" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 9,  name: "Flash",      fullName: "Jay Garrick",    publisher: "DC Comics"     },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }];
// GET HEROS PUBLISHED BY MARVEL COMICS
const transformedHeros = heros.filter((element) => {return  element.publisher === 'Marvel Comics'});
console.log(transformedHeros);
// OUTPUT //
[{ id: 1,  name: "Iron Man",   fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 3,  name: "Spider-Man", fullName: "Peter Parker",   publisher: "Marvel Comics" },
{ id: 6,  name: "Thanos",     fullName: "Tony Stark",     publisher: "Marvel Comics" },
{ id: 7,  name: "Thor",       fullName: "Thor Odinson",   publisher: "Marvel Comics" },
{ id: 8,  name: "Hulk",       fullName: "Bruce Banner",   publisher: "Marvel Comics" },
{ id: 10, name: "Wolverine",  fullName: "Logan",          publisher: "Marvel Comics" }]

reduce( )

Esta función es interesante para convertir el array en un solo valor resultante. Por ejemplo si tienes un array con muchos números y quieres saber la suma de todos ellos.

Cuando se llama el callback de esta función, se envía el elemento del index correspondiente, pero también se manda el return del callback anterior. Es decir, que en cada iteración se crea un valor nuevo que es retornado a la siguiente iteración. Veamos un ejemplo:

const numbers = [10, 7, 5];
// Sum of all array elements
const sum = numbers.reduce(
(accumulator, currentValue) => {
  console.log('accumulator:', accumulator)
  return accumulator + currentValue;
},
0
)
console.log('sum:', sum);

// OUTPUT //
accumulator: 0
accumulator: 10
accumulator: 17
22

Recuerda que cuando utilices esta función es importante retornar un valor en cada iteración, si no lo haces la función fallará. Algo más, el cero que está como segundo argumento de la función es un cero ( 0 ), pero si no enviar un valor la función entenderá que el primer elemento será el primer argumento.

reduceRight( )

Este método hace exactamente que el anterior, reduceRight( ) es lo mismo que un reduce( ) pero que comienza por la derecha. Significa que el primer elemento enviado al callback es el último y el index es el penúltimo.

No hay mucho más que decir respecto a esta función, puedes usar el mismo ejemplo para experimentar esta función tu mismo. Vamos con la siguiente.

reverse( )

Esta función es muy sencilla de usar, su uso es muy específico, pero debo confesar que más de en una ocasión me ha solucionado uno que otro problema. Hace exactamente lo que su nombre dice, gira el array de manera que el último se convertirá en el primero y así sucesivamente. Veamos un ejemplo:

var arr = [1,2,3,4,5,6,7,8,9,10]; 
arr.reverse(); 
console.log(arr); //Output : [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

every( )

Esta función puede resultar muy útil a la hora de hacer validaciones. Imagina que tienes un array con muchos números y tienes que asegurarte de que todas cumplan una condición. No necesitas hacer una función adicional, puedes usar la función every( ).

Esta función tiene que recibir como return un true o un false. Al terminar de revisar todos los elementos y si todos devuelven true entonces la función de vuelve true, en caso de que un item devuelva false, toda la función devolverá false.

Puedes imaginarlo como un if ( condicion ){ } gigante en el que se le aplica la condición a todos los valores del array y todos van separados por un AND. Es decir que todos tienes que ser true para que se devuelta un true. Veamos un ejemplo:

const numbers1 = [10, 0, -5, 8, 9];
// Check if every number in array is positive
console.log(numbers1.every((e) => e > 0))
// false
const numbers2 = [35, 50, 52, 48, 39];
// Check if every number in array is greater than 30
console.log(numbers2.every((e) => e > 30))
// true

some( )

Con este método puedes revisar si al menos uno de los elementos del array cumple la condición. Si un de estos elementos cumple la condición la función de volverá un true. Solo devolverá false si ninguno de los elementos cumple la condición planteada.

const numbers1 = [10, 0, -5, 8, 9];
// Check if some numbers in the array are negative
console.log(numbers1.some((e) => e < 0))
// true
const numbers2 = [35, 50, 52, 48, 39];
// Check if some numbers in the array are greater than 100
console.log(numbers2.some((e) => e > 100))
// false

includes( )

Esta función revisa el array completo y busca un valor específico. En caso de encontrarlo va a devolver un true, en caso de no encontrar nada devolverá un false.

Hay que tener en cuenta que esta función trabaja de forma sensible, es decir que identifica entre mayúsculas y minúsculas, entre letras acentuadas y no acentuadas, tienes que tenerlo en cuenta cuando la utilices.

const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.includes("Mango"));
// true
console.log(fruits.includes("Jackfruit"));
// false

concat( )

Esta función sirve para fusionar diferentes arrays, basta con enviar un array adicional a como argumento al array en el que estás usando la función. Puedes enviar varios array y se unirán todos, en el orden en que los coloques dentro de la función separados por comas ( , ).

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
console.log(num1.concat(num2, num3));
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(num1.concat(num3));
// [1, 2, 3, 7, 8, 9]

sort( )

El método sort( ) ordena los elementos de la matriz. Por defecto, ordena los elementos alfabéticamente. Si quieres ordenar numéricamente los elementos podemos hacerlo con la ayuda de la función de comparación en el que el callback recibe los valores a compara.

const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.sort());
// [ 'Apple', 'Banana', 'Mango', 'Orange', 'Peach' ]
const numbers = [100, 1, 40, 5, 25, 10];
console.log(numbers.sort());
// [1, 10, 100, 25, 40, 5]
console.log(numbers.sort((a, b) => { return a - b }));
// [ 1, 5, 10, 25, 40, 100 ]
  • El primer ejemplo es bastante sencillo. La variedad de frutas se ordenó alfabéticamente…
  • En el segundo ejemplo, [1, 10, 100, 25, 40, 5] se imprimió. Eso es raro. Ocurrió porque la matriz se ordenó alfabéticamente y no numéricamente. Por ejemplo: «25» es más grande que «100», porque «2» es más grande que «1».
  • En el tercer ejemplo, corregimos el ejemplo anterior con la ayuda de la función de comparación

slice( )

Esta función devuelve los elementos que quieras y crea un nuevo array con ellos. Para usarlo solo tienes que llamar la función y enviarle como parámetros los indexs de los elementos que quieras agregar al nuevo array. Veamos un ejemplo:

const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.slice(2, 4));
// [ 'Apple', 'Mango' ]
console.log(fruits.slice(3));
// ['Mango', 'Orange']

splice( )

El método splice() añade/elimina elementos a/desde un array, y devuelve los elementos eliminados. Es un método muy útil para modificar los elementos del array, básicamente enviar los indexs de los valores que quieres cambiar y sus nuevos valores. No tiene la mejor estructura, pero se entiende su funcionamiento.

const fruits1 = ["Banana", "Peach", "Apple", "Mango", "Orange"];
// At position 2, add the new elements, and remove 1 item
fruits1.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits1)
// [ 'Banana', 'Peach', 'Lemon', 'Kiwi', 'Mango', 'Orange' ]
// At position 1, remove 2 elements
const fruits2 = ["Banana", "Peach", "Apple", "Mango", "Orange"];
fruits2.splice(1, 2);
console.log(fruits2)
// [ 'Banana', 'Mango', 'Orange' ]

Borrar elementos

pop( )

Esta función cumple una tarea específica, borrar el último elemento del array. No nos vamos a complicar mucho con esta función porque no hay mucho más que decir, simplemente borra el último elemento.

shift( )

Esta función es muy similar a la anterior, solo que hace todo lo contrario, elimina el primer elemento del array. Al igual que pop( ) no necesita ningún parámetro, simplemente borra el primer elemento del array sin importar que valor tenga.

Añadir elementos

push( )

La función de este método es sencilla, agrega un elemento a un array, tienes que tener en cuenta que el nuevo elemento se agregará al final de la lista de array. Es decir, el nuevo valor será el último del array.

unshift( )

Este método también agrega un valor al array, pero al contrario que push( ) no lo agrega al final, sino que lo agrega al principio. Conocer estos elementos es importante, también me han servido en muchas ocaciones.

Cuando eliminas o creas elementos debes tener cuidado en agregar un elemento del mismo tipo que los demás del array. En Javascript no es importante, es decir que si agregas otro tipo de datos no te dará un error, pero si tendrás problemas a futuro por consistencia de datos.

Esto es todo por el momento, si hay alguna función que se me olvido mencionar, puedes dejarlo en los comentario y con gusto actualizaré el post para agregar la que menciones.

Espero que les haya gustado, pero especialmente espero que les haya servido este artículo. Javascript es el lenguaje de programación al que más amor le tengo, con él conseguí mi primer trabajo. Espero que también ustedes aprovechen el conocimiento. Hasta pronto.