Array en JavaScript: ¿Qué es y para que sirve? Ejemplos.

Un array en JavaScript es una de las estructuras más importantes para trabajar con datos. Pero, ¿qué es exactamente un array, para qué sirve y cómo funciona en tus proyectos? En este artículo, aprenderás cómo declarar arrays, su significado en el código y explorarás ejemplos prácticos que te ayudarán a dominar su uso de manera sencilla y eficiente. ¡Descubre cómo organizar y manipular información de forma profesional!

1. ¿Qué es un array en JavaScript?

Un array o arreglo es una estructura de datos que permite almacenar y gestionar una colección de valores o elementos bajo un mismo nombre. A diferencia de variables JavaScript comunes que solo pueden almacenar un valor, un array puede contener múltiples valores en una sola estructura, organizados en un orden secuencial.

A su vez, estos valores o elementos pueden ser de diferentes tipos de datos (números, cadenas, objetos, funciones, incluso otros arrays). Cada valor dentro de un array se denomina elemento y se accede a su valor mediante un índice numérico, comenzando desde 0.

Imagina un array como una lista de compras, una baraja de cartas o una lista de tareas: todos estos conceptos pueden representarse utilizando arrays.

1.1. Sintaxis de un array en JavaScript

Un array en JavaScript se define mediante una lista de elementos (valores) separados por comas, encerrados dentro de corchetes [].

Aquí te detallo la sintaxis y cómo funciona:

let nombreDelArray = [elemento1, elemento2, elemento3, ...];Lenguaje del código: JavaScript (javascript)

1. let/const/var:
   • La palabra clave para declarar la variable que contendrá el array.
   • Generalmente se usa let o const:
     • const: Si no cambiarás la referencia del array.
     • let: Si planeas modificar el array.
2. nombreDelArray:
   • Es el nombre de la variable que representará el array.
     • Recuerda….no hay una regla estricta para nombrar estas variables, pero existen buenas prácticas; como usar un nomre descriptivo, en plural y lo más común es usar la nomenclatura camelCase.
3. []:
   • Corchetes que encierran los elementos del array.
4. elemento1, elemento2, ...:
   • Los valores individuales del array, separados por comas.

Ejemplo básico:

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

• En este ejemplo usamos let como variable que contendrá el array.
• numeros es el nombre que le asignamos
• [1, 2, 3, 4, 5] es la definición de un array literal que contiene 5 elementos numéricos: 1, 2, 3, 4 y 5. Recuerda que estos elementos o valores pueden ser de diferentes tipos.
• console.log(numeros) imprime el contenido completo del array numeros en la consola del navegador o entorno de desarrollo. El resultado será: [1, 2, 3, 4, 5].

1.2. Principales características de un array en JavaScript:

1. Ordenado y basado en índices:
2. Tamaño dinámico
3. Puede contener cualquier tipo de datos
4. Métodos incorporados
5. Longitud automática
6. Huecos en un array
7. Referencia y no valor
8. Soporte para iteración
9. Son objetos especiales
10. Acceso a elementos fuera de rango
11. Soporte para desestructuración
12. Métodos funcionales
13. Compatible con el spread operator (…)
14. Resumen de características:

1. Ordenado y basado en índices:

• Ordenado: Los elementos en un array tienen un orden específico.
• Índices basados en cero: El primer elemento está en el índice 0, el segundo en 1, y así sucesivamente.

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

2. Tamaño dinámico

• Un array en JavaScript puede crecer o disminuir dinámicamente.
• Puedes agregar o eliminar elementos en arrays sin necesidad de definir su tamaño inicial.

let numeros = [1, 2, 3];
numeros.push(4); // Agregar un elemento
console.log(numeros); // [1, 2, 3, 4]Lenguaje del código: JavaScript (javascript)

3. Puede contener cualquier tipo de datos

• Los elementos de un array pueden ser de diferentes tipos: números, cadenas, booleanos, objetos, funciones, o incluso otros arrays.

