Una de las nuevas características que más he estado utilizando es el destructuring. Esta nueva sintaxis es muy útil para asignar valores de propiedades de un objeto a una variable.[more]

Por ejemplo, supongamos que tenemos un objeto con información de un usuario:

const user = {
  name: 'Crysfel Villa',
  about: 'Just me!',
  address: {
    country: 'US',
    state: 'NY',
  },
};

Ahora bien, si quisiéramos acceder a la propiedad state que está dentro de address, lo más normal es hacerlo de la siguiente manera.

const address = user.address;
const state = address.state;

console.log(state);

Con la nueva sintaxis podemos hacerlo un poco diferente, por ejemplo:

const { address } = user;

console.log(address);

Y con eso crearemos una constante address, que contendrá como valor user.address. Interesante, cierto? Ahora intentemos usar esta misma sintaxis para acceder a la propiedad state.

const { address: { state } } = user;

console.log(state);

Lo que ha sucedido aquí es que hemos creado una constante state, esta constante contendrá como valor NY, ya que sacará su valor de user.address.state.

En el ejemplo anterior, es importante mencionar que únicamente se creará la constante state, no se creará una constante address.

Renombrando la constante

En muchas ocaciones me ha sucedido que necesito renombrar la constante que voy a generar usando la nueva sintaxis. Esto es muy sencillo, y lo podemos hacer de la siguiente manera.

const { address: { state: myState } } = user;

console.log(myState);

Como se puede observar, para asignar un nuevo nombre usamos los dos puntos. Las reglas son las siguientes:

1. Si después de los dos puntos le asignamos un objeto, esto significa que estamos intentando acceder a un objeto dentro de user.
2. Si por otro lado, unicamente le asignamos un identificador, este será el nombre que recivirá la nueva constante.

Esto realmente se usa?

En los últimos meses he estado usando React.js y React Native de manera intensa. Personalmente veo muy útil esta nueva sintaxis, ya que en una sola línea se pueden sacar varios valores de un objeto, por ejemplo:

const { name, address: { country } } = this.state;

En react, el código anterior es muy común para acceder a información dentro del estado del componente, de los props o de cualquier otro objeto que se necesite.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!