Tutorial JavaScript: Arrays y Métodos

Creación y estructura de arrays en JavaScript

Un array (matriz o arreglo) es una estructura de datos fundamental en JavaScript que permite almacenar múltiples valores en una única variable. Puedes imaginar un array como una lista ordenada de elementos, donde cada elemento tiene una posición numerada (llamada índice).

Creación de arrays

Existen varias formas de crear arrays en JavaScript:

1. Mediante la sintaxis literal de array

La forma más común y recomendada para crear arrays es utilizando corchetes []:

// Array vacío
const emptyArray = [];

// Array con elementos
const fruits = ["apple", "banana", "orange"];

// Array con diferentes tipos de datos
const mixedArray = [42, "hello", true, { name: "John" }, [1, 2, 3]];

2. Mediante el constructor Array()

Aunque menos utilizada, esta sintaxis también permite crear arrays:

// Array vacío
const emptyArray = new Array();

// Array con elementos predefinidos
const colors = new Array("red", "green", "blue");

// Array con longitud predefinida (todos los elementos son undefined)
const numbersArray = new Array(5);

Es importante destacar que el constructor Array() tiene un comportamiento especial: si se pasa un único argumento numérico, crea un array con esa longitud (con elementos vacíos), mientras que si se pasan múltiples argumentos o un único argumento no numérico, estos se convierten en elementos del array.

Estructura y características de los arrays

Los arrays en JavaScript tienen varias características importantes:

1. Índices basados en cero

Los elementos de un array se acceden mediante índices numéricos que comienzan en 0:

const planets = ["Mercury", "Venus", "Earth", "Mars"];
console.log(planets[0]); // "Mercury"
console.log(planets[2]); // "Earth"

Si intentas acceder a un índice que no existe, obtendrás undefined

2. Propiedad length

Todos los arrays tienen una propiedad length que indica el número de elementos que contiene:

const numbers = [10, 20, 30, 40, 50];
console.log(numbers.length); // 5

// *Truco
// El último elemento siempre está en la posición length - 1
const ultimoEstudiante = estudiantes[estudiantes.length - 1]; // "María"

La propiedad length es dinámica y se actualiza automáticamente cuando se modifican los elementos del array. También podemos modificarla directamente:

const letters = ["a", "b", "c"];
letters.length = 5; // Extiende el array con elementos vacíos
console.log(letters); // ["a", "b", "c", empty × 2]

letters.length = 2; // Trunca el array
console.log(letters); // ["a", "b"]

3. Arrays dispersos (sparse arrays)

JavaScript permite crear arrays con "huecos" o posiciones vacías:

const sparseArray = [1, , 3, 4];
console.log(sparseArray); // [1, empty, 3, 4]
console.log(sparseArray.length); // 4

// También se pueden crear asignando a un índice específico
const anotherSparse = [];
anotherSparse[0] = "first";
anotherSparse[3] = "fourth";
console.log(anotherSparse); // ["first", empty × 2, "fourth"]

Estos huecos son diferentes de valores como undefined o null, y algunos métodos de array los tratan de manera especial.

Modificación de arrays

Los arrays en JavaScript son mutables, lo que significa que podemos modificar sus elementos después de crearlos:

1. Modificación de elementos existentes

const scores = [75, 80, 95, 62];
scores[2] = 98; // Modifica el tercer elemento
console.log(scores); // [75, 80, 98, 62]

2. Añadir nuevos elementos

const team = ["Alice", "Bob"];
team[2] = "Charlie"; // Añade un elemento al final
console.log(team); // ["Alice", "Bob", "Charlie"]

team[5] = "Dave"; // Crea un array disperso
console.log(team); // ["Alice", "Bob", "Charlie", empty × 2, "Dave"]

3. Eliminar elementos

Podemos "eliminar" elementos utilizando el operador delete, aunque esto solo vacía la posición sin reajustar el array:

const items = ["pen", "book", "laptop", "phone"];
delete items[1];
console.log(items); // ["pen", empty, "laptop", "phone"]
console.log(items.length); // 4 (la longitud no cambia)

Arrays multidimensionales

JavaScript permite crear arrays de arrays, lo que nos da estructuras multidimensionales:

