Lección 37: Propiedades Abreviadas y Computadas

🧠 Concepto

ES6 introdujo mejoras sintácticas para trabajar con propiedades de objetos de forma más concisa y dinámica.

Shorthand Property Names

Cuando el nombre de la propiedad es igual al nombre de la variable, puedes omitir el valor:

// Antes (ES5)
const nombre = 'Ana';
const edad = 28;
const persona = { nombre: nombre, edad: edad };

// Con shorthand (ES6+)
const persona = { nombre, edad };
console.log(persona); // { nombre: 'Ana', edad: 28 }

Computed Property Names

Permite usar expresiones entre corchetes [] como nombre de propiedad:

const key = 'nombre';
const valor = 'Laptop';

const producto = {
  [key]: valor,
  ['precio_' + key]: 1000
};
console.log(producto);
// { nombre: 'Laptop', precio_nombre: 1000 }

Method Definition Shorthand

Sintaxis abreviada para definir métodos en objetos literales:

// Antes
const objeto = {
  saludar: function() {
    console.log('Hola');
  }
};

// Con shorthand
const objeto = {
  saludar() {
    console.log('Hola');
  }
};

💻 Ejemplo

// Shorthand + computed en acción
const id = 1;
const nombre = 'Camiseta';
const precio = 25;

const producto = {
  id,
  nombre,
  precio,
  [`${nombre}_${id}`]: true, // computed
  mostrarInfo() {
    console.log(`${this.nombre} cuesta $${this.precio}`);
  }
};

console.log(producto);
// { id: 1, nombre: 'Camiseta', precio: 25, 'Camiseta_1': true, mostrarInfo: fn }

// Computed con bucles
const colores = ['rojo', 'verde', 'azul'];
const mapaColores = {};
for (let i = 0; i < colores.length; i++) {
  mapaColores[`color_${i}`] = colores[i];
}
console.log(mapaColores);
// { color_0: 'rojo', color_1: 'verde', color_2: 'azul' }

⚠️ Nota

Las propiedades computadas se evalúan en el momento de crear el objeto. Si usas una función como clave computada, se llama a toString():

const obj = {
  [{}]: 'valor'
};
console.log(Object.keys(obj)); // ["[object Object]"]

// Las propiedades computadas también funcionan en clases
class Ejemplo {
  [Symbol.iterator]() {
    // ...
  }
}

Los shorthand method names son equivalentes a métodos normales, no a arrow functions. Conservan el this dinámico del objeto.

🎯 Tip

Usa shorthand properties cuando devuelvas objetos desde funciones para evitar repetición:

function crearUsuario(nombre, email, rol) {
  return { nombre, email, rol }; // mucho más limpio
}

// Usa computed properties para nombres de propiedades dinámicos
function actualizarEstado(id, campo, valor) {
  return { id, [campo]: valor };
}

📝 Ejercicio

Crea una función normalizarUsuario que reciba nombre, email y edad, y devuelva un objeto con:

• Propiedades nombre, email, edad usando shorthand
• Una propiedad computada email_${nombre} con el email
• Un método saludar() usando method shorthand

function normalizarUsuario(nombre, email, edad) {
  // Escribe aquí
}

const user = normalizarUsuario('Ana', 'ana@mail.com', 28);
console.log(user.nombre);        // "Ana"
console.log(user.email_Ana);     // "ana@mail.com"
console.log(user.saludar());     // "Hola, soy Ana"