1.8 KiB
title | localeTitle |
---|---|
Destructuring Assignment | Asignación de destrucción |
Asignación de destrucción
La sintaxis de asignación de destrucción es una expresión de JavaScript que permite desempaquetar valores o propiedades de matrices u objetos.
Digamos que tiene una matriz que contiene un nombre y un apellido, ya que son dos valores, pero desea reasignar esos valores a algo más descriptivo. Puedes usar Destructura para lograr esto.
ES5 Destructurante
var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];
console.log(firstName, lastName); // John Smith
ES6 Destructura
const fullName = ["John", "Smith"];
const [firstName, lastName] = fullName;
console.log(firstName, lastName); // John Smith
Los ejemplos anteriores muestran el beneficio de usar la asignación de destrucción ES6.
También puede usar la destrucción en objetos usando una sintaxis similar
const fullName = { first: "John", last: "Smith"};
const {first, last} = fullName;
console.log(first, last); // John Smith
La asignación de destrucción de objetos es un poco diferente porque el objeto debe tener propiedades con los nombres que está asignando. Por lo tanto, el siguiente código no funcionaría como se esperaba.
const fullName = { first: "John", last: "Smith"};
const {firstName, lastName} = fullName;
console.log(firstName, lastName); // undefined undefined
Aún puede lograr el resultado deseado usando la siguiente sintaxis.
const obj = {propertyName: value}
{propertyName: desiredVariableName} = obj
Nuestro ejemplo anterior sería reescrito de la siguiente manera:
const fullName = { first: "John", last: "Smith"};
const {first: firstName, last: lastName} = fullName;
console.log(firstName, lastName); // John Smith