Resumen: En este artículo, aprenderás sobre las propiedades y atributos de los objetos en JavaScript, incluyendo configurable, enumerable, writable, get, set y value. Además, aprenderás cómo estas propiedades afectan a la forma en que se puede acceder y manipular la información en un objeto, y te proporcionaré unos ejemplos prácticos para ayudar a comprender su uso en el mundo real. Al final del artículo, debes tener una comprensión clara de cómo utilizar estas propiedades para crear objetos más flexibles y dinámicos en tus aplicaciones y proyectos.
Introducción
En este tutorial, vamos a hablar sobre las propiedades de los objetos en JavaScript. ¿Alguna vez has creado un objeto en JavaScript y te has preguntado qué son todas las propiedades y atributos que se pueden establecer en él? Si es así, no estás solo. Las propiedades y atributos de los objetos son una parte fundamental del lenguaje JavaScript y pueden ser un poco confusas al principio.
En este tutorial, vamos a analizar los diferentes tipos de propiedades de los objetos de JavaScript, incluyendo configurable, enumerable, writable, get, set y value. Comprender estos conceptos te permitirá trabajar con los objetos de manera más efectiva y eficiente. ¡Empecemos!
Propiedades de los objetos en JavaScript
Los objetos son una parte fundamental de JavaScript, y como programador debes tener un buen conocimiento de las propiedades y atributos de los objetos. Las propiedades son las características que tienen los objetos, como el valor, la longitud, el tipo, etc., mientras que los atributos definen cómo se pueden acceder y modificar estas propiedades. En este tutorial, explicaremos los principales atributos de las propiedades de los objetos de JavaScript: configurable, enumerable, writable, get, set y value.
¿Qué es y para qué sirve configurable?
La propiedad configurable en JavaScript indica si una propiedad de un objeto puede ser eliminada o si sus atributos (como writable, enumerable, get y set) pueden ser modificados. Si una propiedad es configurable, sus atributos pueden ser modificados y la propiedad puede ser eliminada con el operador delete.
En una aplicación real, configurable se utiliza para proteger propiedades críticas del objeto que no deben ser modificadas o eliminadas accidentalmente. Un ejemplo común es la definición de propiedades en un objeto que deben permanecer inalterables, como identificadores únicos, configuraciones de seguridad y otros datos importantes. Si configuramos la propiedad como no configurable, se impedirá que se modifique o elimine accidentalmente.
Ejemplo de configurable
Por ejemplo, supongamos que estamos trabajando en una aplicación de banca en línea que maneja información confidencial del cliente, como saldos de cuenta e información de transacciones. Podemos definir una propiedad userId en el objeto userAccount que es única para cada cuenta de usuario y se utiliza para identificar el usuario en la aplicación. Para evitar que esta propiedad sea modificada o eliminada accidentalmente, podemos configurarla como no configurable utilizando el método Object.defineProperty():
let userAccount = { balance: 1000 };
Object.defineProperty(userAccount, 'userId', {
value: '1234-5678-9012',
writable: false,
enumerable: true,
configurable: false
});
console.log(userAccount.userId); // output: '1234-5678-9012'
delete userAccount.userId; // error: cannot delete property 'userId' of #<Object>
userAccount.userId = '0000-1111-2222'; // error: cannot assign to read only property 'userId' of object '#<Object>'
En este ejemplo, la propiedad userId se define con la opción configurable establecida en false, lo que evita que se elimine o modifique. Si intentamos eliminar la propiedad o modificar su valor, se lanzará un error en tiempo de ejecución. De esta manera, podemos garantizar que la propiedad userId permanezca inalterable y única para cada cuenta de usuario en la aplicación de banca en línea.
¿Qué es y para qué sirve enumerable?
La propiedad enumerable de un objeto JavaScript indica si la propiedad se puede enumerar o no. En otras palabras, si se puede recorrer utilizando un ciclo for..in. Cuando una propiedad es enumerable, significa que aparecerá en la lista de propiedades del objeto cuando se itere a través de él. Si no es enumerable, no aparecerá.
En la práctica, el uso de la propiedad enumerable es útil para evitar que ciertas propiedades del objeto sean expuestas a los ciclos for..in o a los métodos Object.keys() y Object.values(). Por ejemplo, en una biblioteca JavaScript, se pueden utilizar propiedades no enumerables para ocultar información interna del objeto que no se desea que los usuarios accedan directamente.
Ejemplo de enumerable
Aquí hay un ejemplo de la vida real en el que se utiliza la propiedad enumerable:
Supongamos que tienes una clase de carro en JavaScript que tiene una propiedad VIN (número de identificación del vehículo) que no deseas que se muestre cuando se imprime el objeto. Puedes hacer que la propiedad VIN no sea enumerable para evitar que se muestre en una lista de propiedades:
class Car {
constructor(make, model, year, vin) {
this.make = make;
this.model = model;
this.year = year;
Object.defineProperty(this, 'VIN', {
value: vin,
enumerable: false
});
}
}
En este ejemplo, la propiedad VIN se define utilizando el método Object.defineProperty() y se establece la propiedad enumerable en false. Esto significa que la propiedad VIN no se mostrará cuando se utilice un ciclo for..in en un objeto Car.
¿Qué es y para qué sirve writable?
La propiedad "writable" de un objeto en JavaScript indica si su valor puede ser cambiado. Si se establece en "false", la propiedad se vuelve de sólo lectura y su valor no puede ser cambiado.
Ejemplo con writable
Un ejemplo de la vida real donde se puede utilizar "writable" es en un objeto que almacena la información de un usuario en una aplicación web. Supongamos que la propiedad "correo electrónico" del objeto es de sólo lectura, ya que se utilizó para registrarse y no se puede cambiar. Sin embargo, la propiedad "nombre de usuario" puede ser editable, ya que el usuario puede querer cambiar su nombre de usuario. En este caso, la propiedad "nombre de usuario" tendría la configuración "writable" en "true", mientras que la propiedad "correo electrónico" tendría la configuración "writable" en "false".
const usuario = {
nombreDeUsuario: "ejemplo123",
correoElectronico: "ejemplo123@gmail.com"
};
Object.defineProperty(usuario, "correoElectronico", {
writable: false
});
Object.defineProperty(usuario, "nombreDeUsuario", {
writable: true
});
// Intentamos cambiar el correo electrónico
usuario.correoElectronico = "nuevoejemplo@gmail.com";
// No se permite cambiar el correo electrónico
// Cambiamos el nombre de usuario
usuario.nombreDeUsuario = "nuevoejemplo123";
// Se permite cambiar el nombre de usuario
console.log(usuario);
En este ejemplo, creamos un objeto llamado usuario que tiene dos propiedades: nombreDeUsuario y correoElectronico. Luego, usamos el método Object.defineProperty para definir los atributos de estas propiedades.
Para la propiedad correoElectronico, establecemos el atributo writable en false, lo que significa que no se puede cambiar una vez que se ha establecido.
Para la propiedad nombreDeUsuario, establecemos el atributo writable en true, lo que significa que se puede cambiar en cualquier momento.
Luego, intentamos cambiar el valor de la propiedad correoElectronico, pero no se permite debido a que se ha definido como no escribible. En cambio, cambiamos el valor de la propiedad nombreDeUsuario con éxito.
¿Qué es y para qué sirve get?
La propiedad "get" en JavaScript permite definir una función que se ejecuta cada vez que se intenta acceder a una propiedad de un objeto. Esto puede ser útil para calcular dinámicamente el valor de una propiedad o para realizar una validación antes de devolver el valor de la propiedad.
Un ejemplo de uso de "get" en la vida real podría ser en una aplicación bancaria en línea. Supongamos que el objeto "CuentaBancaria" tiene una propiedad "saldo", que se actualiza cada vez que se realiza una transacción. En lugar de acceder directamente a la propiedad "saldo", se puede utilizar una función "get" para calcular el saldo disponible para el usuario, restando cualquier cantidad que esté en proceso de autorización.
Ejemplo con get
Aquí hay un ejemplo de código:
let CuentaBancaria = {
_saldo: 0,
_autorizado: 0,
get saldoDisponible() {
return this._saldo - this._autorizado;
},
autorizar(transaccion) {
this._autorizado += transaccion.monto;
},
confirmar(transaccion) {
this._saldo -= transaccion.monto;
this._autorizado -= transaccion.monto;
}
};
// Ejemplo de uso:
CuentaBancaria._saldo = 1000;
CuentaBancaria.autorizar({ monto: 200 });
console.log(CuentaBancaria.saldoDisponible); // Devuelve 800
CuentaBancaria.confirmar({ monto: 200 });
console.log(CuentaBancaria.saldoDisponible); // Devuelve 600
En este ejemplo, la función "get saldoDisponible" se ejecuta cada vez que se intenta acceder a la propiedad "saldoDisponible". La función devuelve el valor de la propiedad "_saldo" menos el valor de la propiedad "_autorizado". Esto permite que la aplicación calcule dinámicamente el saldo disponible para el usuario en función de las transacciones que están en proceso de autorización.
¿Qué es y para qué sirve set?
La función "set" de una propiedad de un objeto en JavaScript se utiliza para definir una acción a tomar cada vez que se intenta asignar un valor a esa propiedad. Es decir, se define una función que se ejecuta cuando se intenta modificar el valor de una propiedad.
Un ejemplo de la vida real donde se puede utilizar "set" es en una aplicación de compras en línea. Supongamos que tenemos un objeto "producto" que contiene información sobre un artículo en venta, incluyendo su nombre, descripción, precio y cantidad disponible. Para garantizar que el inventario se actualice correctamente cada vez que se realiza una compra, podemos definir una función "set" para la propiedad "cantidad disponible" que se ejecuta cada vez que alguien intenta modificar la cantidad disponible.
Ejemplo de set
Por ejemplo, podemos definir la función "set" de la siguiente manera:
let producto = {
nombre: "Camisa",
descripcion: "Camisa de algodón de alta calidad",
precio: 25.99,
_cantidadDisponible: 10,
set cantidadDisponible(cantidad) {
if (typeof cantidad !== "number") {
throw new TypeError("La cantidad debe ser un número");
}
this._cantidadDisponible = cantidad;
if (cantidad === 0) {
console.log("¡Este producto está agotado!");
}
}
};
En este ejemplo, la propiedad "cantidad disponible" está representada por la variable "_cantidadDisponible". La función "set cantidadDisponible" se define con la misma sintaxis que una propiedad normal, pero con la palabra clave "set" antes del nombre de la propiedad. En la función "set", se comprueba si la cantidad asignada es un número y se actualiza el valor de "_cantidadDisponible". Si la cantidad es igual a cero, se muestra un mensaje en la consola informando al usuario que el producto está agotado.
Luego, podemos utilizar esta función de la siguiente manera:
producto.cantidadDisponible = 5;
En este ejemplo, estamos asignando un valor de 5 a la propiedad "cantidad disponible" del objeto "producto". Debido a que hemos definido una función "set" para esta propiedad, la función se ejecutará y actualizará la propiedad "_cantidadDisponible" a 5. Si la cantidad es igual a cero, se mostrará el mensaje "¡Este producto está agotado!" en la consola.
En resumen, la función "set" de una propiedad de un objeto en JavaScript se utiliza para definir una acción a tomar cada vez que se intenta asignar un valor a esa propiedad, lo que puede ser útil en situaciones donde se necesita realizar validaciones o ejecutar acciones adicionales al asignar un valor a una propiedad.
¿Qué es y para qué sirve value?
El atributo "value" se utiliza para establecer el valor de una propiedad en un objeto. Este atributo puede ser utilizado en combinación con los otros atributos, como "writable", "configurable", y "enumerable", para definir el comportamiento de una propiedad en un objeto.
Un ejemplo de la vida real en el que se podría utilizar el atributo "value" es en un objeto que representa una cuenta bancaria. El objeto podría tener una propiedad "saldo" que almacena el valor actual del saldo de la cuenta. La propiedad "saldo" tendría el atributo "writable" establecido en "true", lo que permitiría la actualización del valor del saldo a medida que se realizan depósitos y retiros en la cuenta.
A continuación, se muestra un ejemplo de código que demuestra cómo se puede utilizar el atributo "value" para establecer el valor de una propiedad en un objeto:
const cuentaBancaria = {
saldo: {
value: 5000,
writable: true,
enumerable: true,
configurable: false
}
};
console.log(cuentaBancaria.saldo); // Resultado: 5000
// Actualizar el saldo de la cuenta
cuentaBancaria.saldo.value = 6000;
console.log(cuentaBancaria.saldo); // Resultado: 6000
En este ejemplo, se crea un objeto cuentaBancaria con una propiedad saldo. La propiedad saldo tiene un valor inicial de 5000 y el atributo writable se establece en true, lo que permite actualizar el valor del saldo. Luego se actualiza el valor del saldo a 6000 y se muestra el nuevo valor de la propiedad saldo en la consola.
Conclusión
En resumen, las propiedades y atributos son una parte fundamental en la creación de objetos en JavaScript, ya que nos permiten definir sus características y comportamientos. A través de la configuración de estas propiedades, podemos controlar el comportamiento y el acceso a la información de los objetos.
Las propiedades: configurable, enumerable, writable, get, set y value son herramientas esenciales que nos permiten crear objetos flexibles y seguros en nuestras aplicaciones. Cada una de ellas tiene un propósito específico que nos ayuda a controlar el comportamiento y las interacciones con los objetos.
Es importante tener en cuenta que cada propiedad y atributo puede ser útil en diferentes situaciones, y es necesario conocerlos a fondo para utilizarlos de manera efectiva. En la medida en que seas capaz de manejarlos de manera adecuada, podrás desarrollar aplicaciones más eficientes y seguras.
En conclusión, el conocimiento de las propiedades y atributos de los objetos de JavaScript es esencial para cualquier desarrollador de aplicaciones web. Esperamos que este tutorial haya sido útil para comprender en profundidad su funcionamiento y aplicaciones en el mundo real.