// Array bidimensional (matriz)
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6 (segundo array, tercer elemento)

// Array tridimensional
const cube = [
  [[1, 2], [3, 4]],
  [[5, 6], [7, 8]]
];

console.log(cube[1][0][1]); // 6

Desestructuración de arrays

La desestructuración es una característica moderna de JavaScript que permite extraer valores de arrays de forma concisa:

const rgb = [255, 100, 50];

// Desestructuración básica
const [red, green, blue] = rgb;
console.log(red);   // 255
console.log(green); // 100
console.log(blue);  // 50

// Omitir elementos
const [first, , third] = [10, 20, 30, 40];
console.log(first); // 10
console.log(third); // 30

// Valores por defecto
const [name = "Guest", age = 25] = ["Alice"];
console.log(name); // "Alice"
console.log(age);  // 25 (valor por defecto)

// Resto de elementos
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

Comprobación de arrays

Para verificar si una variable es un array, usamos el método Array.isArray():

console.log(Array.isArray([]));           // true
console.log(Array.isArray([1, 2, 3]));    // true
console.log(Array.isArray(new Array()));  // true
console.log(Array.isArray("string"));     // false
console.log(Array.isArray({}));           // false
console.log(Array.isArray(null));         // false

Este método es más fiable que usar instanceof porque funciona correctamente incluso entre diferentes contextos (como iframes).

Métodos principales de arrays

JavaScript proporciona muchos métodos incorporados para trabajar con arrays. Veamos los más fundamentales:

Métodos para añadir y eliminar elementos

JavaScript proporciona varios métodos para añadir y eliminar elementos a un array:

Añadir elementos

1. push() - Añade elementos al final

El método push() añade uno o más elementos al final del array y devuelve la nueva longitud:

const technologies = ["HTML", "CSS"];
const newLength = technologies.push("JavaScript", "React");

console.log(technologies); // ["HTML", "CSS", "JavaScript", "React"]
console.log(newLength);    // 4

2. unshift() - Añade elementos al principio

El método unshift() inserta elementos al inicio del array y devuelve la nueva longitud:

const numbers = [3, 4, 5];
const newLength = numbers.unshift(1, 2);

console.log(numbers);   // [1, 2, 3, 4, 5]
console.log(newLength); // 5

Eliminar elementos

1. pop() - Elimina el último elemento

El método pop() elimina el último elemento del array y lo devuelve:

const stack = ["first", "second", "third"];
const removed = stack.pop();

console.log(stack);   // ["first", "second"]
console.log(removed); // "third"

2. shift() - Elimina el primer elemento

El método shift() elimina el primer elemento del array y lo devuelve:

const queue = ["first", "second", "third"];
const removed = queue.shift();

console.log(queue);   // ["second", "third"]
console.log(removed); // "first"

Manipulación en posiciones específicas

1. splice() - Elimina, reemplaza o añade elementos

El método splice() es extremadamente versátil y permite modificar un array eliminando, reemplazando o añadiendo elementos en cualquier posición:

const months = ["Jan", "March", "April", "June"];

// Insertar en el índice 1
months.splice(1, 0, "Feb");
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

// Reemplazar en el índice 4
months.splice(4, 1, "May");
console.log(months); // ["Jan", "Feb", "March", "April", "May"]

// Eliminar 2 elementos a partir del índice 2
const removed = months.splice(2, 2);
console.log(months);  // ["Jan", "Feb", "May"]
console.log(removed); // ["March", "April"]

La sintaxis de splice() es: array.splice(posiciónInicio, cantidadAEliminar, item1, item2, ...)

Métodos para combinar y dividir arrays

1. concat() - Combina arrays

El método concat() crea un nuevo array combinando dos o más arrays:

const firstHalf = [1, 2, 3];
const secondHalf = [4, 5, 6];
const combined = firstHalf.concat(secondHalf);

console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(firstHalf); // [1, 2, 3] - El array original no se modifica

// Podemos concatenar múltiples arrays
const extras = [7, 8];
const all = firstHalf.concat(secondHalf, extras, [9, 10]);
console.log(all); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2. slice() - Extrae una porción del array

