Propiedades Computadas: Claves Dinámicas en Objetos
Aprende a crear propiedades de objetos con nombres dinámicos usando expresiones JavaScript dentro de corchetes.
TL;DR - Resumen rápido
- Las propiedades computadas usan expresiones como nombres de propiedad
- Se crean usando corchetes [] en la definición del objeto
- Permiten crear propiedades dinámicamente en tiempo de ejecución
- Las expresiones se evalúan antes de crear la propiedad
- Son útiles para patrones de nombres y claves dinámicas
Introducción a Propiedades Computadas
Las propiedades computadas (computed properties) son una característica de ES6 que permite crear propiedades de objetos con nombres dinámicos. En lugar de escribir el nombre de la propiedad literalmente, puedes usar una expresión JavaScript que se evalúa para determinar el nombre de la propiedad.
Esta característica es especialmente útil cuando necesitas crear propiedades cuyos nombres siguen un patrón o dependen de valores que solo conoces en tiempo de ejecución. Antes de ES6, tenías que crear el objeto primero y luego agregar las propiedades dinámicamente, lo cual era más verboso.
Diferencia con bracket notation
Las propiedades computadas se usan en la CREACIÓN del objeto (dentro de las llaves ). Bracket notation se usa para ACCEDER a propiedades después de que el objeto ya existe. Ambas usan corchetes, pero en contextos diferentes.
Sintaxis Básica
La sintaxis de propiedades computadas consiste en escribir una expresión entre corchetes como nombre de la propiedad al crear el objeto. La expresión se evalúa y su resultado se convierte en el nombre de la propiedad.
En este ejemplo, las propiedades "nombre1", "nombre2" y "nombre3" se crean dinámicamente usando una expresión de template literal dentro de los corchetes. Esto es mucho más limpio que crear las propiedades una por una.
Ventaja sobre el enfoque tradicional
Antes de ES6, tenías que crear el objeto vacío y luego agregar propiedades en un bucle. Con propiedades computadas, puedes crear el objeto completo en una sola declaración, lo cual es más eficiente y legible.
Expresiones Dinámicas
Las propiedades computadas pueden usar cualquier expresión JavaScript válida, no solo template literals. Puedes usar concatenación de strings, variables, o cualquier expresión que produzca un string o Symbol.
Este ejemplo muestra diferentes tipos de expresiones que puedes usar. Desde concatenación simple de strings hasta template literals más complejos. La clave es que la expresión debe evaluar a un string o Symbol.
Uso de variables
Puedes usar variables como parte de la expresión para crear nombres de propiedades dinámicos. Esto es útil cuando el patrón del nombre depende de valores que solo conoces en tiempo de ejecución.
Aquí, el prefijo "usuario_" se combina con diferentes sufijos para crear propiedades con nombres dinámicos. Esto permite crear estructuras de datos que siguen patrones predecibles.
Casos de Uso Comunes
Las propiedades computadas son útiles en varios escenarios del mundo real. Conocer estos casos de uso te ayuda a identificar cuándo es apropiado usar esta característica en tu propio código.
- <strong>APIs dinámicas</strong>: Crear objetos con propiedades basadas en respuestas de APIs
- <strong>Configuraciones</strong>: Generar objetos de configuración con prefijos/sufijos
- <strong>Mapeo de datos</strong>: Crear objetos que mapean datos de arrays u otros objetos
- <strong>Metadatos</strong>: Agregar propiedades con nombres que incluyen timestamps o IDs
- <strong>Localización</strong>: Crear propiedades con sufijos de idioma (nombre_es, nombre_en)
Este ejemplo muestra un caso de uso real: crear un objeto de configuración dinámica basada en un array de opciones. Cada opción del array se convierte en una propiedad del objeto con un valor por defecto.
Limitaciones y Consideraciones
Aunque las propiedades computadas son muy útiles, hay algunas limitaciones y consideraciones que debes tener en cuenta al usarlas. No son la solución perfecta para todos los casos de acceso dinámico a propiedades.
Este ejemplo muestra que las propiedades computadas solo se evalúan una vez, al momento de crear el objeto. Si cambias el valor de la variable usada en la expresión, la propiedad del objeto no se actualiza automáticamente.
No son propiedades reactivas
Las propiedades computadas NO son como las propiedades computadas en Vue.js o getters en JavaScript. Se evalúan una sola vez al crear el objeto y no se actualizan automáticamente si cambian las variables usadas en la expresión.
Rendimiento
En términos de rendimiento, las propiedades computadas son equivalentes a crear propiedades normales. No hay penalización de rendimiento por usar expresiones en los nombres de las propiedades. La expresión se evalúa una vez al crear el objeto, no cada vez que accedes a la propiedad.
Cuándo evitarlas
Si conoces el nombre de la propiedad de antemano y es un identificador válido, usa nombres de propiedad normales. Las propiedades computadas añaden complejidad visual al código, úsalas solo cuando realmente necesitas nombres dinámicos.
Resumen: Propiedades Computadas
Conceptos principales:
- •Las propiedades computadas usan expresiones entre corchetes []
- •Se evalúan una vez al crear el objeto
- •Permiten crear propiedades con nombres dinámicos
- •Son equivalentes en rendimiento a propiedades normales
- •No son reactivas ni se actualizan automáticamente
Mejores prácticas:
- •Úsalas cuando necesitas nombres de propiedad dinámicos
- •Prefiere nombres normales cuando el nombre es conocido
- •Usa nombres descriptivos para las expresiones
- •Documenta el patrón de nombres en comentarios
- •Evita expresiones excesivamente complejas