Deconstrucción

Curso de Javascript Online. Desde cero.

11.  
14.  
19.  
26.  

Nos permite almacenar los valores de una entidad compleja (un array o un objeto) en variables independientes.

Deconstrucción de array

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Deconstrucción de un objeto

const obj = {a: 1, b: 2, c: 3};
const {a, b, c } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Importar un objeto y deconstruirlo

funciones.js
export const saltar = () => console.log('saltar');

export const correr = () => console.log('correr');

import { saltar, correr } from funciones;

Importar todos los exports de un módulo

// En el siguiente caso, misFunciones será un objeto normal, cuyas propiedades serán los exports del módulo importado
import * as misFunciones from 'funciones';

// Para poder usarlos, tendré dos opciones: 

const { saltar, correr } = misFunciones;
// o usar misFunciones.saltar y misFunciones.correr

Rest operator/ spread operator (…)

Spread operator

Permite expandir los elementos de un array u objeto en otro del mismo tipo.

const a = [1,2,3];

const b = [...a, 4,5,6]; // [1, 2, 3, 4, 5, 6]

Rest operator

Permite agrupar varios elementos de un array u objeto en una única variable.

Rest operator en los parámetros de una función. Aplicado a los parámetros de una función, el Rest Operator siempre junta los parámetros en un array.

function doMath(operator, ...numbers) {
	console.log(operator); // add
	console.log(numbers); // [1, 2, 3]
}
 
doMath('add', 1, 2, 3);

Rest operator en una deconstrucción

const a = { letterA: 'a', letterB: 'b', letterC: 'c' };

const { letterB, ...otherLetters } = a;
const c = { ...otherLetters }; 
console.log(c); // // letterA, letterC
← Javascript Reduce
Colección de ejercicios de manipulación de arrays →