¿Cómo trabajar con arreglos y objetos en JavaScript?

Los arreglos y objetos son las estructuras de datos más usadas en JavaScript para guardar y organizar información en aplicaciones reales.

Cuando construyes una tienda en línea, un sistema de nómina o un catálogo de productos, necesitas manejar colecciones de datos. Los arreglos y objetos son las herramientas que JavaScript te da para eso.

¿Qué es un arreglo?

Un arreglo (también llamado array) es una lista ordenada de valores guardados en una sola variable. Cada valor tiene una posición numérica llamada índice, y los índices comienzan en 0.

Sintaxis básica:

let nombreArreglo = [valor1, valor2, valor3];

Puedes guardar cualquier tipo de dato: números, textos, booleanos, o incluso otros arreglos.

Ejemplo 1 — Catálogo de productos de Liverpool:

let productos = ["Televisor", "Licuadora", "Cafetera", "Plancha"];

console.log(productos[0]); // Televisor
console.log(productos[2]); // Cafetera
console.log(productos.length); // 4

El índice 0 es siempre el primer elemento. La propiedad .length devuelve el número total de elementos.

Ejemplo 2 — Precios de productos:

let precios = [12500, 3200, 1800, 950];

let precioTV = precios[0];
console.log("Precio del televisor: $" + precioTV.toLocaleString("es-MX")); // $12,500

Métodos esenciales de arreglos

JavaScript incluye métodos integrados para manipular arreglos. Estos son los más usados en proyectos reales.

Ejemplo 3 — Gestión de carrito en Mercado Libre:

let carrito = ["Teclado", "Mouse"];

carrito.push("Monitor");      // Agrega Monitor al final
carrito.unshift("Webcam");    // Agrega Webcam al inicio

console.log(carrito);
// ["Webcam", "Teclado", "Mouse", "Monitor"]

console.log(carrito.length); // 4
console.log(carrito.includes("Mouse")); // true
console.log(carrito.indexOf("Teclado")); // 1

Recorrer un arreglo con for

Para procesar cada elemento de un arreglo, usas un ciclo for. El ciclo itera desde el índice 0 hasta arreglo.length - 1.

Ejemplo 4 — Mostrar precios de productos Bimbo:

let productosBimbo = ["Pan Blanco", "Marinela", "Gansito", "Twinky"];
let preciosBimbo = [28, 45, 18, 22];

for (let i = 0; i < productosBimbo.length; i++) {
  console.log(productosBimbo[i] + ": $" + preciosBimbo[i]);
}

// Pan Blanco: $28
// Marinela: $45
// Gansito: $18
// Twinky: $22

También puedes usar for...of, que es más limpio cuando no necesitas el índice:

for (let producto of productosBimbo) {
  console.log(producto);
}

¿Qué es un objeto?

Un objeto es una colección de pares clave: valor que describe una entidad con múltiples propiedades. A diferencia del arreglo, accedes a los datos por nombre, no por posición.

Sintaxis básica:

let nombreObjeto = {
  clave1: valor1,
  clave2: valor2,
  clave3: valor3
};

Ejemplo 5 — Datos de un empleado de FEMSA:

let empleado = {
  nombre: "Carlos Mendoza",
  puesto: "Analista de Logística",
  salario: 18500,
  activo: true
};

console.log(empleado.nombre);   // Carlos Mendoza
console.log(empleado.salario);  // 18500
console.log(empleado.activo);   // true

Accedes a las propiedades con notación de punto (objeto.propiedad) o con notación de corchetes (objeto["propiedad"]).

console.log(empleado["puesto"]); // Analista de Logística

La notación de corchetes es útil cuando el nombre de la clave está guardado en una variable.

Modificar y agregar propiedades a un objeto

Puedes cambiar el valor de una propiedad o agregar nuevas propiedades en cualquier momento.

Ejemplo 6 — Actualizar datos del empleado:

let empleado = {
  nombre: "Carlos Mendoza",
  salario: 18500
};