let mixto = [42, "hola", true, {nombre: "Manuel"}, [1, 2, 3]];Lenguaje del código: JavaScript (javascript)

4. Métodos incorporados

• Los métodos de arrays son útiles para realizar operaciones comunes, como agregar, eliminar, buscar, ordenar y manipular elementos.

let numeros = [3, 1, 2];
numeros.sort(); // Ordena el array
console.log(numeros); // [1, 2, 3]Lenguaje del código: JavaScript (javascript)

5. Longitud automática

• La propiedad length devuelve el número de elementos en un array.
• La longitud se actualiza automáticamente cuando el array cambia.

let numeros = [1, 2, 3];
console.log(numeros.length); // 3
numeros.push(4);
console.log(numeros.length); // 4Lenguaje del código: JavaScript (javascript)

6. Huecos en un array

• Si omites un elemento o eliminas uno sin reorganizar, puedes tener «huecos» en el array.

let arr = [1, , 3];
console.log(arr); // [1, <1 empty item>, 3]Lenguaje del código: JavaScript (javascript)

7. Referencia y no valor

• Los arrays son tipos de datos por referencia. Si copias un array a otra variable, ambas apuntarán al mismo array en memoria.

let original = [1, 2, 3];
let copia = original;
copia.push(4);
console.log(original); // [1, 2, 3, 4]Lenguaje del código: JavaScript (javascript)

8. Soporte para iteración

• Los arrays son iterables y puedes recorrer arreglos usando bucles como for, for...of, o métodos como forEach.

let numeros = [1, 2, 3];
numeros.forEach(num => console.log(num));Lenguaje del código: JavaScript (javascript)

9. Son objetos especiales

• Aunque parecen listas simples, los arrays son en realidad un tipo especial de objeto en JavaScript.
• Tienen propiedades y métodos integrados.

console.log(typeof [1, 2, 3]); // "object"Lenguaje del código: JavaScript (javascript)

10. Acceso a elementos fuera de rango

• Si intentas acceder a un arreglo usando un índice fuera del rango, obtendrás undefined.

let numeros = [1, 2, 3];
console.log(numeros[10]); // undefinedLenguaje del código: JavaScript (javascript)

11. Soporte para desestructuración

• Puedes usar la desestructuración de arreglos para asignar elementos del array a variables rápidamente.

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3Lenguaje del código: JavaScript (javascript)

12. Métodos funcionales

• Los arrays soportan métodos funcionales como map, filter, y reduce para transformar y procesar datos.

let numeros = [1, 2, 3];
let dobles = numeros.map(num => num * 2);
console.log(dobles); // [2, 4, 6]Lenguaje del código: JavaScript (javascript)

13. Compatible con el spread operator (...)

• Puedes usar el operador de propagación para clonar o combinar arrays.

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]Lenguaje del código: JavaScript (javascript)

14. Resumen de características:

Los arrays en JavaScript son:

1. Ordenados.
2. De tamaño dinámico.
3. Pueden contener cualquier tipo de dato.
4. Iterables y con soporte para métodos funcionales.
5. Son objetos especiales con propiedades y métodos incorporados.

1.3. ¿Cómo crear o declarar un array en JavaScript? Paso a paso:

Guiándonos de la sintaxis del punto 1.1. Aquí te lo explico paso a paso como hacer un array en JS:

PASO 1. Declarar la variable:

• Elige un nombre descriptivo: Este nombre será el que utilizarás para referirte al array a lo largo de tu código. Por ejemplo, miArray, listaDeFrutas, numeros.
• Utiliza la palabra clave let o const:
  • let: Si el contenido del array puede cambiar a lo largo del tiempo.
  • const: Si el array no debe modificarse después de su creación.

PASO 2. Asignar los valores:

• Encierra los valores entre corchetes []: Cada valor se separa por una coma.
• Los valores pueden ser de cualquier tipo: Números, cadenas de texto, objetos, booleanos, incluso otros arrays.

Ejemplo:

