¿Destructuring?

Pensarás que es una técnica muy difícil de entender y muy compleja de utilizar en el día a día. Pensarás que casi nunca lo llegarás a utilizar en una aplicación. O que tendrás que instalar una librería muy pesada en tu proyecto. Nada más lejos de la realidad. Es muy sencillo, muy útil y rápido de utilizar. Tanto que no necesitas instalar nada en tu aplicación porque forma parte del lenguaje.

Vale, te creo. ¿Cómo funciona?

El destructuring es una técnica que permite extraer datos de un objeto o de un array de forma muy elegante. Además, evitas poner magic numbers en el código para extraer posiciones concretas de un array, hasta cierto límite.

Destructuring con objetos

Te pongo un ejemplo con un objeto:

// Supongamos que buscamos un usuario en nuestra base de datos
const user = await User.findById(id);

// Y ahora del usuario, sólo nos interesa quedarnos con algunos datos
// En este caso, queremos quedarnos con el nombre, email y contraseña
const { name, email, password } = user;

// ¿Sencillo no?
console.log(name);
console.log(email);
console.log(password);

Como puedes ver en el ejemplo anterior, el destructuring utiliza la sintaxis de objeto { } para extraer los datos en nuevas variables. Así la variable name tendrá el valor del nombre del usuario, email el valor del email del usuario y password el valor de la contraseña del usuario.

También podemos acceder a objetos dentro de otro objeto:

// Supongamos que buscamos un usuario en nuestra base de datos
const user = await User.findById(id);

// Y en este ejemplo queremos la dirección del usuario que, a su vez contiene, una dirección
const { address: { street, city } } = user;

// ¿Sencillo no?
console.log(street);
console.log(city);

En este caso, hay que tener más cuidado porque address puede ser undefined y eso provocaría un error al intentar acceder a una propiedad de un objeto que no está definido.

Destructuring con arrays

Vale, también te dije que podíamos usar destructuring para extraer datos de un array de forma elegante. Vamos con el ejemplo:

// En este caso, tenemos un array de usuarios que tenemos en la base de datos
const users = await User.find();

// Queremos quedarnos con el primer usuario
const [user] = users;

Al poner el [user], el destructuring extrae el primer usuario del array y lo guarda en la variable user.

Otro ejemplo para quedarnos con el segundo usuario:

const users = await User.find();

// Queremos quedarnos con el segundo usuario

// FEO:
const user = users[1];

// ELEGANTE:
const [, user] = users;

¡OJO! Hay que comprobar que el array no esté vacío y que contenga al menos los elementos que queremos extraer con el destructuring.

Al poner la coma en el [, user], el destructuring extrae el segundo usuario del array y lo guarda en la variable user.

Y por otro lado, ¿que pasa si queremos quedarnos con el resto de usuarios o de propiedades de un objeto? Con el resto me refiero a que quiero quitar una propiedad de un objeto o un array y quedarme con las demás. Vamos con ello.

Excluir una propiedad de un objeto

Para excluir propiedades de un objeto hay que utilizar el operador spread. Muy probablemente dedique otro post para verlo pero de momento podemos ver unas pinceladas en este post.

Vamos con el ejemplo:

// En nuestra base de datos tenemos un usuario con toda la información
// Sin embargo, no queremos devolver la contraseña (aunque esté encriptada). Para no exponer esta información.

// ¿Cómo podemos hacerlo?
const user = await User.findById(id);

// En este caso, queremos quedarnos con todo el usuario excepto la contraseña
const { password, ...partialUser } = user;

// Y lo que devolveremos en la API será la variable: partialUser
console.log(partialUser); // Tendrá todo el usuario excepto la contraseña

// ¿Sencillo no?

Excluir un elemento de un array

Para excluir un elemento de un array podemos utilizar destructuring con el operador spread. Pero, tiene algunas restricciones y es que sólo podemos quitar elementos desde el inicio. Veamos como:

// En nuestra base de datos tenemos un array de usuarios con toda la información
const users = await User.find();

// En este caso, queremos quedarnos con todos los usuarios excepto el primero
const [user, ...otherUsers] = users;

// Y lo que devolveremos en la API será la variable: otherUsers
console.log(otherUsers); // Tendrá todos los usuarios excepto el primero

Lo que NO podemos hacer es quedarnos con el último usuario porque el spread operator no puede ponerse al principio del array, sólo puede ponerse al final.

// En nuestra base de datos tenemos un array de usuarios con toda la información
const users = await User.find();

