¿Corchetes en Objetos? Entiende las Propiedades Computadas en JavaScript

Introducción: El susto de ver corchetes fuera de un arreglo

Cuando vas arrancando en el mundo de la programación con JavaScript, hay reglas que se te graban a fuego en la cabeza. Una de las primeras es: “las llaves {} son para objetos y los corchetes [] son para arreglos (arrays)”. Y durante un buen tiempo, la vida tiene sentido. Lees tus arreglos con miArreglo[0], defines tus listas de datos, y todo marcha sobre ruedas.

Sin embargo, tarde o temprano llega ese momento en el que estás revisando código moderno —o construyendo tu primera aplicación interactiva en Vanilla JS o React— y te topas con algo como esto:

const nombreCampo = "correo";
const usuario = {
  [nombreCampo]: "contacto@8devmx.com"
};

¿Corchetes dentro de la declaración de un objeto? ¿Acaso JavaScript enloqueció? No te preocupes, a todos nos ha sacado un susto la primera vez. Lo que estás viendo no es un error de sintaxis ni un truco raro, sino una característica súper potente introducida en ES6 (ECMAScript 2015) llamada Propiedades Computadas (o Computed Property Names en inglés).

En este artículo de 8devmx vamos a desmenuzar qué son, cómo funcionan, por qué te van a salvar de escribir toneladas de código repetitivo al manejar formularios y cómo evitar los tropiezos más comunes. ¡Agárrate que esto se pone bueno!

El origen: ¿Cómo creábamos propiedades dinámicas antes?

Para entender el valor de las propiedades computadas, primero recordemos cómo funcionaba la creación de objetos tradicional.

Imagina que quieres crear un objeto para almacenar las preferencias de un usuario. Si conoces las llaves de antemano, usas la notación literal estándar:

const perfil = {
  nombre: "Beto",
  edad: 25
};

Pero, ¿qué pasaba si el nombre de la propiedad venía guardado en una variable? En el JavaScript del pasado, si intentabas meter la variable directamente dentro del objeto, pasaba esto:

const claveDinamica = "ciudad";

const perfil = {
  nombre: "Beto",
  claveDinamica: "Guadalajara" // ¡Error conceptual!
};

console.log(perfil);
// Resultado: { nombre: "Beto", claveDinamica: "Guadalajara" }

JavaScript creaba literalmente una clave llamada "claveDinamica", en lugar de evaluar lo que había dentro de la variable. Para lograr que la clave fuera "ciudad", estabas obligado a crear el objeto primero y luego asignar el valor en una línea separada usando la notación de corchetes:

const claveDinamica = "ciudad";
const perfil = { nombre: "Beto" };

// Asignación posterior
perfil[claveDinamica] = "Guadalajara";

Aunque funciona, tener que declarar el objeto por partes resultaba incómodo y poco elegante al trabajar con estructuras más grandes.

La solución: Propiedades computadas al rescate

Con la llegada de ES6, JavaScript nos dio la posibilidad de evaluar expresiones directamente en las llaves del objeto al momento de su creación. Todo lo que necesitas hacer es envolver la variable o expresión entre corchetes [].

Fíjate en lo limpio que queda ahora:

const llave = "tecnologiaFavorita";

const dev = {
  nombre: "Dani",
  [llave]: "JavaScript"
};

console.log(dev);
// Resultado: { nombre: "Dani", tecnologiaFavorita: "JavaScript" }

Al poner [llave], le estás diciendo al intérprete: “Oye, no le pongas de nombre ‘llave’ a la propiedad; primero evalúa el valor de esa variable y usa el resultado como el nombre de la clave”.

No solo variables: ¡Expresiones completas!

Lo más chido de esta sintaxis es que dentro de los corchetes puedes poner cualquier expresión válida de JS, como concatenaciones de texto o llamadas a funciones:

const prefijo = "user_";

const cuenta = {
  [prefijo + "id"]: 1042,
  [prefijo + "status"]: "activo",
  ["fecha_" + new Date().getFullYear()]: "Registrado"
};

console.log(cuenta);
// Resultado: { user_id: 1042, user_status: "activo", fecha_2026: "Registrado" }

Caso de uso real: Manejo dinámico de formularios

El escenario donde te vas a enamorar de las propiedades computadas es al procesar datos de formularios web.

Imagina un formulario de contacto con tres campos: nombre, correo y mensaje.

La forma aburrida y repetitiva (Sin propiedades computadas)

Sin propiedades computadas, tendrías que escribir una función diferente para procesar la entrada de cada campo:

