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

JSDayES en directo

Sigue en directo las charlas y talleres del impresionante JSDayES 2017. Ponentes de primer orden, tanto nacionales como internacionales, nos mostrarán todos los aspectos de Javascript. El viernes 12 de mayo de 16:00 a 21:00 y el sábado 13 de mayo de 9:30 a 21:00 (hora de Madrid).

The CITGM Diaries by Myles Borins [video]

Myles Borins de Google, miembro del CTC de Node.js (Node.js Core Technical Committee), nos cuenta (en inglés, por supuesto) como funciona CITGM (Canary In The Gold Mine), una herramienta que permite obtener un módulo de NPM y probarlo usando una versión específica de NodeJS.

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.

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.