Clase 10: Objetos, Arreglos y JSON

Estructuras de datos fundamentales de JavaScript para organizar y transferir información

"Los objetos modelan entidades del mundo real; los arreglos agrupan colecciones; JSON conecta ambos con el exterior."

Introducción Objetos Arreglos JSON Combinando Ejemplos Laboratorio Resumen Quiz

1) Introducción

En las clases anteriores aprendimos a declarar variables, usar funciones y manipular el DOM. Ahora damos un paso más: objetos, arreglos y JSON son las estructuras que permiten organizar colecciones de datos, modelar entidades del mundo real e intercambiar información con servidores y APIs.

Un objeto agrupa propiedades relacionadas bajo un mismo nombre. Un arreglo almacena listas ordenadas de valores. JSON es un formato de texto estándar que combina ambos para enviar y recibir datos entre sistemas.

Idea central: los objetos modelan entidades (un producto, un usuario, una venta); los arreglos contienen colecciones de esas entidades; JSON serializa esas estructuras para transferirlas entre aplicaciones.

2) Objetos

Un objeto en JavaScript es una colección de pares clave: valor. Cada clave se llama propiedad. Los valores pueden ser cualquier tipo de dato: texto, número, booleano, arreglo u otro objeto.

Crear un objeto literal

const producto = {
  nombre: "Laptop",
  precio: 850,
  disponible: true,
  categoria: "Electrónica"
};

Representación visual del objeto

producto
  ├─ nombre      → "Laptop"
  ├─ precio      → 850
  ├─ disponible  → true
  └─ categoria   → "Electrónica"

Acceder a propiedades

Hay dos formas de leer o modificar una propiedad: con notación de punto o con notación de corchetes.

// Notación de punto
console.log(producto.nombre); // "Laptop"
console.log(producto.precio); // 850

// Notación de corchetes
console.log(producto["disponible"]); // true

// Modificar una propiedad
producto.precio = 750;
console.log(producto.precio); // 750

Métodos: funciones dentro de un objeto

Cuando una función se guarda como propiedad de un objeto, se llama método. Dentro del método se puede usar la palabra this para acceder a otras propiedades del mismo objeto.

const producto = {
  nombre: "Laptop",
  precio: 850,
  descripcion: function () {
    return this.nombre + " — $" + this.precio;
  }
};

console.log(producto.descripcion()); // "Laptop — $850"

Qué practica este ejemplo

Usar this dentro de un método para acceder a las propiedades del mismo objeto.
Operación Sintaxis Ejemplo
Leer propiedad objeto.propiedad producto.nombre
Modificar propiedad objeto.propiedad = valor producto.precio = 700
Agregar propiedad objeto.nuevaProp = valor producto.stock = 10
Llamar método objeto.metodo() producto.descripcion()

3) Arreglos

Un arreglo (array) es una lista ordenada de valores. Cada posición tiene un índice que comienza en 0. Los arreglos pueden contener números, textos, objetos u otros arreglos.

Crear un arreglo

const frutas = ["manzana", "pera", "uva", "mango"];

console.log(frutas[0]); // "manzana"
console.log(frutas[2]); // "uva"
console.log(frutas.length); // 4
El índice siempre empieza en 0. El último elemento está en la posición arreglo.length - 1.

Métodos esenciales de arreglos

Método ¿Qué hace? Ejemplo
push() Agrega un elemento al final. frutas.push("kiwi")
pop() Elimina y retorna el último elemento. frutas.pop()
forEach() Recorre cada elemento y ejecuta una función. frutas.forEach(f => console.log(f))
map() Transforma cada elemento y devuelve un nuevo arreglo. precios.map(p => p * 1.13)
filter() Devuelve un nuevo arreglo con los elementos que cumplen una condición. precios.filter(p => p > 100)
find() Devuelve el primer elemento que cumple la condición. frutas.find(f => f === "pera")

Ejemplo: map y filter

const precios = [50, 120, 30, 200, 80];

// Aplicar IVA del 13% a todos
const conIva = precios.map(function (p) {
  return p * 1.13;
});
console.log(conIva); // [56.5, 135.6, 33.9, 226, 90.4]