let estadoFormulario = {
  nombre: "",
  correo: "",
  mensaje: ""
};

function cambiarNombre(valor) {
  estadoFormulario.nombre = valor;
}

function cambiarCorreo(valor) {
  estadoFormulario.correo = valor;
}

function cambiarMensaje(valor) {
  estadoFormulario.mensaje = valor;
}

¡Qué flojera escribir tanto código casi idéntico!

La forma pro (Con propiedades computadas)

Con propiedades computadas, una sola función puede manejar todos los inputs de tu formulario. Solo necesitas asegurarte de que el atributo name de tu HTML coincida con las propiedades de tu objeto.

Estructura HTML:

<input type="text" name="nombre" placeholder="Tu nombre" id="input-nombre">
<input type="email" name="correo" placeholder="Tu correo" id="input-correo">

Código JavaScript:

const estadoFormulario = {
  nombre: "",
  correo: ""
};

// Una sola función para procesar cualquier campo
function manejarCambio(evento) {
  const { name, value } = evento.target;

  // Creamos la propiedad de forma dinámica usando corchetes
  estadoFormulario[name] = value;
  
  console.log("Estado actualizado:", estadoFormulario);
}

document.getElementById("input-nombre").addEventListener("input", manejarCambio);
document.getElementById("input-correo").addEventListener("input", manejarCambio);

Cuando el usuario escribe en el campo de correo, evento.target.name vale "correo". Gracias a la notación dinámica, estadoFormulario[name] actualiza la clave correcta sin necesidad de ningún if o switch.

Errores comunes que debes evitar

  1. Confundir corchetes de arreglo con corchetes de propiedad computada: Recuerda la regla visual: si ves corchetes dentro de las llaves de un objeto ({ [clave]: valor }), estás definiendo una propiedad dinámica, no creando un arreglo.

  2. Olvidar colocar los corchetes: Si escribes { clave: valor }, la propiedad se llamará literalmente "clave". Si pretendías usar el valor de una variable, provocarás un bug en tu programa.

  3. Usar objetos o valores complejos dentro de los corchetes sin cuidado: Las claves de los objetos normales en JavaScript siempre se convierten a cadenas (strings). Si pones un objeto dentro de los corchetes como [{ id: 1 }]: "dato", JavaScript lo transformará en "[object Object]", lo que provocará colisiones de nombres.

Buenas prácticas

  • Usa nombres claros: La variable que uses como clave debe tener un nombre representativo para que tu código sea fácil de leer.
  • Sincronización HTML y JS: Mantén una correspondencia exacta entre los valores del atributo name en HTML y tus claves de objeto en JavaScript.
  • Inmutabilidad en frameworks: Si trabajas con React, combina propiedades computadas con el operador spread (...): 
    setFormulario(estadoPrevio => ({
  ...estadoPrevio,
  [e.target.name]: e.target.value
}));

Ejercicio práctico: Generador de datos dinámicos

¡Hora de poner a prueba lo aprendido!

Instrucciones: Crea una función llamada crearPerfilItem que reciba dos parámetros: categoria (por ejemplo: "hobby", "rol", "nivel") y valor. La función debe devolver un objeto con esa propiedad dinámica más una propiedad fija llamada activo: true.

Solución propuesta:

function crearPerfilItem(categoria, valor) {
  return {
    [categoria.toLowerCase()]: valor,
    activo: true,
    creadoEn: new Date().toLocaleDateString("es-MX")
  };
}

// Pruebas:
const item1 = crearPerfilItem("Rol", "Frontend Developer");
console.log(item1);
// Salida: { rol: "Frontend Developer", activo: true, creadoEn: "..." }

const item2 = crearPerfilItem("Nivel", "Principiante");
console.log(item2);
// Salida: { nivel: "Principiante", activo: true, creadoEn: "..." }

Prueba ejecutar este código en la consola de tu navegador (F12) para que veas cómo el objeto ajusta su estructura dinámicamente.

Fuente original

Este contenido fue redactado y adaptado libremente por el equipo editorial de 8devmx, tomando como contexto conceptual la nota técnica “Wait, Square Brackets Aren’t Just for Arrays? — A Controlled Component Gotcha” escrita por Joshua en Dev.to. Puedes revisar la publicación original en inglés aquí.

¡Esperamos que este tutorial te sirva para perderle el miedo a la sintaxis moderna de JavaScript! Si tienes alguna duda, déjanos un comentario y con gusto te echamos la mano. ¡A seguir programando!