Tema 12 · Colecciones

Arrays y Métodos Mutadores

Aprende a estructurar listas de datos indexadas en JavaScript: índices en base 0, longitud con length y manipulación con push, pop, shift, unshift y splice.

Objetos Literales y la palabra "this" Métodos Funcionales: map, filter y reduce

¿Qué es un Array (Arreglo)?

Un Array es una lista ordenada de valores donde cada elemento ocupa una posición numérica denominada índice, comenzando siempre en la posición cero (0). 

const tecnologias = ["HTML5", "CSS3", "JavaScript", "PHP"];

console.log(tecnologias[0]);      // "HTML5" (primer elemento)
console.log(tecnologias.length); // 4 (cantidad total de elementos)

Métodos Mutadores Fundamentales

Se denominan métodos mutadores porque modifican directamente el array original en memoria:

Método Efecto en el Array Valor que Retorna
.push(item) Inserta uno o más elementos al final del array. La nueva longitud del array.
.pop() Elimina el último elemento del array. El elemento que fue eliminado.
.unshift(item) Inserta uno o más elementos al inicio del array (desplazando los demás). La nueva longitud del array.
.shift() Elimina el primer elemento del array. El elemento que fue eliminado.
.splice(inicio, cantidad, ...nuevos) Permite borrar, reemplazar o insertar elementos en cualquier posición intermedia. Un array con los elementos borrados.

⚡ Gestión Dinámica de una Pila de Tareas

Prueba a agregar elementos con push y unshift, o remover con pop y shift para ver mutar el array:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Arrays en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-array { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .caja-lista { background: #f1f5f9; border-radius: 6px; padding: 12px; margin: 15px 0; font-family: monospace; }
    .btn-group button { margin-right: 5px; margin-bottom: 5px; padding: 7px 12px; border-radius: 6px; border: 1px solid #94a3b8; background: white; cursor: pointer; font-weight: 600; }
    .btn-group button:hover { background: #0284c7; color: white; border-color: #0284c7; }
  </style>
</head>
<body>

  <div class="card-array">
    <h3 style="margin-top: 0; color: #0f172a;">Cola de Tareas en Memoria</h3>

    <div class="caja-lista">
      <strong>Contenido del Array:</strong><br>
      <span id="visualizador-array"></span>
    </div>

    <div class="btn-group">
      <button onclick="agregarFinal()">+ push("Tarea Final")</button>
      <button onclick="eliminarFinal()">- pop()</button>
      <button onclick="agregarInicio()">+ unshift("Urgente")</button>
      <button onclick="eliminarInicio()">- shift()</button>
    </div>

    <script>
      let tareas = ["Aprender HTML", "Estudiar CSS", "Practicar JS"];

      function actualizarVista() {
        const span = document.getElementById('visualizador-array');
        span.textContent = JSON.stringify(tareas, null, 2);
      }

      function agregarFinal() {
        tareas.push(`Tarea #${tareas.length + 1}`);
        actualizarVista();
      }

      function eliminarFinal() {
        if (tareas.length > 0) tareas.pop();
        actualizarVista();
      }

      function agregarInicio() {
        tareas.unshift(`Urgente #${Math.floor(Math.random() * 90) + 10}`);
        actualizarVista();
      }

      function eliminarInicio() {
        if (tareas.length > 0) tareas.shift();
        actualizarVista();
      }

      actualizarVista();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.