// Solo los mayores de 100
const caros = precios.filter(function (p) {
  return p > 100;
});
console.log(caros); // [120, 200]

Punto clave

map() y filter() no modifican el arreglo original. Devuelven uno nuevo.

Ejemplo: forEach para mostrar en la página

const nombres = ["Ana", "Luis", "Marta"];

nombres.forEach(function (nombre) {
  const elemento = document.createElement("li");
  elemento.textContent = nombre;
  document.querySelector("#lista").appendChild(elemento);
});

4) JSON

JSON significa JavaScript Object Notation. Es un formato de texto que se usa para almacenar y transferir datos. Su sintaxis se parece a un objeto de JavaScript, pero tiene reglas estrictas: todas las claves deben ir entre comillas dobles y los valores solo pueden ser texto, número, booleano, arreglo, objeto o null.

Ejemplo de texto JSON

{ "nombre": "Laptop", "precio": 850, "disponible": true, "etiquetas": ["electrónica", "cómputo"] }

JSON.stringify: de objeto a texto

JSON.stringify() convierte un objeto o arreglo de JavaScript en una cadena de texto con formato JSON. Se usa para guardar datos o enviarlos a un servidor.

const producto = { nombre: "Laptop", precio: 850 };

const texto = JSON.stringify(producto);
console.log(texto);
// '{"nombre":"Laptop","precio":850}'

// Con formato legible (sangría de 2 espacios)
const textoFormateado = JSON.stringify(producto, null, 2);
console.log(textoFormateado);
// {
// "nombre": "Laptop",
// "precio": 850
// }

JSON.parse: de texto a objeto

JSON.parse() convierte una cadena de texto JSON en un objeto o arreglo de JavaScript. Se usa cuando se reciben datos de un servidor o del almacenamiento local.

const texto = '{"nombre":"Laptop","precio":850}';

const objeto = JSON.parse(texto);
console.log(objeto.nombre); // "Laptop"
console.log(objeto.precio); // 850
Regla práctica: stringify convierte un objeto en texto para salir del programa. parse convierte texto en objeto para entrar al programa.
Función Entrada Salida Uso típico
JSON.stringify() Objeto / Arreglo JS Texto JSON Guardar en localStorage, enviar a API
JSON.parse() Texto JSON Objeto / Arreglo JS Leer de localStorage, procesar respuesta de API

5) Combinando objetos y arreglos

En la práctica, los datos casi siempre son arreglos de objetos: una lista de productos, usuarios o pedidos donde cada elemento es un objeto con sus propias propiedades.

Arreglo de objetos

const inventario = [
  { nombre: "Laptop", precio: 850, stock: 5 },
  { nombre: "Monitor", precio: 320, stock: 12 },
  { nombre: "Teclado", precio: 45, stock: 30 },
  { nombre: "Mouse", precio: 25, stock: 50 }
];

Recorrer con forEach

inventario.forEach(function (producto) {
  console.log(producto.nombre + ": $" + producto.precio);
});
// Laptop: $850
// Monitor: $320
// Teclado: $45
// Mouse: $25

Filtrar productos con precio mayor a 100

const caros = inventario.filter(function (producto) {
  return producto.precio > 100;
});

console.log(caros.length); // 2
console.log(caros[0].nombre); // "Laptop"

Obtener solo los nombres con map

const nombres = inventario.map(function (producto) {
  return producto.nombre;
});

console.log(nombres); // ["Laptop", "Monitor", "Teclado", "Mouse"]

Buscar un producto con find

const resultado = inventario.find(function (producto) {
  return producto.nombre === "Monitor";
});

console.log(resultado.precio); // 320

6) Ejemplos prácticos

Ejemplo 1: guardar y recuperar un objeto con localStorage

const usuario = { nombre: "Ana", rol: "admin" };

// Guardar: convertir a texto JSON
localStorage.setItem("usuario", JSON.stringify(usuario));

// Recuperar: convertir de texto a objeto
const guardado = JSON.parse(localStorage.getItem("usuario"));
console.log(guardado.nombre); // "Ana"