El método slice() devuelve una copia superficial de una porción del array sin modificar el original, a diferencia de splice(), slice() no modifica el array original:

const animals = ["ant", "bison", "camel", "duck", "elephant"];

// Desde el índice 2 hasta el final
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]

// Desde el índice 2 hasta el 4 (sin incluir el 4)
console.log(animals.slice(2, 4)); // ["camel", "duck"]

// Desde el penúltimo hasta el final
console.log(animals.slice(-2)); // ["duck", "elephant"]

// Copia completa del array
const animalsCopy = animals.slice();
console.log(animalsCopy); // ["ant", "bison", "camel", "duck", "elephant"]

3. Operador spread (...) - Combina arrays

El operador spread es una forma moderna y concisa de combinar arrays:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

// Podemos insertar elementos adicionales
const withExtras = [...arr1, 'a', 'b', ...arr2];
console.log(withExtras); // [1, 2, 3, "a", "b", 4, 5, 6]

Buscar elementos en arrays

Métodos básicos de búsqueda

const pets = ["dog", "cat", "bird", "cat", "fish"];

// indexOf() - encuentra la primera ocurrencia
console.log(pets.indexOf("cat")); // 1

// lastIndexOf() - encuentra la última ocurrencia
console.log(pets.lastIndexOf("cat")); // 3

// Si el elemento no existe, devuelve -1
console.log(pets.indexOf("turtle")); // -1

// includes() - determina si un array contiene un determinado elemento
const technologies = ["HTML", "CSS", "JavaScript", "React"];
console.log(technologies.includes("JavaScript")); // true
console.log(technologies.includes("Angular"));    // false

Métodos de búsqueda con condiciones

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 }
];

// find() - devuelve el primer elemento que cumple la condición
const user = users.find(user => user.age === 30);
console.log(user); // { id: 2, name: "Bob", age: 30 }

// findIndex() - devuelve el índice del primer elemento que cumple la condición
const index = users.findIndex(user => user.name === "Charlie");
console.log(index); // 2

Recorrer arrays: iterar sobre elementos

Métodos básicos para recorrer

const colors = ["red", "green", "blue"];

// forEach() - ejecuta una función para cada elemento del array
colors.forEach((color, index) => {
  console.log(`Color at position ${index}: ${color}`);
});
// Output:
// Color at position 0: red
// Color at position 1: green
// Color at position 2: blue

// for...of - otra forma moderna de iterar (técnicamente no es un método)
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}
// Output:
// apple
// banana
// cherry

Verificar condiciones en los elementos

const ages = [16, 19, 21, 25];

// some() - verifica si al menos un elemento cumple la condición
const hasAdult = ages.some(age => age >= 18);
console.log(hasAdult); // true

// every() - verifica si todos los elementos cumplen la condición
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

Transformar arrays: crear arrays modificados

Los siguientes métodos son muy poderosos y utilizan funciones como argumentos.

Transformar elementos: map()

El método map() crea un nuevo array con el resultado de llamar a una función para cada elemento:

const numbers = [1, 4, 9, 16];
const squareRoots = numbers.map(num => Math.sqrt(num));
console.log(squareRoots); // [1, 2, 3, 4]

// Transformación de objetos
const products = [
  { id: 1, name: "Laptop", price: 1000 },
  { id: 2, name: "Phone", price: 800 },
  { id: 3, name: "Tablet", price: 500 }
];

const productNames = products.map(product => product.name);
console.log(productNames); // ["Laptop", "Phone", "Tablet"]

Filtrar elementos: filter()

El método filter() crea un nuevo array con los elementos que cumplen una condición:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filtrar números pares
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// Filtrar productos disponibles
const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Phone", price: 800, inStock: true },
  { name: "Tablet", price: 500, inStock: false },
  { name: "Headphones", price: 200, inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts.length); // 3

Reducir a un valor: reduce()

Nota: Este es uno de los métodos más poderosos pero también más complejos.

El método reduce() "reduce" un array a un único valor procesando cada elemento y acumulando un resultado. Funciona mediante una función que se ejecuta para cada elemento, manteniendo un "acumulador" que va recogiendo los resultados.

Sintaxis básica:

