8.1 Object Destructuring
Destructuring in JavaScript is a syntax that allows unpacking values from arrays or properties from objects into separate variables. It makes the code cleaner and more readable. In this lecture, we'll dive into object and array destructuring, as well as various examples and their applications.
1. Basic Syntax
Object destructuring allows extracting property values from an object and assigning them to variables:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Outputs: John
console.log(age); // Outputs: 30
console.log(isStudent); // Outputs: false
2. Assigning to New Variables
You can assign object property values to variables with different names:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Outputs: John
console.log(personAge); // Outputs: 30
3. Default Values
If a property doesn't exist in the object, you can set default values:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Outputs: true
4. Nested Destructuring
You can extract values from nested objects:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Outputs: New York
console.log(country); // Outputs: USA
5. Destructuring in Function Parameters
You can use destructuring in function parameters:
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Outputs: Hello, my name is John and I am 30 years old.
8.2 Array Destructuring
1. Basic Syntax
Array destructuring allows extracting element values from an array and assigning them to variables:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Outputs: apple
console.log(second); // Outputs: banana
console.log(third); // Outputs: cherry
2. Skipping Elements
You can skip elements in the array that you don't want to extract:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Outputs: apple
console.log(third); // Outputs: cherry
3. Default Values
You can set default values for array elements:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Outputs: banana
4. Nested Destructuring
You can extract values from nested arrays:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Outputs: 2
console.log(three); // Outputs: 3
5. Destructuring in Function Parameters
You can use destructuring in function parameters for arrays:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Outputs: John Doe
8.3 Examples of Using Destructuring
1. Swapping Variable Values
Destructuring allows you to easily swap variable values:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Outputs: 2
console.log(b); // Outputs: 1
2. Extracting Data from Objects
Destructuring simplifies extracting data from objects, such as from an API response:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Outputs: John Doe
console.log(email); // Outputs: john@example.com
3. Default Settings in Functions
Destructuring makes it easy to set default values for function parameters:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Outputs: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Outputs: { name: 'Anonymous', age: 0, isAdmin: false }
4. Arrays and Functions
Destructuring simplifies working with arrays, especially when using array methods:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Outputs: 1
console.log(second); // Outputs: 2
console.log(rest); // Outputs: [3, 4, 5]
GO TO FULL VERSION