Qué practica este ejemplo

stringify convierte el objeto a texto para poder guardarlo. parse lo recupera como objeto usable.

Ejemplo 2: calcular el total de un carrito

const carrito = [
  { nombre: "Libro", precio: 15, cantidad: 2 },
  { nombre: "Lápiz", precio: 2, cantidad: 10 },
  { nombre: "Mochila", precio: 35, cantidad: 1 }
];

let total = 0;
carrito.forEach(function (item) {
  total = total + (item.precio * item.cantidad);
});

console.log("Total: $" + total); // Total: $85

Qué practica este ejemplo

Recorrer un arreglo de objetos con forEach y acumular un valor calculado con propiedades del objeto.

Ejemplo 3: transformar datos de una API simulada

// Texto JSON recibido de un servidor
const respuesta = '[{"id":1,"nombre":"Ana","activo":true},{"id":2,"nombre":"Luis","activo":false}]';

// Convertir a arreglo de objetos
const usuarios = JSON.parse(respuesta);

// Filtrar solo los activos
const activos = usuarios.filter(function (u) {
  return u.activo === true;
});

console.log(activos[0].nombre); // "Ana"

Qué practica este ejemplo

Simula el flujo real: recibir JSON como texto, parsearlo y procesar los datos con filter.

7) Laboratorio: mini sistema de estudiantes

Construye un pequeño sistema que guarde una lista de estudiantes como arreglo de objetos, permita agregar nuevos registros y filtre por nota aprobatoria.

Paso 1

Declara un arreglo vacío let estudiantes = [];

Paso 2

Crea una función que construya un objeto con nombre y nota, y lo agregue al arreglo con push().

Paso 3

Usa filter() para obtener solo los que tienen nota mayor o igual a 60.

Paso 4

Muestra los resultados en el DOM con textContent o innerHTML.

Solución sugerida

let estudiantes = [];

function agregarEstudiante() {
  const nombre = document.querySelector("#labNombre").value.trim();
  const nota = Number(document.querySelector("#labNota").value);

  if (nombre === "" || nota === 0) {
    document.querySelector("#mensajeLab").textContent = "Completa nombre y nota.";
    return;
  }

  estudiantes.push({ nombre: nombre, nota: nota });
  document.querySelector("#mensajeLab").textContent =
    nombre + " agregado. Total: " + estudiantes.length + " estudiantes.";
}

function mostrarAprobados() {
  const aprobados = estudiantes.filter(function (e) {
    return e.nota >= 60;
  });

  const lista = aprobados.map(function (e) {
    return e.nombre + " (" + e.nota + ")";
  }).join(", ");

  document.querySelector("#mensajeLab").textContent =
    "Aprobados: " + (lista || "ninguno");
}

8) Resumen

Objeto { }

Colección de pares clave–valor. Modela una entidad con propiedades y métodos.

Arreglo [ ]

Lista ordenada de valores. Se accede por índice (comienza en 0).

push / pop

Agregan o eliminan elementos al final de un arreglo.

map / filter

Transforman o seleccionan elementos. Devuelven un nuevo arreglo sin modificar el original.

JSON.stringify

Convierte objeto o arreglo en texto JSON para guardar o enviar datos.

JSON.parse

Convierte texto JSON en objeto o arreglo para usarlo en el programa.

Recuerda: un arreglo de objetos es la estructura más común en desarrollo web. Dominarla permite trabajar con APIs, bases de datos y cualquier fuente de datos real.

9) Cuestionario

Pregunta 1: ¿Qué es un objeto en JavaScript?

Pregunta 2: ¿Cuál es el índice del primer elemento de un arreglo?

Pregunta 3: ¿Qué hace el método push()?

Pregunta 4: ¿Qué devuelve filter()?

Pregunta 5: ¿Para qué sirve JSON.stringify()?

Pregunta 6: ¿Qué diferencia hay entre map() y forEach()?

Pregunta 7: ¿Cómo se accede a la propiedad "precio" del objeto producto?

Pregunta 8: ¿Cuál es el formato correcto de una clave en JSON?