// Crear un ARRAY DE NÚMEROS
let numeros = [1, 2, 3, 4, 5];

// Crear un ARRAY DE CADENAS DE TEXTO
const frutas = ["manzana", "banana", "pera"];

// Crear un ARRAY MIXTO
let mixto = [10, "hola", true, { nombre: "Juan" }];Lenguaje del código: JavaScript (javascript)

Explicación:

• let numeros = [1, 2, 3, 4, 5];: Creamos un array llamado numeros que contiene los números del 1 al 5.
• const frutas = ["manzana", "banana", "pera"];: Creamos un array llamado frutas que contiene los nombres de tres frutas.
• let mixto = [10, "hola", true, { nombre: "Juan" }];: Creamos un array llamado mixto que contiene un número, una cadena de texto, un valor booleano y un objeto.

En resumen:

Para crear un array en JavaScript, sigue estos pasos:

1. Declarar la variable.
2. Asignar los valores entre corchetes [].
3. Separar los valores con comas.

2. ¿Para que sirven los arrays en javascript?

En la práctica, los arrays en JavaScript son increíblemente versátiles y se utilizan en una gran variedad de escenarios reales.

Aquí tienes algunos casos de uso más comunes:

1. Gestión de listas de datos:
2. Iterar y mostrar datos:
3. Trabajar con APIs:
4. Filtrar y buscar datos:
5. Ordenar información:
6. Manejo de colecciones anidadas:
7. Manejar eventos o historial:
8. Generar gráficas o tablas:
9. Animaciones o efectos en la web:
10. Sistemas de etiquetas o categorías:
11. Resumen:

2.1. Gestión de listas de datos:

Los arrays son ideales para manejar listas de elementos, como:

• Productos en un carrito de compras.
• Usuarios registrados en una aplicación.
• Tareas en una lista de pendientes.

Ejemplo: Carrito de Compras

let carrito = ["Laptop", "Mouse", "Teclado"];
carrito.push("Monitor"); // Agregar un producto
console.log(carrito); // ["Laptop", "Mouse", "Teclado", "Monitor"]Lenguaje del código: JavaScript (javascript)

2.2. Iterar y mostrar datos:

Los arrays son fundamentales para mostrar datos en pantalla, como generar tablas, listas o tarjetas dinámicas.

Ejemplo: Mostrar Nombres en una Página Web

let nombres = ["Ana", "Juan", "Pedro"];
nombres.forEach(nombre => {
    console.log(`Hola, ${nombre}!`);
});Lenguaje del código: JavaScript (javascript)

2.3. Trabajar con APIs:

Cuando consumes una API, muchas veces los datos vienen en formato de arrays. Es común usar arrays para procesar y mostrar resultados.

Ejemplo: Mostrar Resultados de una API

fetch("https://api.example.com/usuarios")
  .then(response => response.json())
  .then(usuarios => {
    usuarios.forEach(usuario => console.log(usuario.nombre));
  });Lenguaje del código: JavaScript (javascript)

2.4. Filtrar y buscar datos:

Los arrays permiten realizar búsquedas o filtros en grandes conjuntos de datos.

Ejemplo: Buscar Un Producto en un Inventario

let inventario = ["Laptop", "Mouse", "Teclado", "Monitor"];
let resultado = inventario.filter(producto => producto.includes("Mouse"));
console.log(resultado); // ["Mouse"]Lenguaje del código: JavaScript (javascript)

2.5. Ordenar información:

Los arrays se usan para organizar datos en un orden específico, como alfabético o numérico.

Ejemplo: Ordenar una Lista de Precios

let precios = [200, 50, 100, 150];
precios.sort((a, b) => a - b); // Orden ascendente
console.log(precios); // [50, 100, 150, 200]Lenguaje del código: JavaScript (javascript)

2.6. Manejo de colecciones anidadas:

Cuando tienes datos más complejos, como un inventario con categorías, puedes usar arrays anidados.

Ejemplo: Categorías de Productos

