Lección 6 · Arrays y objetos

Arrays

Un array es una lista ordenada de valores, guardada en una sola variable. Sirve para el menú completo, no para un solo producto.

const menu = ["Sándwich", "Empanada", "Alfajor", "Gaseosa"];

Cada elemento tiene una posición que se llama índice, y empieza en 0:

console.log(menu[0]);       // Sándwich
console.log(menu[3]);       // Gaseosa
console.log(menu.length);   // 4

El último elemento siempre está en length - 1. Pedir una posición que no existe devuelve undefined, no un error.

const precios = [];
precios.push(350);          // agrega al final
precios.push(200);
console.log(precios);       // [350, 200]

const ultimo = precios.pop();   // saca el último
console.log(ultimo);        // 200

push() agrega al final y pop() saca el último. Con eso alcanza para armar la bandeja: cada producto elegido entra con push.

Recorrer un array

Ya se vio con for: contador de 0 a length - 1. Pero hay una forma más directa, for...of, que entrega cada elemento sin manejar índices:

const menu = ["Sándwich", "Empanada", "Alfajor"];

for (const producto of menu) {
    console.log(producto);
}

Imprime los tres productos, uno por línea, sin un contador que se pueda equivocar. Se usa for...of cuando solo interesa el valor de cada elemento; el for clásico queda para cuando hace falta el índice.

Métodos útiles

Los arrays traen métodos que resuelven lo de todos los días. Los más usados, con el menú de precios:

const precios = [350, 200, 250, 120];

const dobles = precios.map((p) => p * 2);          // [700, 400, 500, 240]
const caros  = precios.filter((p) => p >= 250);    // [350, 250]
const hayCaro = precios.find((p) => p > 300);      // 350
const suma   = precios.reduce((a, b) => a + b, 0);  // 920

Todos reciben una función flecha como argumento: ahí se ve para qué servía la lección anterior. Y ninguno modifica la lista original: devuelven una nueva.

Objetos

Un objeto agrupa datos que describen una misma cosa, cada uno con un nombre (una propiedad). Es lo que le faltaba a un producto: no es solo un nombre, tiene precio y stock.

const producto = {
    nombre: "Sándwich de jamón",
    precio: 450,
    stock: 12
};

console.log(producto.nombre);   // Sándwich de jamón
console.log(producto.precio);   // 450

Se accede a las propiedades con un punto y el nombre. Y lo más útil: un array de objetos para el menú completo:

const menu = [
    { nombre: "Empanada", precio: 350, stock: 20 },
    { nombre: "Alfajor",  precio: 200, stock: 30 },
    { nombre: "Gaseosa",  precio: 250, stock: 15 },
];

for (const producto of menu) {
    console.log(`${producto.nombre}: $${producto.precio}`);
}

Así se guarda el buffet entero: una lista de objetos, uno por producto. Con filter se buscan los que tienen stock; con map se sacan solo los nombres; con reduce se calcula el valor del inventario. Todo lo de la lección se junta acá.

Resumen

• Un array es una lista ordenada; los índices empiezan en 0 y el último está en length - 1.
• push agrega al final y pop saca el último.
• for...of recorre los valores sin manejar índices.
• map, filter, find y reduce trabajan con una función flecha y no modifican la lista original.
• Un objeto agrupa propiedades de una misma cosa; se accede con objeto.propiedad.
• El menú se guarda como un array de objetos.

En la próxima y última lección los datos salen de la consola y llegan a la página: el DOM y los eventos.

Autoevaluación de la lección 6