Introducción
La desestructuración es una característica que permite extraer propiedades de objetos y asignarlas a variables.
(Voluntario) Lee el artículo Desestructuración de objetos.
Desestructuración Básica de Objetos
1
2
3
const o = { p: 42, q: true, a: { r: 20, s: 'abc' } };
const { p, q } = o;
console.log(p, q); // 42 true
Salida:
1
42 true
Desestructuración con Nuevos Nombres
Se pueden asignar nuevos nombres a las variables extraídas:
1
2
const { p: foo, q: bar } = o;
console.log(foo, bar); // 42 true
Salida:
1
42 true
Desestructuración de Objetos Anidados
También se pueden desestructurar objetos anidados y cambiar el nombre de las variables:
1
2
3
4
5
(()=>{
const { a } = o;
const { a: { r: R } } = o;
console.log(a, R); // { r: 20, s: 'abc' } 20
})()
Salida:
1
{ r: 20, s: "abc" } 20
Desestructuración de Arrays
La desestructuración también se aplica a arrays, permitiendo extraer elementos en variables individuales:
1
2
3
4
5
6
7
(()=>{
const foo = ['uno', 'dos', 'tres'];
const [rojo, amarillo, verde] = foo;
console.log(rojo); // "uno"
console.log(amarillo); // "dos"
console.log(verde); // "tres"
})()
Salida:
1
2
3
uno
dos
tres
Desestructuración en Funciones
La desestructuración puede ser muy útil en funciones para extraer valores de objetos pasados como argumentos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const user = {
id: 42,
displayName: "jdoe",
fullName: { firstName: "John", lastName: "Doe" }
};
function userId({ id }) {
return id;
}
function whois({ displayName, fullName: { firstName: name } }) {
return `${displayName} es ${name}`;
}
console.log(userId(user)); // 42
console.log(whois(user)); // "jdoe es John"
Salida:
1
2
42
jdoe es John
(Voluntario) Lee el artículo https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#examples.