JavaScript — ES8 (ECMA2017)-Parte I

Temario

• Introducción
• Nuevas Características
  • Object.values
  • Object.entries
  • Object.getOwnPropertyDescriptors

i. Introducción

Esta story es la continuación de:

• JavaScript — Historia, Estándar & Motores [ref]
• ES6 — ES2015 (I[ref], II[ref],III[ref],IV[ref],V[ref])
• ES7 — ES2016[ref]

Vamos a ver qué novedades nos trae la edición ES8 (ES2017) de JavaScript.

Importante: Hay que tener en cuenta que es posible que NO TODOS los navegadores modernos admitan estas “nuevas” funcionalidades, por lo que te sugiero primero validar las versiones de los mismos antes de subir a producción. Si estas usando algún transpilador (ej. Babel) no deberás preocuparte.

ii. Nuevas Características

01. Object.values [ref]

Si una estructura de datos de JavaScript tiene claves y valores, quiere decir que es una entrada de clave-valor, por lo tanto podemos decir que es un arreglo de dos elementos.

JavaScript hasta este momento solo teníamos la opción de obtener las claves de propiedad enumerables del objeto dado, con el método Object.keys:

Con Object.values nos va retornar un arreglo de todos los valores de propiedad propios del objeto enumerables del objeto dado.

Sintaxis —

Donde:

• obj[obligatorio]- Es un objeto con propiedades pares (clave-valor)

Ejemplo 1 —

Podemos observar que:

• La línea 1 tenemos el objeto country
• Con Object.values en la línea 8 podemos obtener todos los valores enumerables del objeto country

Ejemplo 2—

Podemos observar que:

• Object.values también funciona con arreglos (línea 3), esto quiere decir que se puede pasar un arreglo como argumento, en lugar de un objeto, y como resultado, obtendremos un nuevo arreglo de valores.

Soporte [ref] —

No olvidemos que… —

• Nos retorna en un arreglo los valores enumerables del objeto dado.
• También funciona con arreglos.

02. Object.entries [ref]

Object.entries(x) convierte a x en un objeto donde va a devolver las entradas de sus propiedades enumerables con clave de cadena.

Este método es bastante útil ya que nos permite iterar sobre las propiedades de un objeto de manera segura.

Nota: Puedes ocupar for...in [ref] para iterar un objeto, aunque no se recomienda [ref][ref] (Pista: for…in enumera propiedades en la cadena de prototipo)

Sintaxis —

Donde:

• obj [obligatorio] — Objeto cuyos pares de propiedades [clave, valor] enumerables deben ser devueltos.

Ejemplo 1 —

Podemos observar que:

• Que Object.entries nos va a retornar un arreglo de arreglos, donde cada sub arreglo tiene pares de propiedades [clave, valor] enumerables.

Finalmente el objeto podemos iterarlo con for...of, forEach o cualquier iterador de arreglos.

Soporte [ref] —

No olvidemos que… —

• Si vamos a iterar objetos, como buena práctica se sugiere utilizar Object.entries .
• NO enumera propiedades de la cadena de prototipo.
• Object.entries para obtener pares de propiedades [clave, valor].
• Object.values para obtener valores de propiedad enumerables.
• Object.keys para obtener claves de propiedad enumerables.

03. Object.getOwnPropertyDescriptors [ref]

Sabemos que cualquier objeto en JavaScript tiene un conjunto de propiedades que a su vez cada un de estas propiedades tiene un descriptor.

Un descriptor es un conjunto de atributos de una propiedad, que esta compuesto por lo siguiente:

• value — El valor de la propiedad
• writeable — true si la propiedad puede cambiar
• get — Una función getter para la propiedad, y es llamada cuando se lee la propiedad
• set — Una función setter para la propiedad, y es llamada cuando a la propiedad se le establece un valor
• configurable — false si la propiedad no se puede eliminar, ni cambiar ningún atributo, excepto su valor.
• enumerable — true si la propiedad es enumerable

Entonces ,el método Object.getOwnPropertyDescriptors retorna todos los descriptores de propiedades propias (no heredadas) de un objeto.

Sintaxis —

Donde:

• obj [obligatorio] — El objeto que se quiere obtener todos los descriptores

Ejemplo 1 —

Podemos observar que:

• En la línea 8 estamos obteniendo todos los descriptores de las propiedades de un objeto, y los mostramos en consola en la línea 10, hasta podemos acceder a cada uno de ellos (línea 21)

Ejemplo 2 —

El método getOwnPropertyDescriptors es muy útil al momento de crear copias de un objeto, quizás, me dirás :

“Oye Mau, pero ya pero ya existe object.assign[ref] para copiar objetos…”

Es bastante correcta tu observación, pero recuerda que el método assign copia todas las propiedades enumerables propias de uno o más objetos y retorna un nuevo objeto, es decir NO copia correctamente las propiedades con atributos NO predeterminados.

Veamos el siguiente ejemplo:

Podemos observar que:

• Los descriptores de person1y person2 son totalmente diferentes (línea 10 y 13)
• El objeto person2 pierde el método descriptor get ya que assign copia todas las propiedades enumerables propias

Para evitar esto, usamos Object.getOwnPropertyDescriptors (continuando con el ejemplo de arriba)

Podemos observar que:

• Los descriptores de person1y person3 son exactamente los mismos (línea 8 y 11)

Soporte [ref] —

No olvidemos que… —

• getOwnPropertyDescriptors retorna todos los descriptores de propiedades propias (no heredadas) de un objeto
• Es bastante útil para copiar los descriptores de otro objeto.
• No funciona copiar o mover a aquellos objetos que tengan el método super a otro objeto, por lo que aún tiene sus límites.

Bibliografía y links que te puede interesar…

JavaScript — ES7 (ECMA2016)

JavaScript — Historia, Estándar & Motores

JavaScript — ES6 (Parte I)

JavaScript — ES6 (Parte II)

JavaScript — Symbols & Generadores ES6 (Parte III)

JavaScript — Map, Set, Proxy, Reflect & Export modules ES6 (Parte IV)

JavaScript — Class ES6 (Parte V)

Object.values() - JavaScript | MDN

Object.entries() - JavaScript | MDN

Object.getOwnPropertyDescriptors() - JavaScript | MDN