DevPath · Aprende a programar ESPTEN

JavaScript moderno (ES6+)

Desestructuración

Desestructuración (destructuring)

La desestructuración permite "desempaquetar" valores de arrays y objetos en variables independientes de forma breve.

Desestructurar arrays

const coordenadas = [10, 20];
const [x, y] = coordenadas;
console.log(x, y); // 10 20

Se asignan por posición. Puedes saltarte elementos con comas:

const [primero, , tercero] = ["a", "b", "c"];
console.log(primero, tercero); // "a" "c"

Desestructurar objetos

Aquí se asignan por nombre de propiedad:

const persona = { nombre: "Ana", edad: 30 };
const { nombre, edad } = persona;
console.log(nombre, edad); // "Ana" 30

Renombrar y valores por defecto

const { nombre: n, pais = "España" } = persona;
console.log(n);    // "Ana"
console.log(pais); // "España" (no existía, usa el valor por defecto)

La desestructuración es muy habitual al recibir parámetros en funciones:

function saludar({ nombre }) {
  return "Hola, " + nombre;
}
saludar({ nombre: "Luis" }); // "Hola, Luis"

Ejemplos

Intercambiar variables con desestructuración

let a = 1;
let b = 2;
[a, b] = [b, a]; // truco moderno para intercambiar
console.log(a, b); // 2 1
Pon esto en práctica

DevPath es un curso práctico: aquí lees la teoría; en la app la pones en práctica con ejercicios que se ejecutan de verdad, sin conexión.

Empezar gratis en la app →
Spread y rest (...) →