// Modificar propiedad existente
empleado.salario = 21000;

// Agregar nueva propiedad
empleado.departamento = "Logística";

console.log(empleado.salario);      // 21000
console.log(empleado.departamento); // Logística

Arreglo de objetos: la combinación más usada

En aplicaciones reales, casi siempre trabajas con arreglos de objetos. Cada elemento del arreglo es un objeto con múltiples propiedades.

Ejemplo 7 — Catálogo de productos con precio e IVA:

let catalogo = [
  { nombre: "Televisor 55\"", precio: 12500, categoria: "Electrónica" },
  { nombre: "Licuadora", precio: 3200, categoria: "Hogar" },
  { nombre: "Cafetera", precio: 1800, categoria: "Hogar" }
];

for (let producto of catalogo) {
  let precioConIVA = producto.precio * 1.16;
  console.log(producto.nombre + " — Precio con IVA: $" + precioConIVA.toLocaleString("es-MX"));
}

// Televisor 55" — Precio con IVA: $14,500
// Licuadora — Precio con IVA: $3,712
// Cafetera — Precio con IVA: $2,088

Ejemplo 8 — Nómina de empleados de FEMSA:

let nomina = [
  { nombre: "Ana Torres", puesto: "Vendedora", salario: 14000 },
  { nombre: "Luis Ríos", puesto: "Supervisor", salario: 22000 },
  { nombre: "Karla Vega", puesto: "Gerente", salario: 35000 }
];

let totalNomina = 0;

for (let empleado of nomina) {
  totalNomina += empleado.salario;
  console.log(empleado.nombre + " — $" + empleado.salario.toLocaleString("es-MX"));
}

console.log("Total nómina: $" + totalNomina.toLocaleString("es-MX"));

// Ana Torres — $14,000
// Luis Ríos — $22,000
// Karla Vega — $35,000
// Total nómina: $71,000

Errores comunes

1. Confundir el índice inicial

El primer elemento de un arreglo está en el índice 0, no en 1.

let frutas = ["Mango", "Papaya", "Guayaba"];
console.log(frutas[1]); // Papaya, NO Mango
console.log(frutas[0]); // Mango ✓

2. Escribir mal el nombre de una propiedad

JavaScript distingue mayúsculas y minúsculas en los nombres de propiedades. Si escribes empleado.Nombre en lugar de empleado.nombre, obtienes undefined.

let empleado = { nombre: "Ana" };
console.log(empleado.Nombre); // undefined ✗
console.log(empleado.nombre); // Ana ✓

3. Olvidar la coma entre propiedades de un objeto

En la definición de un objeto, cada par clave-valor debe estar separado por coma. Omitirla causa un error de sintaxis.

// ✗ Error de sintaxis
let producto = {
  nombre: "Gansito"
  precio: 18
};

// ✓ Correcto
let producto = {
  nombre: "Gansito",
  precio: 18
};

4. Modificar un arreglo sin usar sus métodos

Si asignas directamente un índice fuera del rango, JavaScript no lanza un error, pero crea espacios vacíos (undefined) en el arreglo.

let lista = ["A", "B"];
lista[5] = "C"; // Crea 3 posiciones undefined en medio
console.log(lista.length); // 6, no 3
// Usa .push() para agregar al final de forma segura

Resumen de estructuras

Puntos clave

• Los arreglos guardan listas ordenadas; los objetos guardan entidades con propiedades nombradas.
• Accede a elementos de un arreglo con su índice (arreglo[0]) y a propiedades de un objeto con notación de punto (objeto.propiedad).
• Usa .push() para agregar elementos al final de un arreglo y objeto.nuevaPropiedad = valor para extender un objeto.
• La combinación de arreglos de objetos es la base de catálogos, nóminas y cualquier lista de entidades en aplicaciones reales.
• El índice de los arreglos empieza en 0, no en 1; confundir esto produce errores difíciles de detectar.