Estructura - SuperHispano

Arrays en JavaScript

                                   

En este artículo, nos enfocaremos en el tema de los Arrays en JavaScript, explorando su definición, características y cómo trabajar con ellos de manera efectiva.

El objetivo de este artículo es proporcionar a los desarrolladores web, tanto principiantes como experimentados, una guía detallada para dominar el uso de Arrays en JavaScript.

A través de ejemplos prácticos y explicaciones claras, aprenderás cómo crear, manipular, recorrer e implementar distintas técnicas y métodos para trabajar con Arrays.

Tabla de contenidos

¿Qué es un Array en JavaScript?

Un Array en JavaScript es un objeto que permite almacenar múltiples valores en una única variable. Los Arrays son fundamentales en la programación, ya que permiten organizar y gestionar datos de manera estructurada y eficiente. En JavaScript, un Array es un objeto especial, que hereda las propiedades y métodos del prototipo Array.

Veamos algunas de las características de los Arrays en JavaScript:

• Los Arrays pueden contener cualquier tipo de dato, como números, strings, objetos e incluso otros Arrays.
• Los elementos de un Array están indexados por números enteros, comenzando por 0 para el primer elemento, 1 para el segundo, y así sucesivamente.
• Los Arrays en JavaScript son dinámicos, lo que significa que pueden cambiar de tamaño en tiempo de ejecución. Puedes agregar o eliminar elementos fácilmente, y el tamaño del Array se ajustará automáticamente.
• Los Arrays en JavaScript no tienen un tamaño fijo, lo que los hace flexibles y adaptables a diferentes situaciones.
• Puedes acceder a la longitud de un Array utilizando la propiedad length. Esta propiedad te permite conocer el número de elementos que contiene el Array.

Creación y manipulación de Arrays en JavaScript

A continuación, veremos cómo declarar, acceder, modificar y manipular Arrays en JavaScript de manera detallada y con ejemplos claros.

Declaración de Arrays

Existen varias formas de declarar un Array en JavaScript:

• Usando corchetes [] (la forma más común):

						let miArray = []; // Array vacío
						let numeros = [1, 2, 3, 4, 5]; // Array de números
						let mixto = [1, "hola", true, {nombre: "Juan"}]; // Array con diferentes tipos de datos
						
						Lenguaje del código: JavaScript (javascript)

• Usando el constructor Array():

						let miArray = new Array(); // Array vacío
						let numeros = new Array(1, 2, 3, 4, 5); // Array de números
						
						Lenguaje del código: JavaScript (javascript)

Acceso a elementos de un Array en JavaScript

Para acceder a un elemento específico de un Array, utiliza su índice entre corchetes []:

						let frutas = ["manzana", "plátano", "cereza"];
						console.log(frutas[0]); // "manzana"
						console.log(frutas[1]); // "plátano"
						console.log(frutas[2]); // "cereza"
						
						Lenguaje del código: JavaScript (javascript)

Modificación de elementos de un Array

Para modificar el valor de un elemento en un Array, asigna un nuevo valor utilizando su índice:

						let frutas = ["manzana", "plátano", "cereza"];
						frutas[1] = "naranja"; // Cambia "plátano" por "naranja"
						console.log(frutas); // ["manzana", "naranja", "cereza"]
						
						Lenguaje del código: JavaScript (javascript)

Agregar y eliminar elementos en un Array en JavaScript

Métodos push() y pop()

push() agrega un elemento al final del Array y devuelve la nueva longitud del Array:

						let frutas = ["manzana", "plátano", "cereza"];
						frutas.push("naranja");
						console.log(frutas); // ["manzana", "plátano", "cereza", "naranja"]
						
						Lenguaje del código: JavaScript (javascript)

pop() elimina el último elemento del Array y devuelve el elemento eliminado:

						let frutas = ["manzana", "plátano", "cereza"];
						let frutaEliminada = frutas.pop();
						console.log(frutas); // ["manzana", "plátano"]
						console.log(frutaEliminada); // "cereza"
						
						Lenguaje del código: JavaScript (javascript)

Métodos unshift() y shift()

