Object destructuring JavaScript

Table of contents

No heading

No headings in the article.

Object destructuring es la sintaxis de asignación usada para desempaquetar las propiedades de un objeto y asignarlas a nuevas variables.

const obj = {
  id: "6377cb237d5bb428666e226c",
  age: 29,
  name: "Bass Bush",
  gender: "male",
  email: "bassbush@eclipsent.com",
  location: {
    city: "Walton",
    state: "Louisiana"
  }
}
const { name, email, location: { city } } = obj
console.log(name)
console.log(email)
console.log(city)
// Bass Bush
// bassbush@eclipsent.com
// Walton

Pero que pasa si necesitas usar el resto de las propiedades en otro objeto, para eso existe el operador rest, que como su nombre sugiere va a tomar las propiedades restantes, este operador se especifica asi ...variable

const obj = {
  id: "6377cb237d5bb428666e226c",
  age: 29,
  name: "Bass Bush",
  gender: "male",
  email: "bassbush@eclipsent.com",
  location: {
    city: "Walton",
    state: "Louisiana"
  }
}
const { name, email, location: { city }, ...other } = obj
console.log(name)
console.log(email)
console.log(city)
// Bass Bush
// bassbush@eclipsent.com
// Walton
// {id: '6377cb237d5bb428666e226c', age: 29, gender: 'male'}

¿Y que pasa con los array?

const fruits = ["apple", "orange",  "pear", "banana", "peach"]
const [a, b, ...c] = fruits
console.log(a)
console.log(b)
console.log(c)
// apple
// orange
// ['pear', 'banana', 'peach']