let categorias = [
  ["Laptops", "Tablets"],
  ["Mouse", "Teclados"],
  ["Monitores", "Impresoras"]
];
console.log(categorias[1][0]); // "Mouse"Lenguaje del código: JavaScript (javascript)

2.7. Manejar eventos o historial:

Arrays se utilizan para guardar eventos, como acciones de usuario o historial de navegación.

Ejemplo: Historial de Navegación

let historial = [];
historial.push("Inicio");
historial.push("Productos");
historial.push("Carrito");
console.log(historial); // ["Inicio", "Productos", "Carrito"]Lenguaje del código: JavaScript (javascript)

2.8. Generar gráficas o tablas:

Datos numéricos para gráficos o reportes suelen almacenarse en arrays.

Ejemplo: Datos para una Gráfica

let ventas = [100, 200, 150, 300];
let total = ventas.reduce((acumulado, venta) => acumulado + venta, 0);
console.log(`Ventas totales: ${total}`); // Ventas totales: 750Lenguaje del código: JavaScript (javascript)

2.9. Animaciones o efectos en la web:

En animaciones, los arrays se usan para manejar secuencias de frames o coordenadas.

Ejemplo: Coordenadas de Animación

let coordenadas = [
  { x: 0, y: 0 },
  { x: 100, y: 50 },
  { x: 200, y: 100 }
];
coordenadas.forEach(coord => {
  console.log(`Mover a: x=${coord.x}, y=${coord.y}`);
});Lenguaje del código: JavaScript (javascript)

2.10. Sistemas de etiquetas o categorías:

En aplicaciones como blogs o tiendas, se usan arrays para manejar etiquetas o categorías.

Ejemplo: Etiquetas en un Blog

let etiquetas = ["JavaScript", "CSS", "HTML"];
console.log(`Artículos con las etiquetas: ${etiquetas.join(", ")}`);Lenguaje del código: JavaScript (javascript)

2.11. Resumen:

Los arrays son esenciales en:

• Almacenamiento de listas dinámicas.
• Procesamiento de datos externos.
• Filtrado, búsqueda y ordenamiento de información.
• Creación de estructuras más complejas.

3. Ejemplo de una array con JavaScript en ejercicio real.

Vamos a tomar como referencia para este ejemplo el punto 1 del apartado anterior (Carrito de compras), y te mostraremos como manejar un array y mostrarlo dinámicamente para lograr dicho fin:

• Se verá un título «Carrito de Compras».
• Una lista con los productos iniciales (Laptop, Mouse, Teclado).
• Un botón para agregar productos, que permite interactuar dinámicamente con la lista.

Lo primero que haremos será crear la estructura HTML, y luego el script con el array y una función JavaScript para su manipulación y lograr el propósito deseado.

HTML:

<div id="carrito-compras">
    <h4>Carrito de Compras</h4>
    <ul id="lista-productos"></ul>
    <button id="agregar-producto">Agregar Producto</button>
</div>Lenguaje del código: HTML, XML (xml)

JavaScript:

// Array inicial del carrito de compras
    let carrito = ["Laptop", "Mouse", "Teclado"];

    // Función para renderizar los productos del carrito en la página
    function renderizarCarrito() {
        const listaProductos = document.getElementById("lista-productos");
        listaProductos.innerHTML = ""; // Limpiar contenido previo

        carrito.forEach((producto, index) => {
            const item = document.createElement("li");
            item.textContent = `${index + 1}. ${producto}`;
            listaProductos.appendChild(item);
        });
    }

    // Función para agregar un producto al carrito (ejemplo estático)
    document.getElementById("agregar-producto").addEventListener("click", () => {
        const nuevoProducto = prompt("Ingresa el nombre del producto:");
        if (nuevoProducto) {
            carrito.push(nuevoProducto);
            renderizarCarrito();
        }
    });

    // Renderizar el carrito inicialmente
    renderizarCarrito();Lenguaje del código: JavaScript (javascript)

