ES6 - Desestructuración de objetos

Introducción

A menudo 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.correo);

Observa que para imprimir información simple de un JSON representando a un alumno se necesitaron 3 líneas de código. Además, nota que en tres de las cuatro líneas tenemos una gran repetición de código, que es la variable donde se almacena el objeto JSON.

Una tarea a veces muy repetitiva y verbosa...

Con todos estos recursos que JavaScript está obteniendo, y esta siendo una tarea muy común en el día a día, ¿no habrá una forma más simple y menos verbosa como esta?

Desestructuración de objetos

Teniendo en cuenta nuestro ejemplo inicial, una de las formas de reducir nuestro código sería devolver los atributos del objeto de una vez, y luego, de esta forma, podríamos llamarlos sin la necesidad de un objeto. ¿Pero será que esto es posible?

Sí, es posible, para eso JavaScript en la versión ES6 lanzó la llamada "Desestructuración de objetos", con el objetivo de facilitar esta tarea de extracción de valores referentes a un objeto determinado, ¿pero cómo sería esta nueva extracción?

const alumno = {nombre : "Matheus", 
               edad : "23", 
               correo : "[email protected]"
               };
const {nombre, edad, correo} = alumno;
console.log(nombre);
console.log(edad);
console.log(correo);

Observa que en una sola línea logramos obtener el valor de todos los atributos de nuestro objeto y crear una variable para ellos, pero en fin, ¿cómo fue posible imprimir el valor referente a los datos del alumno?

En primer lugar, fijémonos en la estructura de nuestro objeto, podemos notar que dentro de él existen tres informaciones, siendo ellas: Nombre, Edad y Email, respectivamente los mismos nombres de nuestras variables informadas dentro de las llaves en el lado izquierdo. Entonces, básicamente, la desestructuración de objetos sigue la siguiente sintaxis:

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

Entonces, ¿quiere decir que si tenemos un objeto:

const proveedor = {razonsocial : "Alura - Cursos Online", 
                    cnpj : "00.000.000/0000-00", 
                    correo : "[email protected]"
                    };

"¿Basta con informar en el lado derecho el nombre de los campos dentro de las llaves que quiero obtener?"

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

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

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

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

Cuidados con la Desestructuración de Objetos

En principio, desestructurar un objeto parece resolver todos nuestros problemas, ¿verdad? ¿Pero qué pasa si informamos un campo que no existe?

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

Como de costumbre, JavaScript no encontrará el campo con el nombre que informamos, ya que no existe. Por lo tanto, no se realizará la asociación. 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]"
              };

Note que para nosotros este objeto se refiere a un estudiante donde a, b y c son información referente a su nombre, edad y correo electrónico respectivamente, ¿en este caso tendremos que crear variables con estos nombres sin significado?

¡Afortunadamente no! El equipo responsable del desarrollo de la funcionalidad ya ha pensado en esto y ha creado el recurso para hacer referencia a un objeto pero cambiando su nombre en la creación de la variable:

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

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

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

Sería lo mismo que hacer:

codeconst 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 hemos ahorrado líneas y hemos hecho nuestro código mucho menos verboso! ¿Pero entonces debemos usar esta tal desestructuración siempre que necesitemos extraer información de JSON?

Creo que debemos usarlo siempre que necesitemos ahorrar en verbosidad. Esto significa que, si necesitamos obtener solo una información, tal vez no sea tan ventajoso utilizar este recurso.

Desventajas en el uso de la Desestructuración de Objetos

Bien, ya hemos visto las ventajas y dado ejemplos de cómo utilizarlo... ¿Pero dónde están las desventajas?

Aunque es menos verboso, en algunas situaciones la destructuración puede aumentar la complejidad del código, haciendo que sea un poco más complicado si no estás acostumbrado a la nueva funcionalidad.

Otro punto a destacar es que al utilizar la desestructuración, siempre asignamos los valores deseados a variables. Por lo tanto, cuando ya no se utilice una variable, será necesario eliminarla manualmente.

Por último, pero no menos importante... Como ya se mencionó en el artículo, cuando pasamos el nombre de algún atributo que no existe dentro de nuestro objeto, la variable se convierte en undefined.

Para saber más

Para finalizar, también podemos utilizar la desestructuración en funciones. Imagina que tenemos una función responsable de imprimir la información de nuestros alumnos:

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

Para evitar la repetición de la variable alumno, podemos utilizar la nueva funcionalidad:

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

En ambas funciones y llamadas, obtendremos el mismo resultado.

Si estás interesado en conocer un poco más sobre la historia de JavaScript, hay un post que hice en mi blog.

Aquí en Alura Latam tenemos una Formación Front-End en la que enseñamos JavaScript desde lo básico hasta lo avanzado, pasando por la interacción con elementos del DOM, la programación funcional y las pruebas.

Autor: Matheus Castiglioni