ECMAScript 6 introdujo una nueva manera de extraer propiedaded de objetos a variables al mismo tiempo. Aprender a utilizarlo con Javascript y Typescript y mejora tu manera de escribir código para que sea más legible y limpio.

En este artículo aprenderás:

1. ¿Qué es la desestructuración en Javascript y Typescript?
2. Sintaxis con objetos
3. Sintaxis con arreglos
4. Algunos casos de uso

¿Qué es la desestructuración en Javascript y Typescript?

"La sintaxis de desestructuración es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables." (Fuente)

En palabras más simples: la sintaxis de desestructuración nos hace más fácil declarar variables a partir de las propiedades de un objeto.

Sintaxis con objetos

Sintaxis con arreglos

Algunos casos de uso

1. Intercambiar valores en un arreglo

const arreglo = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const intercambiado = intercambiar(arreglo, 3, 9);
console.log(intercambiado); // [ 1, 2, 3, 10, 5, 6, 7, 8, 9, 4 ]

Sin Desestructuración:

function intercambiar(arreglo, i, j) {
  const copia = [...arreglo];
  const temp = copia[i];
  copia[i] = copia[j];
  copia[j] = temp;
  return copia;
}

Con Desestructuración:

function intercambiar(arreglo, i, j) {
  const copia = [...arreglo];
  [copia[i], copia[j]] = [copia[j], copia[i]];
  return copia;
}

2. Separar objetos

const coches = {
    jetta: {color: 'gris', modelo: '2021', precio: '10,000 USD'},
    golf: {color: 'azul', modelo: '2019', precio: '9,000 USD'},
    tiguan: {color: 'blanco', modelo: '2023', precio: '15,000 USD'}
    touareg: {color: 'negro', modelo: '2017', precio: '16,000 USD'},
}

Sin Desestructuración:

Si no sabes acerca de forEach(), hablo extensivamente de él aquí

const jetta = coches.jetta;
const otros = {};
Object.entries(coches).forEach(([llave, valor]) => {
  if (llave != "jetta") {
    otros[llave] = valor;
  }
});
console.log(jetta);
// { color: 'gris', modelo: '2021', precio: '10,000 USD' }
console.log(otros);
// {
//   golf: { color: 'azul', modelo: '2019', precio: '9,000 USD' },
//   tiguan: { color: 'blanco', modelo: '2023', precio: '15,000 USD' },
//   touareg: { color: 'negro', modelo: '2017', precio: '16,000 USD' }
// }

Con Desestructuración:

const { jetta, ...otros } = coches;
console.log(jetta);
// { color: 'gris', modelo: '2021', precio: '10,000 USD' }
console.log(otros);
// {
//   golf: { color: 'azul', modelo: '2019', precio: '9,000 USD' },
//   tiguan: { color: 'blanco', modelo: '2023', precio: '15,000 USD' },
//   touareg: { color: 'negro', modelo: '2017', precio: '16,000 USD' }
// }

3. Propiedades en React

Sin Desestructuración: Con Desestructuración: