Saltar al contenido principal

Desestructuración

La desestructuración es una característica que permite extraer valores de arrays o propiedades de objetos en variables separadas, haciendo que el código sea más limpio y fácil de leer. A continuación, exploraremos cómo funciona la desestructuración tanto para objetos como para arrays, así como el uso del operador de propagación (spread) y el operador de parámetros rest.

Desestructuración de objetos​

La desestructuración de objetos facilita la extracción de propiedades específicas de un objeto y asignarlas a variables con el mismo nombre de propiedad. Esto reduce la necesidad de acceder manualmente a cada propiedad.

const persona = {
  nombre: 'Carlos',
  edad: 28,
  ciudad: 'Madrid'
};

const { nombre, edad } = persona;
console.log(nombre); // 'Carlos'
console.log(edad);   // 28

También es posible asignar propiedades a variables con nombres diferentes:

const { nombre: nombrePersona, ciudad: lugar } = persona;
console.log(nombrePersona); // 'Carlos'
console.log(lugar);         // 'Madrid'

Desestructuración de arrays​

La desestructuración de arrays permite asignar elementos de un array a variables de forma directa. A diferencia de la desestructuración de objetos, el orden de los elementos es crucial.

const numeros = [10, 20, 30];
const [primero, segundo] = numeros;
console.log(primero); // 10
console.log(segundo); // 20

Se pueden omitir valores utilizando comas:

const [,, tercero] = numeros;
console.log(tercero); // 30

Operadores​

En Javascript, el operador ... tiene dos usos principales:

  • Como operador de propagación (spread).
  • Como operador de parámetros rest.

Operador de propagación (spread)​

El operador de propagación se utiliza para expandir un array u objeto en elementos individuales, lo que permite crear nuevas copias de estructuras de datos o combinarlas fácilmente.

En arrays, el operador spread puede usarse para copiar o combinar arrays:

const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4, 5];
console.log(nuevosNumeros); // [1, 2, 3, 4, 5]

En objetos, spread facilita la clonación y combinación de propiedades de diferentes objetos:

const persona = { nombre: 'Carlos', edad: 28 };
const direccion = { ciudad: 'Madrid', pais: 'España' };
const perfil = { ...persona, ...direccion };
console.log(perfil); // { nombre: 'Carlos', edad: 28, ciudad: 'Madrid', pais: 'España' }

Operador rest (...)​

El operador rest se usa para agrupar el resto de los elementos o propiedades en una sola variable. En arrays, permite capturar varios elementos en un solo array.

const [primero, ...resto] = [1, 2, 3, 4];
console.log(primero); // 1
console.log(resto);   // [2, 3, 4]

En objetos, rest captura el resto de las propiedades no desestructuradas en un nuevo objeto.

const { nombre, ...otrosDatos } = { nombre: 'Carlos', edad: 28, ciudad: 'Madrid' };
console.log(nombre);      // 'Carlos'
console.log(otrosDatos);  // { edad: 28, ciudad: 'Madrid' }

Este operador también se utiliza en funciones para aceptar un número indefinido de argumentos.

function sumar(...numeros) {
  return numeros.reduce((acc, num) => acc + num, 0);
}

console.log(sumar(1, 2, 3, 4)); // 10

La combinación de la desestructuración y los operadores de propagación/rest facilita una manipulación de datos más flexible y eficiente en JavaScript.