Teoría: Desestructuración

Cuando trabajamos con datos en JavaScript, a menudo nos encontramos con estructuras complejas de objetos que contienen otros objetos dentro. Extraer estos datos fácilmente es clave para escribir un código más organizado y legible.

En esta lección, exploraremos cómo la destructuración nos ayuda a manejar objetos anidados, facilitando la extracción de la información que necesitamos sin escribir código repetitivo.

Acceder a datos anidados

Imagina que tenemos un objeto user que contiene información de una empresa:

const user = {
  company: {
    name: "Codica",
    createdAt: "2015"
  }
};

Si queremos acceder al nombre de la empresa y su fecha de creación, podemos hacerlo así:

const greeting = `${user.company.name} fue fundada en ${user.company.createdAt}`;
console.log(greeting);

Esto funciona, pero escribir user.company.name y user.company.createdAt repetidamente puede volverse tedioso. Para hacer nuestro código más limpio, podemos definir una constante intermedia:

const company = user.company;
const greeting = `${company.name} fue fundada en ${company.createdAt}`;
console.log(greeting);

Esto ayuda un poco, pero si nuestro objeto tiene varios niveles de anidación, el código puede volverse largo y difícil de manejar.

Veamos un caso más complejo. Supongamos que tenemos una respuesta de una API con una estructura anidada:

const response = {
  data: {
    type: "photos",
    id: "550e8400-e29b-41d4-a716-446655440000",
    attributes: {
      title: "Ember Hamster",
      src: "https://example.com/images/productivity.png"
    },
    relationships: {
      author: {
        links: {
          related: "https://example.com/articles/1/author"
        }
      }
    },
    links: {
      self: "https://example.com/photos/550e8400-e29b-41d4-a716-446655440000"
    }
  }
};

Para obtener datos útiles de esta estructura, tendríamos que hacer algo como esto:

const user = response.data.attributes;
const links = response.data.links;
const author = response.data.relationships.author;

Aquí es donde la destructuración de objetos nos puede ayudar a escribir código más claro y conciso.

¿Qué es la destructuración?

const person = { firstName: "Rasmus", lastName: "Lerdorf", manager: true };

const { firstName, manager } = person;

console.log(firstName); // 'Rasmus'
console.log(manager);   // true

¿Qué hizo la destructuración aquí?

1. Creamos un objeto person con tres propiedades (firstName, lastName, manager).
2. Extraemos solo firstName y manager usando const { firstName, manager } = person.
3. Ahora podemos usar firstName y manager sin necesidad de escribir person.firstName o person.manager.

Cambiar el nombre de las propiedades

A veces, queremos cambiar el nombre de una variable cuando extraemos datos. Podemos hacerlo así:

const person = { firstName: "Rasmus", lastName: "Lerdorf", manager: true };

const { manager: isManager } = person;

console.log(isManager); // true

Aquí cambiamos manager por isManager para evitar posibles conflictos con otra variable llamada manager.

Usar valores predeterminados

Si accedemos a una propiedad que no existe, JavaScript nos devuelve undefined. Podemos evitarlo definiendo un valor por defecto:

const person = { firstName: "Rasmus", lastName: "Lerdorf" };

// Sin valor por defecto
console.log(person.manager); // undefined

// Con valor por defecto en la destructuración
const { manager = false } = person;
console.log(manager); // false

Si la propiedad manager no existe en el objeto, automáticamente tomará el valor false.

Destructuración anidada

Podemos extraer datos de objetos anidados como hicimos manualmente con response.data.attributes antes, pero de manera más eficiente:

const { links, attributes: user, relationships: { author } } = response.data;

Esto hace lo mismo que el código anterior, pero de manera más compacta y fácil de leer.

El Operador Rest (...) en la destructuración

Si queremos extraer solo algunas propiedades y guardar el resto en un solo objeto, podemos usar el operador rest (...):

const user = { name: "Miguel", email: "support@codica.io", age: 44 };

const { name, ...rest } = user;

console.log(rest);
// { email: 'support@codica.io', age: 44 }

Aquí, extraemos name y guardamos el resto de las propiedades (email y age) en el objeto rest.

Si bien la destructuración no es obligatoria, hace que nuestro código sea más limpio y fácil de entender. ¡Practica con ella y notarás la diferencia!