array.reduce(function(acumulador, elementoActual, índice, array) {
  // Lógica que actualiza y retorna el acumulador
}, valorInicial);

Donde:

• acumulador: El valor acumulado retornado en la iteración anterior
• elementoActual: El elemento que se está procesando actualmente
• índice (opcional): La posición del elemento actual
• array (opcional): El array completo sobre el que se llamó reduce()
• valorInicial (opcional): El valor con el que empezará el acumulador

Ejemplo paso a paso:

const numbers = [1, 2, 3, 4];

// Suma de números
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 10

Veamos cómo funciona iteración por iteración:

1. Inicio: acumulador = 0 (el valor inicial)
2. Primera iteración: acumulador (0) + current (1) = 1 → nuevo acumulador = 1
3. Segunda iteración: acumulador (1) + current (2) = 3 → nuevo acumulador = 3
4. Tercera iteración: acumulador (3) + current (3) = 6 → nuevo acumulador = 6
5. Cuarta iteración: acumulador (6) + current (4) = 10 → nuevo acumulador = 10
6. Resultado final: 10

Importancia del valor inicial:

// Con valor inicial 0
[1, 2, 3, 4].reduce((acc, val) => acc + val, 0); // 10

// Sin valor inicial (el primer elemento se usa como valor inicial)
[1, 2, 3, 4].reduce((acc, val) => acc + val); // 10

// Con array vacío
[].reduce((acc, val) => acc + val, 0); // 0
[].reduce((acc, val) => acc + val); // Error! (No hay primer elemento)

Ejemplo mas avanzado:

// Aplanar un array de arrays
const arrays = [[1, 2], [3, 4], [5, 6]];
const flattened = arrays.reduce((acc, array) => [...acc, ...array], []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

// Calcular el máximo
const max = [5, 10, 15, 20, 25].reduce((max, num) => 
  num > max ? num : max, -Infinity);
console.log(max); // 25

// Contar ocurrencias
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
  // Si la fruta ya existe en el acumulador, incrementar su contador
  // Si no, crear una nueva entrada con valor 1
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {}); // El acumulador inicial es un objeto vacío

console.log(count); // { apple: 3, banana: 2, orange: 1 }

Ordenar y reorganizar arrays

Los métodos sort() y reverse() permiten cambiar el orden de los elementos en un array.

El método sort()

El método sort() ordena los elementos de un array modificando el array original. Por defecto, convierte los elementos a strings y los compara según sus valores Unicode.

// Ordenación alfabética (comportamiento predeterminado)
const fruits = ["banana", "apple", "orange", "mango"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "mango", "orange"]

¡Precaución con los números!

El comportamiento predeterminado de sort() puede dar resultados inesperados con números:

const numbers = [40, 1, 5, 200];
numbers.sort();
console.log(numbers); // [1, 200, 40, 5] (¡incorrecto numéricamente!)

Esto ocurre porque los números se convierten a strings y "200" viene antes que "40" en orden Unicode.

El método reverse()

El método reverse() invierte el orden de los elementos de un array modificando el array original:

const letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

Otros métodos útiles

Convertir a string: join()

const elements = ["Fire", "Air", "Water"];

console.log(elements.join());      // "Fire,Air,Water"
console.log(elements.join(""));    // "FireAirWater"
console.log(elements.join(" "));   // "Fire Air Water"
console.log(elements.join(" - ")); // "Fire - Air - Water"

Aplanar arrays anidados: flat()

const nestedArray = [1, 2, [3, 4, [5, 6]]];

// Aplanar un nivel
console.log(nestedArray.flat()); // [1, 2, 3, 4, [5, 6]]

// Aplanar dos niveles
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5, 6]

Rellenar con valores: fill()

// Rellenar todo el array
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0)); // [0, 0, 0, 0]

// Crear y rellenar en un paso
const zeros = new Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]

Patrones de uso comunes

Encadenar métodos

Puedes combinar varios métodos para realizar operaciones complejas en una sola línea:

const transactions = [
  { id: 1, type: "debit", amount: 100 },
  { id: 2, type: "credit", amount: 200 },
  { id: 3, type: "debit", amount: 50 },
  { id: 4, type: "credit", amount: 300 }
];

