freeCodeCamp/guide/spanish/javascript/es6/destructuring/index.md

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