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

Comparación estricta y no estricta en Javascript

Aunque pueda parecer que comparar dos valores es algo sencillo y común, lo cierto es que comparar en Javascript conlleva algunas dificultades que debemos conocer, en especial la diferencia entre la comparación estricta y no estricta, es decir, la diferencia entre == (con sólo dos signos de igualdad) y === (con sólo tres signos de igualdad).

Sistema de pruebas minimalista en Javascript

En todos los navegadores modernos y en Node disponemos de console.assert() para comprobar el resultado de nuestras funciones y construir un sencillo conjunto de pruebas sin necesidad de instalar absolutamente nada. Es un sistema minimalista, sin dependencias y que funciona muy bien. Os animamos a conocer un poco más de esta pequeña herramienta.

Esquema de módulo Javascript para navegador y Node

Una de los requisitos cada día más común es que nuestro código debe poder funcionar sin problemas tanto en el navegador como en el servidor con Node. Esto puede parecer en principio algo sencillo, pero debemos tener en cuenta algunas características de cada uno de los entornos para construir un módulo que pueda funcionar correctamente en ambos contextos.

Progressive Web Apps – Jad Joubran

The web is becoming more and more powerful everyday, especially with the launch of Progressive Web Apps. PWAs are experiences that combine the best of the web and the best of apps. You can now build web apps that run from your home screen, receive push notifications & work offline.

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.