// Obtener la suma total de transacciones de crédito
const totalCredit = transactions
  .filter(t => t.type === "credit")
  .map(t => t.amount)
  .reduce((sum, amount) => sum + amount, 0);

console.log(totalCredit); // 500

Eliminar duplicados

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Usando Set
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4, 5]

Crear arrays con valores específicos

// Crear array con valores específicos
console.log(Array.from({ length: 5 }, (_, i) => i + 1)); // [1, 2, 3, 4, 5]

Técnicas avanzadas y patrones modernos con arrays

Los arrays en JavaScript han evolucionado significativamente con las últimas versiones del lenguaje, permitiendo implementar patrones avanzados y técnicas modernas que mejoran la legibilidad, mantenibilidad y rendimiento del código. Estas técnicas aprovechan tanto las características nativas de JavaScript como los paradigmas de programación funcional para resolver problemas complejos de manera elegante.

Inmutabilidad y operaciones no destructivas

La programación inmutable es un patrón fundamental en el desarrollo moderno de JavaScript, especialmente en frameworks como React o Redux. Consiste en crear nuevas copias de los arrays en lugar de modificar los originales.

1. Operaciones inmutables básicas

// Añadir elementos (inmutable)
const fruits = ["apple", "banana"];
const newFruits = [...fruits, "cherry"];
console.log(newFruits); // ["apple", "banana", "cherry"]
console.log(fruits);    // ["apple", "banana"] - sin cambios

// Eliminar elementos (inmutable)
const numbers = [1, 2, 3, 4, 5];
const withoutThree = numbers.filter(num => num !== 3);
console.log(withoutThree); // [1, 2, 4, 5]
console.log(numbers);      // [1, 2, 3, 4, 5] - sin cambios

// Actualizar elementos (inmutable)
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const updatedUsers = users.map(user => 
  user.id === 2 ? { ...user, name: "Bobby" } : user
);
console.log(updatedUsers[1].name); // "Bobby"
console.log(users[1].name);        // "Bob" - sin cambios

2. Inmutabilidad en operaciones complejas

// Insertar en una posición específica
function insertAt(array, index, item) {
  return [
    ...array.slice(0, index),
    item,
    ...array.slice(index)
  ];
}

const colors = ["red", "green", "blue"];
const newColors = insertAt(colors, 1, "yellow");
console.log(newColors); // ["red", "yellow", "green", "blue"]

// Reemplazar un rango de elementos
function replaceRange(array, start, end, replacement) {
  return [
    ...array.slice(0, start),
    ...replacement,
    ...array.slice(end)
  ];
}

const letters = ["a", "b", "c", "d", "e"];
const newLetters = replaceRange(letters, 1, 3, ["x", "y"]);
console.log(newLetters); // ["a", "x", "y", "d", "e"]

Recomendaciones de uso

• Para principiantes: Domina primero push, pop, forEach, map y filter
• Para modificar arrays: Usa push/pop para el final, unshift/shift para el principio y splice para posiciones específicas
• Para búsquedas simples: Usa indexOf o includes para valores directos y find/findIndex para condiciones
• Para transformaciones: Prefiere map y filter en lugar de bucles tradicionales
• Para preservar datos originales: Usa métodos que devuelven nuevos arrays (map, filter, slice) en lugar de modificar el original

Ejemplo practico simple:

// Crear la lista de tareas
const tareas = [];

// Añadir tareas
tareas.push({ id: 1, texto: "Estudiar JavaScript", completada: false });
tareas.push({ id: 2, texto: "Hacer ejercicio", completada: true });
tareas.push({ id: 3, texto: "Comprar comida", completada: false });

// Filtrar tareas pendientes
const tareasPendientes = tareas.filter(function(tarea) {
  return tarea.completada === false;
});

console.log(`Tienes ${tareasPendientes.length} tareas pendientes`);

// Marcar una tarea como completada
function completarTarea(id) {
  // Encontrar la tarea por ID
  const indice = tareas.findIndex(function(tarea) {
    return tarea.id === id;
  });
  
  if (indice !== -1) {
    tareas[indice].completada = true;
    return true;
  }
  return false;
}

completarTarea(1);
console.log(tareas[0].completada); // true