unshift() agrega un elemento al principio del Array y devuelve la nueva longitud del Array:

						let frutas = ["manzana", "plátano", "cereza"];
						frutas.unshift("naranja");
						console.log(frutas); // ["naranja", "manzana", "plátano", "cereza"]
						
						Lenguaje del código: JavaScript (javascript)

shift() elimina el primer elemento del Array y devuelve el elemento eliminado:

						let frutas = ["manzana", "plátano", "cereza"];
						let frutaEliminada = frutas.shift();
						console.log(frutas); // ["plátano", "cereza"]
						console.log(frutaEliminada); // "manzana"
						
						Lenguaje del código: JavaScript (javascript)

Copiar y clonar Arrays en JavaScript

Es importante tener en cuenta que al asignar un Array a otra variable, se crea una referencia al mismo objeto, no se crea una copia.

Para evitar esto y crear una copia independiente del Array original, podemos utilizar el método slice() o el operador de propagación (spread operator) ....

Método slice()

El método slice() devuelve una copia de una parte del Array, sin modificar el Array original. Sin argumentos, devuelve una copia completa del Array:

						let frutas = ["manzana", "plátano", "cereza"];
						let copiaFrutas = frutas.slice();
						console.log(copiaFrutas); // ["manzana", "plátano", "cereza"]
						
						copiaFrutas[0] = "naranja";
						console.log(frutas); // ["manzana", "plátano", "cereza"] (el Array original no cambia)
						
						Lenguaje del código: JavaScript (javascript)

Spread operator ...

El operador de propagación ... permite expandir los elementos de un Array en otro Array o en una función. Podemos usarlo para clonar Arrays:

						let frutas = ["manzana", "plátano", "cereza"];
						let copiaFrutas = [...frutas];
						console.log(copiaFrutas); // ["manzana", "plátano", "cereza"]
						
						copiaFrutas[0] = "naranja";
						console.log(frutas); // ["manzana", "plátano", "cereza"] (el Array original no cambia)
						
						Lenguaje del código: JavaScript (javascript)

Iteración y recorrido de Arrays en JavaScript

A menudo, necesitamos recorrer todos los elementos de un Array y realizar una acción específica para cada uno de ellos. Existen diferentes formas de iterar sobre Arrays en JavaScript, cada una con sus propias ventajas y desventajas.

Bucle for tradicional

El bucle for es una forma común y familiar de iterar sobre los elementos de un Array. Utiliza un contador para acceder a cada elemento mediante su índice:

						let frutas = ["manzana", "plátano", "cereza"];
						
						for (let i = 0; i < frutas.length; i++) {
						  console.log(frutas[i]); // Imprime cada fruta en la consola
						}
						
						Lenguaje del código: JavaScript (javascript)

Método forEach()

El método forEach() es específico para Arrays y ejecuta una función proporcionada para cada elemento del Array:

						let frutas = ["manzana", "plátano", "cereza"];
						
						frutas.forEach(function (fruta, index, array) {
						  console.log(fruta); // Imprime cada fruta en la consola
						});
						
						Lenguaje del código: JavaScript (javascript)

También puedes utilizar funciones de flecha (arrow functions) para una sintaxis más concisa:

						let frutas = ["manzana", "plátano", "cereza"];
						
						frutas.forEach(fruta => console.log(fruta)); // Imprime cada fruta en la consola
						
						Lenguaje del código: JavaScript (javascript)

Bucle for...of

El bucle for...of es una característica de ES6 que permite iterar sobre los elementos de un Array sin tener que lidiar con índices o la propiedad length:

						let frutas = ["manzana", "plátano", "cereza"];
						
						for (let fruta of frutas) {
						  console.log(fruta); // Imprime cada fruta en la consola
						}
						
						Lenguaje del código: JavaScript (javascript)

Bucle for...in (y por qué evitarlo con Arrays)

El bucle for...in está diseñado para iterar sobre propiedades enumerables de objetos, no específicamente para Arrays.

Aunque técnicamente es posible usarlo con Arrays, no es recomendable, ya que puede generar resultados inesperados si el objeto Array tiene propiedades adicionales:

						let frutas = ["manzana", "plátano", "cereza"];
						
						for (let index in frutas) {
						  console.log(frutas[index]); // Podría dar resultados inesperados
						}
						
						Lenguaje del código: JavaScript (javascript)

