Hola chicos el día de hoy les voy a hablar sobre el uso de Destructuring en objetos. Si bien, Destructuring assignment por su definición es una expresión de ES6 que hace posible la extracción de arreglos (Array) u objetos utilizando una sintaxis que equivale a la construcción de arreglos y objetos literales.

 

Si quieres aprender sobre Destructuring en arreglos te recomiendo la siguiente publicación “Destructuring en Arrays”.

Normalmente si quisiéramos acceder a alguna propiedad de un objeto hacemos lo siguiente:

const person = {
  firstName: 'Cristina',
  secondName: 'Elizabeth',
  cellphone: 123456,
  city: 'USA',
};
 
const first = person.firstName;
const second = person.secondName;
const cell = person.cellphone;
const city = person.city;
 
console.log('first --->', first); // Cristina
console.log('second --->', second); // Elizabeth
console.log('cell --->', cell); // 123456
console.log('city --->', city); // USA
 

Sin embargo hacerlo así nos pudiera formar mucho código repetitivo y estar creando variables para acceder a propiedades del objeto que están dentro de nodos, etc.

Con Destructuring podemos tener un código menos enredoso y más limpio. Lo que estamos haciendo en el siguiente código es colocando las propiedades del objeto dentro de corchetes e igualándolas al objeto, esta seria la sintaxis de destructuring:

const { firstName, secondName } = person; // Destructuring syntax
 

Ejemplo:

const person = {
  firstName: 'Cristina',
  secondName: 'Elizabeth',
  cellphone: 123456,
  city: 'USA',
};
 
// const { propiedad, propiedad } = objeto
const { firstName, secondName } = person; // Sintaxis Destructuring
 
console.log('firstName --->', firstName); // firstName ---> Cristina
console.log('secondName --->', secondName); // secondName ---> Elizabeth
 

Ok, vamos bien, ahora si queremos podemos asignar nuestras propiedades que ya tenemos a una variable, por ejemplo:

const person = {
  firstName: 'Cristina',
  secondName: 'Elizabeth',
  cellphone: 123456,
  city: 'USA',
};
 
// const { propiedad: nombreVariable, propiedad: nombreVariable } = objeto
const { firstName: first, secondName: second } = person;
 
console.log('first --->', first); // first ---> Cristina
console.log('second --->', second); // second ---> Elizabeth
 

Muy bien, otro caso de uso del Destructuring que podemos encontrarnos es cuando nuestro objeto tiene varios nodos, por ejemplo:

const cristina = {
  firstName: 'Cristina',
  lastName: 'Rojas',
  links: {
    social: {
      twitter: 'http://twittter.com/telecristy',
      facebook: 'telecristy'
    },
    web: {
      blog: 'Codejobs',
      youtube: 'Codejobs'
    }
  }
};
 

 
Con Destructuring podemos acceder fácilmente a las propiedades de que tiene los nodos del objeto, por ejemplo:

const cristina = {
  firstName: 'Cristina',
  lastName: 'Rojas',
  links: {
    social: {
      twitter: 'http://twittter.com/telecristy',
      facebook: 'telecristy'
    },
    web: {
      blog: 'Codejobs',
      youtube: 'Codejobs'
    }
  }
};
 
// const {nodo: {nodo, nodo}}
const { links: { social, web } } = cristina;
 
console.log('object', cristina);
console.log('links', social); // {twitter: "http://twittter.com/telecristy", facebook: "telecristy"}
console.log('web', web); // {blog: "Codejobs", youtube: "Codejobs"}
 

Si queremos acceder directamente a las propiedades de nuestro último nodo, lo haríamos de la siguiente manera:

const cristina = {
  firstName: 'Cristina',
  lastName: 'Rojas',
  links: {
    social: {
      twitter: 'http://twittter.com/telecristy',
      facebook: 'telecristy'
    },
    web: {
      blog: 'Codejobs',
      youtube: 'Codejobs'
    }
  }
};
 
// const {nodo: {nodo: {propiedad, propiedad}}}
const { links: { social: {twitter, facebook} } } = cristina;
 
console.log('object', cristina);
console.log('twitter', twitter); // http://twittter.com/telecristy
console.log('facebook', facebook); // telecristy
 

Un placer,
@telecristy.

¿Te gustó esta publicación? Márcala como favorita