En esta página

Objetos y arrays

18 min lectura TextoCap. 2 — Datos y estructuras

Creación de objetos

Los objetos son colecciones de pares clave-valor, la estructura más usada en JavaScript:

const producto = { nombre: 'Laptop', precio: 999, disponible: true };

Cuando el nombre de la variable coincide con la clave, usa shorthand: { nombre, edad } equivale a { nombre: nombre, edad: edad }.

Propiedades computadas

Usa expresiones entre corchetes como nombres de propiedad:

const campo = 'email';
const datos = { [campo]: '[email protected]', [`${campo}OK`]: true };

Acceso a propiedades

  • Dot notation (obj.clave) — la más común y legible
  • Bracket notation (obj['clave']) — necesaria para claves dinámicas o con caracteres especiales

[!TIP] Usa dot notation por defecto. Bracket notation es necesaria cuando la clave viene de una variable o contiene caracteres especiales.

Object.keys(), Object.values(), Object.entries()

const config = { tema: 'oscuro', idioma: 'es', fuente: 14 };

Object.keys(config);    // ['tema', 'idioma', 'fuente']
Object.values(config);  // ['oscuro', 'es', 14]
Object.entries(config); // [['tema', 'oscuro'], ['idioma', 'es'], ...]

Object.entries() es ideal para recorrer objetos con for...of:

for (const [clave, valor] of Object.entries(config)) {
  console.log(`${clave}: ${valor}`);
}

Object.assign() y spread para merge

Ambos fusionan objetos. Las propiedades del último sobrescriben:

const base = { tema: 'oscuro', idioma: 'es' };
const prefs = { idioma: 'en', fuente: 14 };
const resultado = { ...base, ...prefs };
// { tema: 'oscuro', idioma: 'en', fuente: 14 }

[!WARNING] Ambos hacen copia superficial. Los objetos anidados siguen siendo la misma referencia. Para copias profundas usa structuredClone().

Optional chaining

El operador ?. accede a propiedades anidadas sin lanzar error si algún nivel es null o undefined:

usuario?.direccion?.calle;   // valor o undefined
usuario?.contacto?.telefono ?? 'No registrado'; // con default

Getters y setters

Propiedades con lógica de lectura/escritura que se acceden como propiedades normales:

const cuenta = {
  _saldo: 1000,
  get saldo() { return `$${this._saldo}`; },
  set saldo(valor) {
    if (valor < 0) throw new Error('Saldo negativo');
    this._saldo = valor;
  },
};
cuenta.saldo;       // '$1000'
cuenta.saldo = 500; // ejecuta el setter

Arrays multidimensionales

Los arrays pueden contener otros arrays, formando matrices:

const matriz = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
matriz[0][2]; // 3 (fila 0, columna 2)

Destructuring

La desestructuración extrae valores en variables individuales.

Objetos

const { nombre, precio } = producto;            // básico
const { nombre: nombreProducto } = producto;     // renombre
const { descuento = 0 } = producto;              // valor por defecto

Destructuring anidado

const pedido = { id: 1, cliente: { nombre: 'Ana', ciudad: 'La Paz' } };
const { cliente: { nombre, ciudad } } = pedido;

Arrays

const [primero, segundo] = colores;  // primeros dos
const [, , tercero] = colores;       // saltar elementos
const [cabeza, ...cola] = colores;   // rest: el resto en un array

Spread operator

El operador spread (...) expande un iterable en elementos individuales:

const copia = [...original];                       // copiar array
const todos = [...arrA, ...arrB];                  // fusionar arrays
const actualizado = { ...usuario, edad: 29 };      // copiar y modificar objeto

Rest en funciones

El operador rest captura argumentos variables en un array. Siempre va al final:

function sumar(...números) {
  return números.reduce((acc, n) => acc + n, 0);
}
sumar(1, 2, 3, 4, 5); // 15

[!INFO] El parámetro rest siempre debe ser el último en la lista de parámetros.

Métodos de array (resumen)

Los métodos funcionales transforman arrays sin mutarlos. Se cubren en detalle en la siguiente lección:

Método Función Retorna
map() Transforma cada elemento Nuevo array
filter() Filtra elementos Nuevo array
reduce() Acumula en un valor Valor único
find() Busca un elemento Elemento o undefined
some() / every() Verifica condiciones boolean

Práctica

  1. Usa destructuring con valores por defecto: Dado el objeto { nombre: 'Ana', edad: 28 }, extraé nombre, edad y pais con un valor por defecto 'Bolivia' usando destructuring. Imprime los tres valores en consola.
  2. Combina spread y optional chaining: Crea un objeto usuario con una propiedad anidada direccion.calle. Usa spread para crear una copia con una nueva edad, y optional chaining con ?? para acceder a usuario.contacto?.telefono con valor por defecto 'N/A'.
  3. Itera con Object.entries: Crea un objeto notas con 3 materias y sus calificaciones. Recorrelo con for...of y Object.entries() imprimiendo "Materia: calificacion" para cada una.

En la siguiente lección exploraremos los métodos de array en profundidad con ejemplos prácticos.

Inmutabilidad
Prefiere crear nuevos objetos/arrays en lugar de mutar los existentes. Esto hace tu código más predecible y facilita el debugging.
Copia superficial
Tanto spread como Object.assign solo hacen copia superficial. Los objetos anidados siguen siendo referencias. Usa structuredClone() para copias profundas.
Optional chaining
Combina ?. con ?? (nullish coalescing) para acceder a propiedades anidadas de forma segura y proveer valores por defecto.
javascript
// Creación y acceso
const producto = { nombre: 'Laptop', precio: 999 };
producto.nombre;          // dot notation
producto['precio'];       // bracket notation

// Propiedades computadas
const campo = 'color';
const config = { [campo]: 'azul' };

// Destructuring con renombre y default
const { nombre, precio, stock = 0 } = producto;
const { nombre: alias, ...resto } = producto;

// Destructuring de arrays + rest
const [primero, , tercero] = ['rojo', 'verde', 'azul'];
const [cabeza, ...cola] = [1, 2, 3, 4];

// Spread - copia y merge
const actualizado = { ...producto, precio: 899 };
const base = { tema: 'oscuro' };
const merged = { ...base, ...config };

// Optional chaining + nullish coalescing
const usuario = { direccion: { calle: 'Bolivar 123' } };
const calle = usuario?.direccion?.calle ?? 'N/A';
javascript
const persona = { nombre: 'Ana', edad: 28, rol: 'dev' };

// Object.keys / values / entries
Object.keys(persona);    // ['nombre', 'edad', 'rol']
Object.values(persona);  // ['Ana', 28, 'dev']
Object.entries(persona); // [['nombre','Ana'], ...]

// Getters y setters
const cuenta = {
  _saldo: 1000,
  get saldo() { return `$${this._saldo}`; },
  set saldo(v) {
    if (v < 0) throw new Error('Negativo');
    this._saldo = v;
  },
};
cuenta.saldo;       // '$1000'

// Rest en funciones
function sumar(...nums) {
  return nums.reduce((a, n) => a + n, 0);
}
sumar(1, 2, 3, 4); // 10

// Matrices
const m = [[1,2],[3,4]];
m[1][0]; // 3