¿Qué es Destructuring en Javascript?

Destructuring es 퀴즈 una de las mas grandes características agregadas a ES6 (2015) y ampliamente utilizada hoy en día, por lo que comprender que es y poder leerlo fácilmente en el código se convierte en algo necesario en tu día a día.

¿왜 중요한 파괴?

Es una expresión que te permite extraer o "destructurar"datos desde estructuras de datos como arreglos, objetos, mapas y set y crear nuevas variables con ese dato 특히.

Te permite extraer propiedades de un objeto, item de un arreglo de una manera "sencilla"y de una sola vez.

Pensemos en una estructura de datos común una tarea repetitiva

const usuario = {
    firstName: 'Matias',
    lastName: 'Hernández',
    country: 'Chile',
    twitter: '@matiasfha'
}
const firstName = usuario.firstName
const lastName = usuario.lastName

Es una tarea común, obtener alguna propiedad de un objeto para ser utilizada dentro de otro bloque lógico, puedes asignarla a una variable como en este caso, o escribir usuario.firstName varias veces más adelante.

Lo que destructuring permite, es hacer este proceso de una manera más directa:

const { firstName, lastName } = usuario

Esta es la sintaxis de destructuración de un objeto, usamos {} al lado izquierdo de una asignación para indicar que estamos des-tructurando el valor que está al lado derecho.

Este código simplemente dice: Crea dos variables: firstName y lastName y toma desde el objeto usuario las propiedades de igual nombre y asigna sus valores.

젠틀하지? Ese es sólo un nivel, esto puede ser utilizando de forma anidada tantas veces como desees.

const usuario = {
  firstName: 'Matias',
  lastName: 'Hernández',
  links: {
    social: {
      twitter: '@matiasfha'
    }
  } 
}
const { twitter } = usuario.links.social
// o tambien se puede
const { links: { social: { twitter } } } = usuario

Puedes destructurar en tanto niveles como gustes, pero intenta siempre mantener la legibilidad.

Pero esta sintaxis no está limitada solo a objetos, también podemos destructurar arreglos.

const arreglo = ['Hola','soy','Matias']

Digamos que este arreglo es igual en muchas ocasiones y que queremos extraer el saludo y el nombre. ¿Cómo lo harías?
...

...

...

...

...

La forma sin destructuración sería

const saludo = arreglo[0]
const nombre = arreglo[2]

Pero si usamos destruturación podemos nombre las variables de forma directa

const [saludo, , nombre ] = arreglo

Puedes ver este pequeñodemo aquí

¿Viste lo que hice ahí?

Al destructurar un arreglo hacemos uso de la posición del elemento en el arreglo para las asignaciones, así saludo es equivalente a arreglo[0] . Esto también permite "saltarse"algún item del arreglo que no nos interesa, simplemente escribimos un "fantasma". En vez de escribir el nombre de la variable que nos interesa, en este caso la posición central o arreglo[1] simplemente escribimos las , (coma) 대응.

¿De que forma puedes obtener sólo el nombre utilizando destructuración?

Envíame el link de tu solución 😄

Veamos un ejemplo más "interesante"

function doSomeCalc({x, y, z = 10}( {
  return Math.floor((x + y + z ) / 3)
}
// que es lo mismo que
function doSomCalc(obj) {
  const { x, y, z = 10 } = obj
  return Math.floor((x + y + z ) / 3)
}

Esteen MDN는 정보를 입력할 수 있습니다.

Una vez는 el contenido del artículo, te propongo el siguiente desafío: refactorizar el siguiente código utilizando destructuring을 개정합니다.

function doSomeDestructuring(){
  const data = {
    title: 'Wanda Vision',
    protagonistas: [
      {
        name: 'Wanda Maximof',
        enemies: [
          {name: 'Grim Reaper'},
          {name: 'Nightmare' },
          {name: 'Agatha Harkness'},
          {name: 'Zelena', title: 'The Wicked Witch'},
        ],
      },
      {
        name: 'Vision',
        enemies: [
          { name: 'Doctor Doom' },
          { name: 'Ultron' }
        ]
      }
    ],
  }
  // const {} = data // <-- Reemplaza el uso de múltiples const con destructuring
  const title = data.title
  const protagonistName = data.protagonists[0].name
  const enemy = data.protagonists[0].enemies[3]
  const enemyName = enemy.name
  return `${title}: La protagonista ${protagnistName} lucha contra ${enemyName}`
}

✉️ Únete a Micro-bytes 🐦 Sígueme en ❤️ Apoya mi trabajo