En general, se recomienda evitar el bucle for...in al trabajar con Arrays y, en su lugar, utilizar bucles for tradicionales, el método forEach() o bucles for...of.

Métodos útiles para trabajar con Arrays en JavaScript

En esta sección, exploraremos algunos métodos útiles que nos permiten manipular y trabajar con Arrays de manera más eficiente y sencilla. Cada método será explicado con un ejemplo detallado.

Método map(): transformación de elementos

El método map() crea un nuevo Array con los resultados de aplicar una función a cada uno de los elementos del Array original. Es útil cuando queremos aplicar una transformación a todos los elementos de un Array.

Ejemplo:

						const numeros = [1, 2, 3, 4, 5];
						const cuadrados = numeros.map(numero => numero * numero);
						
						console.log(cuadrados); // [1, 4, 9, 16, 25]
						
						Lenguaje del código: JavaScript (javascript)

Método filter(): filtrado de elementos

El método filter() crea un nuevo Array con todos los elementos del Array original que cumplan una condición especificada por una función. Es útil cuando queremos obtener un subconjunto de elementos que cumplan ciertos criterios.

Ejemplo:

						const edades = [12, 23, 17, 30, 45, 10];
						const mayoresDeEdad = edades.filter(edad => edad >= 18);
						
						console.log(mayoresDeEdad); // [23, 30, 45]
						
						Lenguaje del código: JavaScript (javascript)

Método reduce(): acumulación de valores

El método reduce() aplica una función acumuladora a todos los elementos del Array, de izquierda a derecha, para reducir su contenido a un único valor.

Es útil cuando queremos obtener un resultado a partir de la acumulación de los valores del Array.

Ejemplo:

						const numeros = [1, 2, 3, 4, 5];
						const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual, 0);
						
						console.log(suma); // 15
						
						Lenguaje del código: JavaScript (javascript)

Método sort(): ordenamiento de elementos

El método sort() ordena los elementos de un Array según una función de comparación que podemos definir.

Si no se proporciona una función de comparación, los elementos se ordenan convirtiendo sus valores a strings y comparando sus secuencias de caracteres UTF-16.

Ejemplo:

						const numeros = [5, 3, 8, 1, 12, 9];
						numeros.sort((a, b) => a - b);
						
						console.log(numeros); // [1, 3, 5, 8, 9, 12]
						
						Lenguaje del código: JavaScript (javascript)

Método reverse(): inversión de elementos

El método reverse() invierte el orden de los elementos en un Array. Es útil cuando queremos invertir la secuencia de elementos.

Ejemplo:

						const letras = ['a', 'b', 'c', 'd', 'e'];
						letras.reverse();
						
						console.log(letras); // ['e', 'd', 'c', 'b', 'a']
						
						Lenguaje del código: JavaScript (javascript)

Método join(): concatenación de elementos en un string

El método join() une todos los elementos de un Array en un único string, utilizando un separador opcional. Es útil cuando queremos convertir un Array en una cadena de texto.

Ejemplo:

						const palabras = ['Hola', 'mundo', 'JavaScript'];
						const frase = palabras.join(' ');
						
						console.log(frase); // 'Hola mundo JavaScript'
						
						Lenguaje del código: JavaScript (javascript)

Método split(): creación de Arrays a partir de un string

El método split() divide un string en un Array de subcadenas, utilizando un separador especificado. Es útil cuando queremos convertir una cadena de texto en un Array.

Ejemplo:

						const frase = 'Bienvenido al mundo de JavaScript';
						const palabras = frase.split(' ');
						
						console.log(palabras); // ['Bienvenido', 'al', 'mundo', 'de', 'JavaScript']
						
						Lenguaje del código: JavaScript (javascript)

Método indexOf() y lastIndexOf(): búsqueda de elementos

Los métodos indexOf() y lastIndexOf() devuelven el índice del primer y último elemento que coincida con el valor especificado, respectivamente.

Si no se encuentra el valor, ambos métodos devuelven -1. Son útiles cuando queremos encontrar la posición de un elemento en un Array.

