Cómo desestructurar un objeto a variables existentes en JavaScript

Tuve este problema. Estaba llamando a una función para obtener algunos datos:

const doSomething = () => {
  return { a: 1, b: 2 }
}

const { a, b } = doSomething()

pero tuve la necesidad de envolver esto en unifbloque para ejecutar esta línea solo si el usuario está conectado, lo que mueve elconstdeclaración dentro delifblock hizo que esas variables fueran invisibles fuera de ese bloque.

Así que quería declarar esas variables primero, como variables indefinidas, y luego actualizarlas cuando llegaban los datos.

La primera parte es sencilla:

let a, b

El "complicado" viene a continuación, porque eliminamos elconstantes de la desestructuración del objeto, pero también necesitamos envolver toda la línea entre paréntesis:

let a, b

const doSomething = () => { return { a: 1, b: 2 } }

if (/* my conditional */) { ({ a, b } = doSomething()) }

Además, si eres como yo y no te gusta usar punto y coma, debes agregar un punto y comaantes dela línea, para evitar posibles problemas con paréntesis (y Prettier debería agregarla automáticamente por usted, también, si la usa):

let a, b

const doSomething = () => { return { a: 1, b: 2 } }

if (/* my conditional */) { ;({ a, b } = doSomething()) }

Esto es necesario al igual que necesitamos hacer esto cuando tenemos una IIFE (expresión de función invocada inmediatamente) como esta:

;(() => {
  //...
})()

para evitar que JavaScript confunda que el código esté en líneas separadas pero no terminado con punto y coma.


Más tutoriales de js: