Las de propiedades de los objetos se crean y utilizan con facilidad en Javascript, pero se suelen desconocen algunas de sus más interesantes características que nos pueden permitir un mayor control sobre ellas. En este mismo sentido, los métodos de Object
son unos grandes desconocidos. Son soportados por todos los navegadores modernos (incluido IE9), pero siguen siendo poco aprovechados. Varios de estos métodos nos van a ayudar a entender las principales características de las propiedades de los objetos en Javascript y sacarles todo el partido.
Veamos la diferencia entre las propiedades propias y las propiedades heredadas. Las propiedades propias son las creadas directamente en un objeto. Cuando las propiedades son creadas en el constructor por medio de this
o asignadas dinámicamente sobre el objeto, son propiedades propias del objeto, ya que se crean sobre la instancia directa del objeto.
function Triangulo() { // Propiedades creadas en el contructor sobre el objeto this.a = 60; this.b = 60; this.c = 60; } var equilatero = new Triangulo(); equilatero.tipo = "equilátero"; // Propiedad creada sobre el propio objeto for (var prop in equilatero) { if (!equilatero.hasOwnProperty(prop)) continue; console.log(prop); // muestra nada a, b, c y tipo }
Las propiedades heredadas son creadas en la cadena de prototipos de objeto. Cuando se crean por medio de prototype
no pertenecen como tal al objeto y se consideran heredadas.
function Triangulo() { } // Propiedades creadas en el prototipo Triangulo.prototype.a = 60; Triangulo.prototype.b = 60; Triangulo.prototype.c = 60; function Equilatero() { } // Aumentar la cadena de prototipos Equilatero.prototype = Triangulo.prototype; Equilatero.prototype.tipo = "equilátero"; var equilatero = new Equilatero(); for (var prop in equilatero) { if (!equilatero.hasOwnProperty(prop)) continue; console.log(prop); // no muestra nada }
Como se habrá podido observar, for in
recorre las propiedades propias y heredadas de un objeto y por medio de hasOwnProperty
podemos diferenciar unas de otras.
La recomendación de utilizar hasOwnProperty
en los bucles for in
viene dada por este hecho, ya que si algún paquete o librería poco cuidadosa modifica el prototipo de, por ejemplo, Object
, todos nuestros bucles encontrarán esta propiedad y, muy probablemente, tengan un comportamiento no controlado.
function Triangulo() { this.a = 60; this.b = 60; this.c = 60; } var equilatero = new Triangulo(); equilatero.tipo = "equilátero"; // Se añade un método a todos los objetos Object.prototype.debug = function() { //... }; for (prop in equilatero) { console.log(prop); // a, b, c, tipo y debug }
Una forma alternativa para poder obtener sólo las propiedades propias de un objeto es utilizar Object.getOwnPropertyNames(objeto)
. Este es un método disponible desde ECMAScript 5.1 y devuelve una matriz con los nombres de las propiedades propias del objeto, sin incluir las propiedades heredadas.
function Triangulo() { this.a = 60; this.b = 60; this.c = 60; } var equilatero = new Triangulo(); equilatero.tipo = "equilátero"; Object.getOwnPropertyNames(equilatero).forEach(function(prop) { console.log(prop); // a, b, c y tipo }); Object.prototype.debug = function() { //... }; Object.keys(equilatero).forEach(function(prop) { console.log(prop); // a, b, c y tipo });
Una ventaja adicional de Object.keys(objeto)
es que podemos utilizar los métodos de manejo de matrices como forEach()
, filter()
, map()
o reduce()
.
Novedades
HTTP2 para programadores. Enviar mensajes del servidor al cliente con Server Sent Event (sin WebSockets)
En esta charla, organizada por MadridJS, Pablo Almunia nos muestra cómo la mayoría de nosotros cuando oímos hablar por primera vez de HTTP2 nos ilusionamos con las posibilidades que presumiblemente se abrían para el desarrollo de soluciones web avanzadas y cómo muchos nos sentimos defraudados con lo que realmente se podía implementar.
En esta charla podemos ver cómo funciona el HTTP2, que debemos tener en cuenta en el servidor para hace uso de este protocolo y, sobre todo, cómo podemos enviar información desde el servidor al cliente de forma efectiva y fácil. Veremos con detenimiento cómo por medio de los Server-Sent Events (SSE) podemos recibir en el cliente datos enviados desde el servidor sin utilizar websocket, simplificando enormemente la construcción de aplicaciones con comunicación bidireccional.
Observables en Javascript con Proxies
En esta charla, organizada por MadridJS, Pablo Almunia nos habla de la observación reactiva de objetos en Javascript por medio de Proxy. Se describe paso a paso cómo funcionan los Proxies y en que casos pueden ser nuestro mejor aliado. Veremos que no hay que tenerles miedo, son bastante sencillos de utilizar, y nos ofrecen una gran abanico de posibilidades.
Aplicaciones JAMStack, SEO friendly y escalables con NextJS
En esta charla de Madrid JS, Rafael Ventura nos describe las funcionalidades clave de NextJS, nos muestra en vivo cómo desarrollar una completa aplicación JAMStack con Server Side Rendering (SSR) y Static Site Generation (SSG) y termina mostrando como publicar esta aplicación en Vercel.
Stencil JS: mejora el Time To Market de tu producto, por Rubén Aguilera
En esta charla Rubén Aguilera nos cuenta los problemas que tienen muchas empresas a la hora de sacar productos accesibles, vistosos y usables en el Time To Market que requiere Negocio y cómo podemos minimizar este tiempo gracias al DevUI con StencilJS para adecuar una aplicación de Angular a las exigencias del mercado en tiempo record.