Destructuración es una nueva característica de ES6 que nos da la posibilidad de poder coger los datos de objetos o arrays directamente y de manera múltiple, para extraerlos a variables o constantes. Hay varios tipos:
La instrucción: const [llave, valor] = cookie.split('='); es una instrucción de destructuración de arrays, una característica que llegó a JavaScript en ES6 y que hace el código mucho más limpio.
El método .split('=') corta el texto de la cookie por el signo igual y devuelve un array con exactamente dos elementos. Por ejemplo, si la cookie es "usuario = Carlos", el resultado de split es ["usuario", "Carlos"].
Sin destructuración, para guardar esos dos datos en variables habrías tenido que escribir esto:
Con la destructuración, extraes los elementos de esa "caja" (el array) y los asignas a variables individuales en una sola línea, basándote en su posición:
Se pueden ignorar elementos: Si solo interesara el valor y se quisiera pasar de la llave, se puede dejar el espacio vacío separado por una coma:
Valores por defecto: Si por alguna razón la cookie no tuviera un signo = (lo que dejaría la segunda posición como undefined), se le puede asignar un valor de respaldo:
Imaginemos un objeto que representa a un usuario. En lugar de escribir usuario.nombre y usuario.edad por todos lados, se pueden extraer esos datos directamente, usando llaves {}:
Si no se quiere que la variable resultante se llame exactamente igual que la propiedad del objeto (tal vez porque ya tienes otra variable con ese nombre), es posible renombrarla usando los dos puntos ::
Esta es una combinación de la destructuración de objetos. Se puede destructurar un objeto directamente en los argumentos de una función, antes de que empiece el código.
📍 React > Props
Esto se usa muchísimo en frameworks modernos como React para recibir sus famosas Props.
Si se tiene un objeto complejo con más objetos en su interior, es posible navegar hasta el último nivel, en una sola línea:
Tanto en arrays como en objetos, es posible utilizar los tres puntos ... (operador Rest) para decirle a JavaScript: "Guárdame estas propiedades específicas, y todo lo demás que sobre, mételo en una bolsa aparte".