Destructuring JS

JavaScript es sin duda uno de los lenguajes de programación más populares en la actualidad. Y no es de extrañarnos, ya que JS lo podemos encontrar en todos lados, destacando por supuesto tanto del lado del cliente como del servidor

Aunado a esto, el crecimiento que ha tenido el lenguaje en cuanto a actualizaciones y nuevos features ha hecho que JS sea un lenguaje cada vez más robusto. Podemos hacer mucho más con menos líneas de código.

Un claro ejemplo de esto es el tema de destructuring, o por su traducción al español, desestructuración, que nos permite descomponer estructuras complejas en elementos más simples.

Este es, desde mi punto de vista, uno de los features más cool que podemos encontrar en el lenguaje. Es por ello que, en esta ocasión, me gustaría ahondar en ello.

Bien, sin más dilación, comencemos con el tema.

Destructuring

Para comprender el tema de Destructuring partamos de un ejemplo. Imaginemos que tenemos un objeto como el siguiente.

let  user = {
  name: 'User1',
  age: 34,
  city: 'Ciudad de México', 
  postalCode: '0001',
  phoneNumber: '555-333-222-111',
  gender: 'Female',
};

En este caso la variable user intenta representar a un usuario. Vemos que este usuario posee un par de atributos, tales como: nombre, edad, ciudad, etc…

Hasta aquí todo bien.

Ahora ¿Qué pasa si deseamos obtener el valor de un par de estos atributos, por ejemplo nombre, ciudad y genero?

Para ello en primera instancia podemos hacer algo como lo siguiente:

const name = user.name;
const city= user.city;
const gender = user.gender;

Para este caso, hemos definido 3 nuevas constantes, una para cada uno de los atributos.

Esto funciona, sin embargo podemos obtener el mismo resultado utilizando una sintaxis mucho más amigable, por ejemplo, con destructuring.

const { name, city, gender } = user;

Para este nuevo ejemplo hemos usado una sola línea de código, y aun así hemos generado 3 nuevas constantes.

Ahora es el intérprete quien intuye que valores se quieren obtener de la variable user, esto utilizando únicamente como nombre de las constantes el nombre de los atributos a obtener.

Simplemente agrupamos las constantes en un juego de llaves y asignamos el valor del cual queremos descomponer.

Esto lo que hará es que los valores se asignen con sus correspondientes constantes, permitiéndonos trabajar con valores más sencillos de una forma eficiente y con muchas menos líneas de código.

Y por supuesto, si imprimimos en consola obtendremos los valores que necesitamos.

const { name, city, gender } = user;

console.log(name); // 'User1'
console.log(city); // 'Ciudad de México'
console.log(gender); // 'Female'

Algo bastante cool, no lo crees?

Y espera esto no termina aquí, con destructuring también podemos asignar valores predeterminados en caso de que no se encuentren los valores correspondientes.

let  user = {
  name: 'User1',
  age: 34,
};

const { name, age, city= 'Madrid' } = user;

Por ejemplo aquí, donde el user no posee ciudad, bueno, simplemente asignamos un valor. Esto funciona bastante bien cuando trabajamos con una cantidad pequeña de constantes/valores.

---

Ahora, si bien esto es interesante, dejame decirte que esto no termina aquí, ya que el mismo principio podemos trasladarlo a los arreglos.

Imaginemos el siguiente escenario, donde tenemos una arreglo de, por ejemplo 4 valores, donde queremos almacenar cada uno de estos valores en constantes o variables diferentes, vamos a hacer un desacoplamiento, para ello también es posible implementar destructuring, quedando el código de la siguiente manera.

numbers = [100, 200, 300, 400]
const {one, two, three, four} = numbers

Letras finales.

Ya para finalizar me gustaría concluir que, si bien el destructuring permite reducir líneas de código y que el proyecto sea legible, esto funciona bastante bien solo cuando deseamos obtener un par de atributos de un objeto, ya que si intentamos obtener una gran cantidad de atributos, quizás 10, 100, o muchos más, bueno, allí el código se puede tornar mucho más complejo, ya que tendríamos N constantes en una sola línea de código.

Además, el destructuring puede dar lugar a errores de referencia si no se realiza correctamente. Si la estructura de datos que se está desestructurando no contiene la propiedad o el índice que se está intentando asignar a una variable, se producirá un error.

En resumen, aunque el destructuring es una característica muy útil de JavaScript, es importante utilizarlo con moderación y comprender sus limitaciones para evitar errores y mantener un código claro y legible.