Resultado visual:

Explicación de la estructura y del array que usamos en este ejemplo:

1. HTML Básico:
   • Un contenedor <div> con el ID carrito-compras.
   • Una lista <ul> con el ID lista-productos donde se mostrarán los productos del carrito.
   • Un botón que permite agregar productos al carrito.
2. JavaScript:
   • Creamos un array llamado carrito que contiene los productos iniciales (let carrito = ["Laptop", "Mouse", "Teclado"];)
   • La función renderizarCarrito recorre el array y genera dinámicamente elementos <li> para cada producto.
   • Al hacer clic en el botón, se muestra un cuadro de diálogo prompt para ingresar un nuevo producto. El producto se agrega al array y se actualiza la lista en pantalla.
3. Interactividad:
   • Los usuarios pueden agregar productos al carrito interactuando con el botón.

4. Arrays en JavaScript y WordPress.

1. ¿Se usan normalmente array con JavaScript al crear una página web con WordPress?
2. ¿Por qué usar arrays en WordPress?
3. ¿En que casos los arrays son útiles en páginas web creadas con WordPress?:

4.1. ¿Se usan normalmente array con JavaScript al crear una página web con WordPress?

¡Sí! Los arrays en JavaScript se utilizan frecuentemente en páginas web creadas con WordPress, especialmente cuando se requiere agregar interactividad o manejar datos dinámicos en el lado del cliente.

Aunque WordPress es un CMS basado principalmente en PHP, el uso de JavaScript es esencial para mejorar la experiencia del usuario.

4.2. ¿Por qué usar arrays en WordPress?

1. Manejo dinámico de datos:
   • Permiten almacenar y manipular datos directamente en el navegador del usuario sin necesidad de hacer peticiones constantes al servidor.
2. Rendimiento:
   • Reducen la carga del servidor al permitir operaciones locales en el cliente.
3. Interactividad:
   • Facilitan la creación de experiencias más fluidas y dinámicas para el usuario final.

4.3. ¿En que casos los arrays son útiles en páginas web creadas con WordPress?:

1. Carritos de Compras y Tiendas Online
   • En sitios de comercio electrónico como los creados con WooCommerce, los arrays se utilizan para manejar productos seleccionados en el carrito antes de enviarlos al servidor.
   • Ejemplo: Lista de productos seleccionados por el usuario.
2. Galerías de Imágenes o Sliders
   • Las imágenes de una galería o slider pueden almacenarse en un array para recorrerlas dinámicamente y renderizarlas.
   • Ejemplo: Mostrar un slider con imágenes utilizando un array que contiene las URLs de las imágenes.
3. Formularios Dinámicos
   • Arrays se utilizan para almacenar datos ingresados en un formulario antes de enviarlos al servidor.
   • Ejemplo: Almacenar una lista de opciones seleccionadas por el usuario en un formulario.
4. Filtros y Búsquedas Personalizadas
   • Los arrays son útiles para manejar términos seleccionados en filtros dinámicos.
   • Ejemplo: Categorías seleccionadas en una búsqueda avanzada.
5. Listas de Comentarios o Reseñas
   • Al manejar comentarios o reseñas en tiempo real, los arrays pueden usarse para almacenar y renderizar dinámicamente los datos.
   • Ejemplo: Mostrar comentarios en una publicación sin recargar la página.
6. Interactividad con el Usuario
   • Arrays pueden almacenar datos temporales que el usuario maneja durante la sesión.
   • Ejemplo: Crear una lista de favoritos en el sitio que no requiere iniciar sesión.
7. Gestión de Configuraciones de Bloques Personalizados en Gutenberg
   • Cuando desarrollas bloques personalizados con JavaScript, los arrays se usan para manejar datos dinámicos dentro del bloque.
   • Ejemplo: Crear una lista de elementos (como íconos o enlaces) que el usuario pueda agregar y editar en un bloque personalizado.

5. Preguntas frecuentes y resumen sobre arrays en JS.