Seleccionar página

Cómo hemos podido observar en Propiedades propias o heredadas en los objetos y Propiedades enumerables y no enumerables, Javascript define un conjunto de condiciones que definen que resultado obtendremos con los diferentes métodos que tenemos para obtener la propiedades de un objeto.

  • for in obtiene las propiedades enumerables propias o heredadas del objeto y no obtiene las propiedades no enumerables.
  • Object.getOwnPropertyNames(objeto) obtiene las propiedades enumerables y no enumerables propias del objeto y no obtiene las propiedades heredadas.

  • Object.keys(objeto) obtiene las propiedades enumerables propias del objeto y no las propiedades no enumerables o aquellas que siendo enumerables son heredadas por la cadena de prototipos.

Parece un galimatías, pero es más sencillo de lo que parece. Hay un interesante cuadro al final de esta página de MDN donde se muestra las diferentes situaciones.

Pero, ¿cómo podemos obtener absolutamente todas las propiedades de un objeto? No disponemos de un método nativo para este propósito, pero en unas pocas lineas podemos conseguir una función para nuestro propósito.

function getPropertyNames(obj) {
    var proto = Object.getPrototypeOf(obj);
    return (
        (typeof proto === 'object' && proto !== null ? getPropertyNames(proto) : [])
        .concat(Object.getOwnPropertyNames(obj))
        .filter(function(item, pos, result) { return result.indexOf(item) === pos; })
        .sort()
    );
}

Esta compacta función permite obtener todos las propiedades efectivas de un objeto, sean o no enumerables, sean propias o heredadas. Paso a paso, esta función:

  • obtiene el prototipo del objeto por medio de Object.getPrototypeOf(obj) (función de EMCAScript 5.1 que está disponible el la mayoría de los entornos, incluido IE9 en adelante)
  • si existe el prototipo se llama recursivamente a la función
  • se obtienen una matriz con las propiedades enumerables y no enumerables propias del objeto por medio de Object.getOwnPropertyNames(obj)
  • se filtra la matriz para eliminar duplicados
  • se ordena la matriz

Vamos a ver varios ejemplos de utilización de getPropertyNames(). En este primer caso se consultan las propiedades de un objeto construido como literal y se obtienen las propiedades de Object y las propiedades definidas en el objeto.

var o = {
    a: 1, b: 2, c: 3
};
console.log(getPropertyNames(o));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'a',
//   'b',
//   'c',
//   'constructor',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Si se utiliza una función como constructor de un objeto se obtendrá igualmente las propiedades de Object y las propiedades definidas en el constructor con this.

function Person(firstname, lastname, birthday) {
        this.firstname = firstname;
        this.lastname = lastname;
}
var p = new Person('Pablo', 'Almunia', '07-08-1966');
console.log(getPropertyNames(p));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'birthday',
//   'constructor',
//   'firstname',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'lastname',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Si se utilizan clases y herencia de ECMAScript 6 nuestra pequeña función sigue devolviendo todas las propiedades definidas en los constructores, las definidas por medio de get o set, tanto de la clase instanciada como de todas las clases de las que se hereda.

class Person {
    constructor(firstname, lastname, birthday) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.birthday = new Date(birthday);
    }
    get age() {
        var ageDifMs = Date.now() - this.birthday.getTime();
        var ageDate = new Date(ageDifMs);
        return Math.abs(ageDate.getUTCFullYear() - 1970);
    }
}
class Employee extends Person {
    constructor(firstname, lastname, birthday, position) {
        super(firstname, lastname, birthday);
        this.position = position;
    }
}
var p = new Employee('Pablo', 'Almunia', '07-08-1966', 'Architect');

console.log(getPropertyNames(p));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'age',
//   'birthday',
//   'constructor',
//   'firstname',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'lastname',
//   'position',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Es cierto que en muchas ocasiones nos bastará con utilizar for in, Object.getOwnPropertyNames(objeto) o Object.keys(objeto), pero esta pequeña y sencilla función nos permite obtener en cualquier momento una matriz con todas las propiedades de un objeto, sin excepción.

Novedades

Debate: Tecnologías de Front Web [vídeo]

Desde las principales comunidades de desarrollo de tecnologías de front (Madrid JS, Polymer Madrid, Angular Madrid y VueJS Madrid) se ha organizado este debate que pretende ser un ejercicio de sentido común en relación a las tecnologías de front actuales centradas en componentes.

El microservicio más grande del mundo [vídeo]

en esta interesante charla, Felipe Polo nos cuenta cómo un servicio puede crecer manteniendo su status “micro”, manteniendo su coherencia y orden, para resolver un problema de migración desde una aplicación monolítica hasta un sistema basado en microservicios.

Web Assembly workshop by Dan Callahan [video]

Este taller (en inglés) nos adentra en WebAssembly, cómo funciona y cuándo debe usarlo. También se describe cómo usar las herramientas de creación de perfiles. Esta nueva herramienta de bajo nivel y alto rendimiento está emergiendo con fuerza y debes conocerla.

breves

Descrubir algunas características de console

En el día a día nos encontramos muy a menudo utilizando console. Es una navaja multiusos que nos facilita la vida a la hora de depurar nuestro código. La mayoría de nosotros ha utilizado console.log(), pero tiene otras muchas funcionalidades.

Matrices dispersas o sparse arrays en JS

Una característica que puede producir algunos problemas, si no lo tenemos en cuenta, es la posibilidad de tener matrices con huecos, es decir, con algunos de sus elementos sin definir. Es lo que se suele denominar una matriz dispersa o sparse array. Veamos cómo trabajar con esta características de las matrices.

Algunos operadores de bits usados con asiduidad

Cada día más a menudo podemos encontrar operadores binarios utilizados como formas abreviadas de algunas operaciones que de otra forma sería algo menos compactas y, quizás, más comprensibles. Veamos algunos casos en detalle.

Cómo diferenciar arrow function de function

En un reciente artículo Javier Vélez Reyes hace patente las principales diferencias entre las funciones tradicionales y las funciones flecha, ya que ambos modelos no son equivalentes e intercambiables. Veamos cómo es posible saber si una función ha sido construida por medio de la instrucción function o como una arrow function.