// En este caso, queremos quedarnos con todos los usuarios excepto el último
const [...otherUsers, user] = users; // ¡ERROR! Uncaught SyntaxError: Rest element must be last element

Estoy seguro de que a partir de ahora no pararás de utilizar este método para extraer información de un objeto o para quedarte con el resto de elementos de un array.

¡Nos vemos programando!

Así que aquí van las que para mí son las librerías más útiles que más utilizo y que, sin duda, deberías conocer para hacer frente a tantísima cantidad de datos. Con ellas podrás modificar, filtrar, ordenar, hacer cálculos, re-estructurar la información, etc.

Lodash

Lodash es la librería por excelencia para el control y manejo de colecciones y arrays pero no solo eso. Lodash es mucho más. Tiene multitud de funciones, muy sencillas de utilizar, que sirven para hacer operaciones matemáticas, comparadores del lenguaje, operaciones con strings y muchas más utilidades. Si no la has utilizado nunca, estoy seguro de que te sorprenderá. Es cierto que muchas funcionalidades que aporta se encuentran nativas en el lenguaje de JavaScript pero aun así es una librería que te puede ayudar a hacer lo que quieras.

Comunmente se importa como _ y así es muy fácil de identificar en toda la aplicación.

Aquí te dejo algunos ejemplos de uso de Lodash y te invito a que escribas en los comentarios cuál es la función de lodash que más útil te resulta:

const _ = require('lodash');

const zeroToTen = _.range(0, 10); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

const tenToZero = _rangeRight(0, 10); // [ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]


const multipleOfTwo = _.filter(zeroToTen, n => n % 2 === 0); // [ 0, 2, 4, 6, 8 ]


const player = {
	name: 'John',
	age: 30,
	isAlive: true,
	email: undefined,
	address: {
		street: 'Main Street',
		number: 123,
		city: 'New York',
		country: 'USA'
	}
}

const name = _.get(player, 'name'); // John

const street = _.get(player, 'address.street'); // Main Street

const email = _.get(player, 'email', 'no-email-provided'); // no-email-provided

Bluebird.js

Otra gran librería que te puede ayudar a hacer frente a muchos datos y que te permite hacer operaciones asíncronas. De esta forma no tienes que esperar a que se complete una operación para continuar con otra. Bluebird también permite que operaciones síncronas como las anteriores que hemos visto en Lodash sean asíncronas. Y en los ejemplos te explicaré como hacerlo.

Bluebird tiene una documentación un poco más complicada que la de lodash pero aún así es sencilla de entender y cuando hagas unos cuantos ejemplos te resultará algo muy práctico. Yo suelo importar el paquete como Bluebird y así es muy fácil de identificar en toda la aplicación.

const Bluebird = require('bluebird');
const _ = require('lodash');

(async () => {
	// Esta función simplemente es para utilizar async/await

	const zeroToTen = _.range(0, 10); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
	const sum = await Bluebird.reduce(zeroToTen, (acc, n) => acc + n, 0);

	console.log(sum); // 45
})();

En el ejemplo anterior de Bluebird estoy utilizando la función reduce de Bluebird. Esta función nos permite recorrer el array anterior zeroToTen y además, aplicar una función a cada elemento del array. En este caso, la función recibe dos parámetros: el primer parámetro es el acumulador, el segundo es el elemento actual del array. En este caso, la función es la suma de los elementos del array.

En el siguiente ejemplo, te muestro como utilizarlo con un array de objetos:

const Bluebird = require('Bluebird');
const axios = require('axios');

(async () => {
	const pokemonsResponse = await axios.get('https://pokeapi.co/api/v2/pokemon/');
	const pokemons = pokemonsResponse.data.results;

	const mappedByName = await Bluebird.reduce(pokemons, async (acc, pokemon) => {
		
		// Obtenemos la información de este pokemon
		const response = await axios.get(pokemon.url);

		// Obtenemos los campos que nos interesan del objeto pokemon
		const { id, name, weight, types } = response.data;

		return {
			// Muy importante devolver el contenido del acumulador!
			...acc,
			// Agregamos el nuevo elemento al acumulador
			[name]: {
			 	id,
				name,
				weight,
				types
			}
		};
	}, {});

	console.log(mappedByName);
})();

Dime en los comentarios qué te han parecido estas dos librerías, si las conocías o no y cuales son las que librerías que más utilizas tu. Espero que te haya resultado interesante el post. Si ha sido así, compártelo con otros usuarios. Nos vemos en el siguiente post.