La desestructuración (destructuring) consiste en extraer los valores de arrays o propiedades de objetos en distintas variables.
La desestructuración de objetos implica extraer las propiedades de un objeto en variables. Mediante el mismo nombre de la propiedad del objeto con la siguiente sintaxis:
const objeto = {
prop1: "valor1",
prop2: "valor2",
...
}
// Desestructuración
const { prop1, prop2 } = objeto
Antes de ES6, necesitabas acceder al objeto con la notación punto o corchetes por cada propiedad que se necesita y asignar ese valor a una variable diferente.
var usuario = { nombre: "Andres", edad: 23, plataforma: "Platzi" }
var nombre = usuario.nombre
var edad = usuario.edad
var plataforma = usuario["plataforma"]
console.log(nombre) // 'Andres'
console.log(edad) // 23
console.log(plataforma) // 'Platzi'
Con la desestructuración puedes realizar lo mismo, pero en una sola línea, provocando que el código seas más legible y mantenible.
const usuario = { nombre: "Andres", edad: 23, plataforma: "Platzi" }
const { nombre, edad, plataforma } = usuario
console.log(nombre) // 'Andres'
console.log(edad) // 23
console.log(plataforma) // 'Platzi'
Si no te agrada el nombre de la propiedad del objeto, puedes cambiarlo utilizando la siguiente sintaxis:
const objeto = { prop1: "valor1", prop2: "valor2", ... }
// Desestructuración
const { prop1: newProp1, prop2: newProp2 } = objeto
Por ejemplo:
const usuario = { nombre: "Andres", edad: 23, plataforma: "Platzi" }
const { nombre: name, edad: age, plataforma: platform } = usuario
console.log(name) // 'Andres'
console.log(age) // 23
console.log(platform) // 'Platzi'
console.log(nombre) // Uncaught ReferenceError: nombre is not defined
Si envías un objeto como argumento en la invocación a la declaración de una función, puedes utilizar la desestructuración en los parámetros para obtener los valores directamente. Ten en cuenta que el nombre debe ser igual a la propiedad del objeto.
const usuario = { nombre: "Andres", edad: 23, plataforma: "Platzi" }
functionmostrarDatos( { nombre, edad, plataforma } ){
console.log(nombre, edad, plataforma)
}
mostrarDatos(usuario) // 'Andres', 23, 'Platzi'
La desestructuración de arrays consiste en extraer los valores de un array en variables, utilizando la misma posición del array con una sintaxis similar a la desestructuración de objetos.
const array = [ 1, 2, 3, 4, 5 ]
// Desestructuración
const [uno, dos, tres ] = array
console.log(uno) // 1
console.log(dos) // 2
console.log(tres) // 3