Ejemplo:

						const frutas = ['manzana', 'pera', 'naranja', 'uva', 'pera', 'kiwi'];
						const indicePera = frutas.indexOf('pera');
						const ultimoIndicePera = frutas.lastIndexOf('pera');
						
						console.log(indicePera); // 1
						console.log(ultimoIndicePera); // 4
						
						Lenguaje del código: JavaScript (javascript)

Método find() y findIndex(): búsqueda de elementos con condiciones

El método find() devuelve el primer elemento que cumpla una condición especificada por una función. Si no se encuentra ningún elemento que cumpla la condición, devuelve undefined.

Por otro lado, el método findIndex() devuelve el índice del primer elemento que cumpla la condición, o -1 si no se encuentra ningún elemento.

Ejemplo:

						const personas = [
						  { nombre: 'Ana', edad: 25 },
						  { nombre: 'Carlos', edad: 30 },
						  { nombre: 'Beatriz', edad: 28 },
						  { nombre: 'David', edad: 22 }
						];
						
						const personaMayorDe25 = personas.find(persona => persona.edad > 25);
						const indicePersonaMayorDe25 = personas.findIndex(persona => persona.edad > 25);
						
						console.log(personaMayorDe25); // { nombre: 'Carlos', edad: 30 }
						console.log(indicePersonaMayorDe25); // 1
						
						Lenguaje del código: JavaScript (javascript)

Con estos métodos y ejemplos, tendrás una buena base para trabajar con Arrays en JavaScript de manera más eficiente y sencilla. No dudes en practicar y experimentar con estos métodos para familiarizarte con ellos y aplicarlos en tus proyectos.

Arrays y el paradigma de programación funcional

La programación funcional es un paradigma que se basa en el uso de funciones puras y la inmutabilidad de los datos. JavaScript permite aplicar técnicas de programación funcional, y los Arrays son una excelente herramienta para esto.

A continuación, se presentan varios métodos útiles para trabajar con Arrays en un estilo funcional, junto con ejemplos bien documentados.

Método concat(): combinación de Arrays

El método concat() combina dos o más Arrays en uno nuevo, sin modificar los Arrays originales.

						const array1 = [1, 2, 3];
						const array2 = [4, 5, 6];
						const array3 = array1.concat(array2);
						
						console.log(array3); // [1, 2, 3, 4, 5, 6]
						
						Lenguaje del código: JavaScript (javascript)

Método every() y some(): validación de condiciones en Arrays

El método every() verifica si todos los elementos del Array cumplen con una condición específica, mientras que some() verifica si al menos un elemento cumple con la condición.

Ambos métodos reciben una función de callback que define la condición.

						const numbers = [2, 4, 6, 8, 10];
						
						const isEven = number => number % 2 === 0;
						
						const allEven = numbers.every(isEven);
						console.log(allEven); // true
						
						const someEven = numbers.some(isEven);
						console.log(someEven); // true
						
						Lenguaje del código: JavaScript (javascript)

Método flat() y flatMap(): manejo de Arrays anidados

El método flat() se utiliza para “aplanar” Arrays anidados, es decir, convertirlos en un único Array. Puedes especificar la profundidad de anidamiento a aplanar.

						const nestedArray = [1, [2, [3, [4]], 5]];
						
						const flattenedArray = nestedArray.flat(2);
						console.log(flattenedArray); // [1, 2, 3, 4, 5]
						
						Lenguaje del código: JavaScript (javascript)

El método flatMap() es similar a flat(), pero también permite aplicar una función de transformación a cada elemento antes de aplanar el Array.

						const array = [1, 2, 3, 4];
						
						const flatMappedArray = array.flatMap(number => [number, number * 2]);
						console.log(flatMappedArray); // [1, 2, 2, 4, 3, 6, 4, 8]
						
						Lenguaje del código: JavaScript (javascript)

Recuerda que, al trabajar con programación funcional, es importante evitar la modificación directa de los Arrays originales. En su lugar, utiliza métodos que generen nuevos Arrays o que no alteren el estado original de los datos.

Con la práctica y el uso de estas técnicas funcionales, mejorarás tu habilidad para escribir código JavaScript más legible, mantenible y escalable.