No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
15H
23M
50S

ES6: asignación de desestructuración

8/38
Recursos

La desestructuración (destructuring) consiste en extraer los valores de arrays o propiedades de objetos en distintas variables.

Desestructuración de objetos

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'

Cambiar el nombre de las variables con desestructuración

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

Desestructuración en parámetros de una función

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" }

function mostrarDatos( { nombre, edad, plataforma } ){
    console.log(nombre, edad, plataforma) 
}

mostrarDatos(usuario) // 'Andres', 23, 'Platzi'

Desestructuración de arrays

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

Desestructuración para valores retornados de una función

Cuando una función retorna un array, puedes guardarlo en una variable. Por ende, puedes utilizar la desestructuración para utilizar esos valores por separado de manera legible.

En el siguiente ejemplo, la función useState retorna un array con dos elementos: un valor y otra función actualizadora.

function useState(value){
    return [value, updateValue()]
}

//Sin desestructuración 
const estado = useState(3)
const valor = estado[0]
const actualizador = estado[1]

//Con desestructuración 
const [valor, actualizador] = useState(3)

Lo que puedes hacer con desestructuración, pero no es recomendable

Si necesitas un elemento en cierta posición, puedes utilizar la separación por comas para identificar la variable que necesitas.

const array = [ 1, 2, 3, 4, 5 ]

const [ ,,,,  cinco ] = array

console.log(cinco) // 5

Como los arrays son un tipo de objeto, puedes utilizar la desestructuración de objetos mediante el índice y utilizando un nombre para la variable.

const array = [ 1, 2, 3, 4, 5 ]

const {4: cinco} = array

console.log(cinco) // 5

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 14

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Otro truco para acceder a otros elementos de un arreglo que no sean los primeros es utilizar comas para saltar los lugares:

// arrays destructuring
let fruits = ['Apple', 'Banana', 'Orange'];
let [,,fruit] = fruits;

console.log(fruit); /*arroja "Orange"*/

La desestructuración es de las coas más geniales que le paso al lenguaje, sin duda un feature de lo más útil.

Recuerda los tipos:

En la MDN hay ejemplos súper locos de como usarlo:

Hola [email protected]
ES6

  • Asignación de desestructuración
// arrays destructuring

let fruits = ["Apple", "Banana"];
let [a, b] = fruits;
// Opcion 1
console.log(a, b);
// Opcion 2
console.log(a, fruits[1]);

// Object destructuring

let user = { username: "Alexa", age: 34 };
let { username, age } = user;
// Opcion 1
console.log(username, age);
// Opcion 2
console.log(username, user.age);

Resumen!
Asignación de Desestructuración
la Desestructuración permite desarmar objetos y asignarle a cada elemento una variable distinta
ejemplo:

Asignación de Desestructuración
la Desestructuración permite desarmar objetos y asignarle a cada elemento una variable distinta
ejemplo:

DESESTRUCTURACIÓN DE ARRAYS

let frutas = ['Manzana', 'Pera'];
let [roja, verde] = frutas;
console.log(roja, verde);

DESESTRUCTURACIÓN DE OBJETOS

let user = { username: 'Julian', age:28 };
let { usuario , edad } = user;
console.log (usuario, edad);

otro ejemplo que encontre en Mozzilla:

let a, b, rest;

[a, b] = [10, 20];

//console.log

console.log(a);

// output esperado: 10

console.log(b);

// output esperado: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);

// expected output: Array [30,40,50]

De los mejores features que se implementaron, algo muy usado en React

const [value, setValue] = useState()

Hola compañeros
Me gustaría compartirles una extensión de VS code que en lo personal me gusta mucho usar cuando hacemos este tipo de ejercicios en los que no estamos estructurando una página como tal sino entendiendo un concepto.

  • La extensión en cuestión se llama Better Comments

  • Por otra parte les dejo el repositorio en el que actualmente estoy trabajando este curso y un pedazo del código por si les interesa

    • Repositorio: https://github.com/PaconcioDev/ecmascript-practice

    • Una parte de lo que llevo de código

      •   //* Array destructuring
          let fruits = ["Apple", "Banana"];
          let [a, b] = fruits;
        
          console.log(a, b);
          console.log(a, fruits[1]);
          //! Both console logs will return "Apple Banana"
        
          //* Object destructuring
          let user = { userName: "Paco", age: 19 };
          console.log(user.userName, user.age);
        
          let { userName, age } = user;
          console.log(userName, age);
        
          //! Both console logs will return "Paco 19" but the second one is using object destructuring so we can use the property names instead "Object.property"
        
        
        

Otra ejemplo de una manera practica de acceder a los atributos que nos interesan:

// For of iteration and destructuring
const people = [
    {
      name: 'Mike Smith',
      family: {
        mother: 'Jane Smith',
        father: 'Harry Smith',
        sister: 'Samantha Smith',
      },
      age: 35,
    },
];
  
for (const { name: n, family: { father: f } } of people) {
    console.log(`Name: ${n}, Father: ${f}`);
}

Aquí en la MDN está un artículo sobre como se realiza la desestructuración.
.
También sobre la desestructuración de objetos

//arrays destructuring
let fruits = ["Apple", "Banana"];
let [a, b] = fruits;
console.log(a, b);


//object destructuting
const person = {
  lasName: "Ccoyllo",
  age: 25,
  country: "PE",
};

console.log(person);
const { lasName, age, country } = person;

console.log(`My name is  ${lasName}, 
I have ${age}. I am from ${country}`);

Comparto como complemento de unas notas mías respecto a destructuring en objetos:

const cliente03 = {
  a: 'Ezequiel',
  b: 'Das',
  c: 'Av Rivadavia 1540',
  d: 'Centro',
  e: 1586902510
}

const {c: address, a: names, b: lastname} = cliente03;
// Podemos asignar con qué key del objeto queremos que se guarde el valor de la variable sin importar el orden

console.log (names);
console.log (lastname);
console.log (address);

Ojo con copiar elementos, porque hay varias veces que al hacer esto, realmente estamos llamando a su posicion de memoria.

¿Por qué no puedo usar = para copiar una matriz?

Debido a que las matrices en JS son valores de referencia, cuando intente copiarlas usando el = solo copiará la referencia a la matriz original y no el valor de la matriz. Para crear una copia real de una matriz, debe copiar el valor de la matriz en una nueva variable de valor. De esa forma, esta nueva matriz no hace referencia a la dirección de la matriz anterior en la memoria.

const sheeps = ['🐑', '🐑', '🐑'];

const fakeSheeps = sheeps;
const cloneSheeps = [...sheeps];

console.log(sheeps === fakeSheeps);
// true --> it's pointing to the same memory space

console.log(sheeps === cloneSheeps);
// false --> it's pointing to a new memory space

Repositorio github del profe → Archivo manejado en la clase:

Desestruturando Campos de objetos pasados como funcion
const player = {
id:0001,
displayName:‘CR7’,
fullName:{
firstName:“Cristiano Ronaldo”,
lastname:“Aveiro”
}
}

function playerId({id}){
return id;
}

function whois({displayName,fullName:{firstName:name}}){
return ${displayName} es ${name}
}

console.log(playerId(player))
console.log(whois(player))