Desestructuración de arreglos,objetos y parámetros en JavaScript

Introducción

La desestructuración es una sintáxis corta y limpia para asignar/almacenar elementos de un arreglo, o propiedades de un objeto, a distintas variables.

Si quisieramos almacenar valores de un arreglo sin usar la sintaxis de desestructuración haríamos algo asi:

const arreglo = ['a','b'];

const variabUno = arreglo[0];
const variabDos = arreglo[1];

//variabUno y variabDos valdrían 'a' y 'b' respectivamente

Si quisieramos almacenar propiedades de un objeto sin usar la sintaxis de desestructuración:

const usuario= {
    email: 'curcoVein@gmail.com',
    password: 'iLoveCourtnEy',
    name: 'Kurt',
    surname: 'Cobain',
    died : 1994
}

const nombreUsuario = usuario.name;
const passUsuario = usuario.password;

Pero como veremos abajo, esta asignación de elementos de un array a una variable se hacer mucho más sencilla con la sintaxis de desestructuración.

Sintaxis y ejemplos

Necesitamos especificar const o let (el tipo de nuestras variables), seguido de corchetes [] (para indicar que estamos desestructurando. Dentro de estos van nuestras variables), seguido del simbolo = y el arreglo a desestructurar.

Desestructuración de arreglos

const arreglo = ['a','b'];

const [variabUno,variabDos] = arreglo;

// variabUno,variabDos tendrían el valor de 'a' y 'b' respectivamente.

También podemos usar el operador rest ... en la sintaxis de desestructuración:

const arreglo = ['a','b','c','d'];

const [variabUno,variabDos,...resto] = arreglo;

// variabUno,variabDos valdrian 'a' y 'b' y resto sería el arreglo ['c','d']

Desestructuración de objetos

const usuario= {
    email: 'curcoVein@gmail.com',
    password: 'iLoveCourtnEy',
    name: 'Kurt',
    surname: 'Cobain',
    died : 1994
}

const {email,password} = usuario;

/* Las variables correo y password tendrían el valor de 'curcoVein@gmail.com'
 y 'iLoveCourtnEy' respectivamente */

En este caso, las variables tienen que corresponder al nombre de la propiedad que queremos extraer de nuestro objeto.

Renombrando variables

En caso de que queramos renombrar nuestras variables para que no tengan el mismo nombre que la propiedad de nuestro objeto podemos escribir:

const {email: correo, password: contrasenia} = usuario;
/* Las variables correo y contrasenia 
tendrían el valor de usuario.email y usuario.password respectivamente */

Valores por defecto

Supongamos que tenemos un segundo objeto de tipo usuario, pero este carece de la propiedad died por ejemplo. Podriamos establecer un valor por defecto a esa propiedad.

const usuario2= {
    email: 'scarlettjo@gmail.com',
    password: 'scarlesitaA123',
    name: 'Scarlett',
    surname: 'Johansson'
}

const {email: correo, password: contrasenia, died = N/A} = usuario2;

Esta asignación sólo se puede hacer si la propiedad no existe dentro del objeto.

Desestructuración de parámetros

Cuando estamos definiendo una función, al escribir nuestros parámetros dentro de los paréntesis, podemos desestructurar los valores que se le pasan.

Esto frecuentemente se usa con objetos.

// Esta función espera un objeto de tipo usuario.
function nombreCompleto ({name:nombre,surname:apellidos}){
    return `${nombre} ${apellidos}`;
}

nombreCompleto(usuario2);

// retorna Scarlett Johansson

Al desestructurar directamente en los parámetros, también podemos asignar un valor por defecto a una propiedad como hemos visto anteriormente.

Desestructuración y métodos de arreglo

Es muy común usar la desestructuración de objetos en los métodos de arreglo como por ejemplo forEach() o map(). Miremos un ejemplo :

let peliculas = [
    {
    titulo:'Uncharted',
    lanzamiento: '18/2/2022',
    nota: 72
    },
    {
    titulo:'The Batman',
    lanzamiento: '4/3/2022',
    nota: 82
    },
    {
    titulo:'Alien, el octavo pasajero',
    lanzamiento: '24/9/1979',
    nota: 81
    }
    ]

    peliculas.map( ({titulo,lanzamiento,nota}) => {
        return `${titulo} (${lanzamiento}) tiene una nota de ${nota}`;
    });

   /* Retorna 
 Array(3) [ "Uncharted (18/2/2022) tiene una nota de 72",
 "The Batman (4/3/2022) tiene una nota de 82",
 "Alien, el octavo pasajero (24/9/1979) tiene una nota de 81" ] */

Dev.lucas