Que son y cómo usar Arrays en JavaScript

En Javascript, los Array son una estructura de datos que nos permiten trabajar con una colección ordenada de elementos, donde cada elemento tiene una posición numérica (conocida como índice).

Los índices de un array en JavaScript comienzan desde 0, lo que significa que el primer elemento tiene un índice de 0, el segundo un índice de 1, y así sucesivamente.

En JavaScript, los arrays son dinámicos, lo que significa que pueden cambiar de tamaño y contener valores de diferentes tipos.

Creación de Arrays

Para declarar un Array en Javascript, se utiliza la siguiente sintaxis:

let miArray = [valor1, valor2, valor3, ...];

En Javascript, un Array puede contener valores de cualquier tipo de datos (incluyendo otros objetos y funciones).

let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "banana", "cereza"];

Otras formas de crear Arrays

Hay otras formas de crear Arrays (menos usadas que la anterior, pero a veces prácticas)

Usando el constructor de Array

let numeros = new Array(1, 2, 3, 4, 5);
let frutas = new Array("manzana", "banana", "cereza");

Arrays vacíos

let arrayVacio = [];
let otroArrayVacio = new Array();

Arrays con un tamaño específico

let arrayDeTamano = new Array(10); // Crea un array con 10 elementos vacíos

Acceder a los elementos

Para acceder a los elementos de un Array en Javascript, utilizamos el índice numérico correspondiente a cada elemento.

El primer elemento de un Array tiene un índice de 0, el segundo tiene un índice de 1, y así sucesivamente.

Por ejemplo, si deseamos acceder al segundo elemento de un Array llamado miArray, podemos hacerlo de la siguiente manera:

let frutas = ["manzana", "banana", "cereza"];
console.log(frutas[0]); // "manzana"
console.log(frutas[1]); // "banana"
console.log(frutas[2]); // "cereza"

console.log(frutas[10]); // undefined

Modificar los elementos

También podemos modificar el valor de un elemento del Array utilizando su índice numérico:

let numeros = [1, 2, 3, 4, 5];
numeros[2] = 10;
console.log(numeros); // [1, 2, 10, 4, 5]

Uso básico

const frutas = ["manzana", "naranja"];
frutas.push("plátano");
console.log(frutas); // ["manzana", "naranja", "plátano"]

frutas.unshift("pera");
console.log(frutas); // ["pera", "manzana", "naranja", "plátano"]

const frutas = ["manzana", "naranja", "plátano"];
frutas.pop();
console.log(frutas); // ["manzana", "naranja"]

frutas.shift();
console.log(frutas); // ["naranja"]

const numeros = [1, 2, 3, 4, 5];
const subArray = numeros.slice(1, 4);
console.log(subArray); // [2, 3, 4]

const numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 1, 99); // Reemplaza el elemento en el índice 2 por 99
console.log(numeros); // [1, 2, 99, 4, 5]

const frutas = ["manzana", "naranja", "plátano"];
console.log(frutas.indexOf("naranja")); // 1
console.log(frutas.includes("pera")); // false

const miArray = [10, 20, 30];
console.log(miArray.length); // 3

Arrays multidimensionales

Los arrays en JavaScript pueden contener otros arrays como elementos, lo que permite la creación de arrays multidimensionales.

let matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matriz[0][0]); // 1
console.log(matriz[1][2]); // 6

Recorrer un Array

Podemos recorrer los elementos de un Array de distintas formas

let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
    console.log(numeros[i]);
}

let numeros = [1, 2, 3, 4, 5];
for (let numero of numeros) {
    console.log(numero);
}

let numeros = [1, 2, 3, 4, 5];
numeros.forEach(function(numero) {
    console.log(numero);
});

Ejemplos prácticos

const numeros = [10, 20, 30, 40, 50];
const suma = numeros.reduce((acum, num) => acum + num, 0);
const promedio = suma / numeros.length;
console.log(promedio); // 30

const numeros = [1, 2, 3];
const cuadrados = numeros.map((num) => num ** 2);
console.log(cuadrados); // [1, 4, 9]

const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter((num) => num % 2 === 0);
console.log(pares); // [2, 4]

const numeros = [1, 2, 3, 4];
const suma = numeros.reduce((acumulador, actual) => acumulador + actual, 0);
console.log(suma); // 10