8.1 Desestructuración de objetos
La desestructuración en JavaScript es una sintaxis que permite desempaquetar valores de arrays o propiedades de objetos en variables separadas. Esto hace que el código sea más limpio y fácil de leer. En esta lección vamos a ver en detalle la desestructuración de objetos y arrays, además de varios ejemplos y su aplicación.
1. Sintaxis básica
La desestructuración de objetos permite extraer valores de propiedades de un objeto y asignarlos a variables:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Mostrará: John
console.log(age); // Mostrará: 30
console.log(isStudent); // Mostrará: false
2. Asignación a nuevas variables
Es posible asignar los valores de las propiedades del objeto a variables con otros nombres:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Mostrará: John
console.log(personAge); // Mostrará: 30
3. Valores por defecto
Si una propiedad no existe en el objeto, se pueden establecer valores por defecto:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Mostrará: true
4. Desestructuración anidada
Es posible extraer valores de objetos anidados:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Mostrará: New York
console.log(country); // Mostrará: USA
5. Desestructuración en parámetros de función
Se puede usar la desestructuración en los parámetros de una función:
function greet({ name, age }) {
console.log(`Hola, mi nombre es ${name} y tengo ${age} años.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Mostrará: Hola, mi nombre es John y tengo 30 años.
8.2 Desestructuración de arrays
1. Sintaxis básica
La desestructuración de arrays permite extraer valores de los elementos de un array y asignarlos a variables:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Mostrará: apple
console.log(second); // Mostrará: banana
console.log(third); // Mostrará: cherry
2. Omitir elementos
Es posible omitir elementos de un array que no se necesitan extraer:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Mostrará: apple
console.log(third); // Mostrará: cherry
3. Valores por defecto
Se pueden establecer valores por defecto para los elementos de un array:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Mostrará: banana
4. Desestructuración anidada
Es posible extraer valores de arrays anidados:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Mostrará: 2
console.log(three); // Mostrará: 3
5. Desestructuración en parámetros de función
Se puede usar la desestructuración en los parámetros de función para arrays:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Mostrará: John Doe
8.3 Ejemplos de uso de desestructuración
1. Intercambio de valores de variables
La desestructuración permite intercambiar fácilmente valores de variables:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Mostrará: 2
console.log(b); // Mostrará: 1
2. Extracción de datos de objetos
La desestructuración simplifica la extracción de datos de objetos, por ejemplo, de una respuesta API:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Mostrará: John Doe
console.log(email); // Mostrará: john@example.com
3. Configuración por defecto en funciones
La desestructuración permite establecer fácilmente valores por defecto para los parámetros de funciones:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Mostrará: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Mostrará: { name: 'Anonymous', age: 0, isAdmin: false }
4. Arrays y funciones
La desestructuración facilita trabajar con arrays, especialmente al usar métodos de arrays:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Mostrará: 1
console.log(second); // Mostrará: 2
console.log(rest); // Mostrará: [3, 4, 5]
GO TO FULL VERSION