ES6 - Destrucción de objetos

Introducción

Muchas veces necesitamos extraer el valor de algún objeto en JavaScript:

const alumno = {nombre : "Matheus", 
                edad : "23", 
                correo : "[email protected]"
              };

console.log(alumno.nombre);
console.log(alumno.edad);
console.log(alumno.email);

Vea que para imprimir información simple de un JSON que representa a un estudiante, se necesitaron 3 líneas de código. Además, fíjate que en tres de las cuatro líneas tenemos una gran repetición de código, que sería la variable donde se almacena el objeto JSON.

Una tarea que a veces es muy repetitiva y prolija... Con todos estos recursos que ha ido ganando JavaScript, y siendo esta una tarea muy común en el día a día, ¿no existe una forma más sencilla y menos prolija como esta?

Destrucción del objeto

Teniendo en cuenta nuestro ejemplo inicial, una de las formas de acortar nuestro código sería devolver los atributos del objeto de una vez, y luego, de esa manera, los llamaríamos sin necesidad de un objeto. ¿Pero es esto posible? Sí es posible, para eso el JavaScript en la versión ES6 lanzó la llamada “Desestructuración de objetos”, con el objetivo de facilitar esta tarea de extraer valores referentes a un determinado objeto, pero ¿cómo sería esta nueva extracción?

const aluno = {nombre : "Matheus", 
               edad : "23", 
               correo : "[email protected]"
               };

const {nombre, edad, correo} = alumno;
console.log(nombre);
console.log(edad);
console.log(correo);

Vea que en una sola línea logramos obtener el valor de todos los atributos de nuestro objeto y crear una variable para ellos, pero después de todo, ¿cómo fue posible imprimir el valor referente a los datos del estudiante? Primero, veamos la estructura de nuestro objeto, podemos ver que hay tres piezas de información dentro de él, a saber: Nombre, Edad y Correo electrónico, respectivamente, los mismos nombres que nuestras variables informadas dentro de las teclas del lado izquierdo. Entonces, básicamente, la desestructuración de objetos sigue la siguiente sintaxis:

[{Variables}] = [Objeto en JSON];

Entonces significa que si tenemos un objeto:

const proveedor = {nombresocial : "Alura - Cursos en líne", 
                    dirección : "00.000.000", 
                    correo : "[email protected]"
                    };                    

"¿Es suficiente informar en el lado derecho el nombre de los campos dentro de las claves que pretendo obtener?"

Sí, dentro de las llaves es donde asociamos los campos que pretendemos extraer de un determinado objeto JSON.

Por ejemplo, si solo queremos obtener la razón social del objeto proveedor, podemos hacerlo de la siguiente manera:

const {nombresocial} = proveedor;
console.log(nombresocial);

De esta manera podemos extraer solo la información que necesitamos, es decir, podemos pasar N campos dentro de nuestro objeto.

Cuidado con la Destrucción de Objetos

Al principio, desestructurar un objeto parece resolver todos nuestros problemas, ¿no? Pero, ¿y si reportamos un campo que no existe?

const {dirección} = proveedor;
console.log(dirección);

Como de costumbre, JavaScript no encontrará el campo con el nombre que ingresamos, ya que no existe. Por lo tanto, la asociación no se realizará. En otras palabras, la variable tendrá el valor undefined.

Pero, ¿qué pasa si recibimos el siguiente objeto?

const json = {a : "Matheus", 
              b : "23", 
              c : "[email protected]"
              };

Vean que para nosotros este objeto es un estudiante donde a, b y c son información de su nombre, edad y correo respectivamente, ¿en este caso tendremos que crear variables con estos nombres sin sentido?

¡Afortunadamente no! El equipo responsable de desarrollar la funcionalidad ya pensó en esto y creó el recurso para hacer referencia a un objeto pero cambiando su nombre al crear la variable:

const {a:nombre, b:edad, c:correo} = json;
console.log(nombre);
console.log(edad);
console.log(correo);

Fíjate que ahora informamos de qué campo queremos extraer la información de nuestro JSON, y lo pasamos a una nueva variable con el nombre justo después de los dos puntos, siguiendo la siguiente sintaxis:

[{Campo_de_objeto:Nombre_para_variable}] = [Objeto];

Sería lo mismo que hacer:

const nombre = json.a;
const edad = json.b;
const correo = json.c;
console.log(nombre);
console.log(edad);
console.log(correo);

¡Vea de nuevo cómo ahorramos líneas y hacemos que nuestro código sea mucho menos detallado! Pero entonces, ¿deberíamos usar esta desestructuración siempre que necesitemos extraer información de JSON?

Creo que deberíamos usarlo siempre que necesitemos ahorrar verbosidad. Esto significa que, si necesitamos obtener solo una parte de la información, puede que no sea tan ventajoso utilizar dicha función.

Desventajas de usar la Destrucción de Objetos

Bien, ahora ya mostré las ventajas, ya di ejemplos para nosotros... ¿Y dónde están las desventajas?

Aunque es menos detallado, en algunas situaciones la desestructuración puede aumentar la complejidad del código, haciéndolo un poco más complicado si no está acostumbrado a la nueva funcionalidad.

Otro punto a destacar es que cuando usamos la desestructuración siempre asignamos los valores deseados a las variables, por lo tanto, cuando una ya no se use, será necesario borrarla manualmente.

Por último, pero no menos importante... Como se menciona en el artículo, cuando pasamos el nombre de un atributo que no existe dentro de nuestro objeto, la variable se vuelve undefined.

Para saber más

Por último, también podemos usar funciones de desestructuración, imagina que tenemos una función encargada de imprimir la información de nuestros alumnos:

function imprimeDatosDelAlumno(alumno) {
    console.log(alumno.nombre);
    console.log(alumno.edad);
    console.log(alumno.correo);
}
imprimeDatosDelAlumno(aluno);

Para evitar repetir la variable estudiante, podemos usar la nueva funcionalidad:

function imprimeDatosDelAlumno({nombre, edad, correo}) {
    console.log(nombre);
    console.log(edad);
    console.log(correo);
}
imprimeDatosDelAlumno(alumno)

Tanto en funciones como en llamadas tendremos el mismo resultado.

Escrito por Matheus Castiglioni.

Adaptado para Alura Latam por Daiana Righi.