• react.png
  • angular.png
  • node.png
  • html5.png
  • php.png

Haciendo uso de Destructuring assignment en Objetos - ES6

es6.jpeg

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.

0/1000

Necesitas conectarte ó registrarte para comentar