Introduction
Hi everyone! Today, we’re going to learn about destructuring in JavaScript.
It’s a powerful feature that helps us work with objects and arrays more easily.
So what is Destructuring?
Destructuring helps us grab values from arrays or objects and put them into separate variables. This makes our code easier to read and write.
Let’s start with a simple example for basic destructuring using an array.
const colors = [‘red’, ‘green’, ‘blue’];
Traditionally for accessing and assigning the values using arrays we use indexes.
For eg: for getting first and second colors we will do colors[0] and colors[1]
Implementation:
const firstColor = colors[0];
const secondColor = colors[1];
console.log(firstColor, secondColor); // red green
With destructuring, we can do this in one line:
const [firstColor, secondColor] = colors;
console.log(firstColor, secondColor); // red green
Object Destructuring
Now, let’s look at objects. Here’s a traditional way to access properties:
Let’s say we have an object car with properties as brand and model
const car = { brand: ‘Toyota’, model: ‘Camry’ };
const make = car.brand;
const model = car.model;
console.log(brand, model); // Toyota Camry
With destructuring, we can simplify this as follows:
const { brand, model } = car;
console.log(brand, model); // Toyota Camry
Default Values
Destructuring also allows us to set default values.
If a property doesn’t exist, we can provide a default value.
For example:”
const user = { name: ‘Bob’ };
const { name, age = 25 } = user;
console.log(name, age); // Bob 25
Nested Destructuring:
We can also use destructuring for nested objects.
Let’s say we have a nested object:”
const user = {
name: ‘Alice’,
address: {
city: ‘Wonderland’,
country: ‘Dreamland’
}
};
Traditionally we can access nested properties like this:
const city = user.address.city;
const country = user.address.country;
console.log(city, country); // Wonderland Dreamland
Or we can use nested destructuring:
const { address: { city, country } } = user;
console.log(city, country); // Wonderland Dreamland
What if we want to rename variables while destructuring?
We can do that too!
Let’s have a look at this examples:
const car = { brand: ‘Toyota’, model: ‘Camry’ };
const { make: carBrand, model: carModel } = car;
console.log(carBrand, carModel); // Toyota Camry
Destructuring in Function Parameters
Destructuring is particularly useful in function parameters.
Let’s see how it works:”
function displayUser({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const userInfo = { name: ‘Rishab’, age: 22 };
displayUser(userInfo); // Name: Rishab, Age: 22
Destructuring Arrays of Objects
Destructuring can also be used with arrays of objects. For instance, consider an array of user objects:
const users = [
{ id: 1, name: ‘Eve’ },
{ id: 2, name: ‘Frank’ },
];
const [{ name: firstUserName }, { name: secondUserName }] = users;
So now we are renaming the already existing values
console.log(firstUserName, secondUserName); // Eve Frank
Combining Destructuring with Rest Operator
We can combine destructuring with the rest operator to collect the remaining properties.
Here’s an example:
const employee = {
id: 101,
name: ‘Grace’,
department: ‘HR’,
position: ‘Manager’,
};
const { id, name, …rest } = employee;
console.log(id, name); // 101 Grace
console.log(rest); // { department: ‘HR’, position: ‘Manager’ }
Conclusion
In summary,
destructuring in JavaScript is a powerful tool that helps us write cleaner, more efficient code.
From renaming variables and
setting default values to
handling nested structures and function parameters,
destructuring enhances our coding experience.
Thanks for joining me today, and happy coding!
Enroll in Sharpener NOW !
At Sharpener Tech, we don’t just teach, we transform careers! Our Pay After Placement model ensures ZERO financial risk you pay only when you land a high-paying job. With industry-driven Full Stack Development training, hands-on projects, and expert mentorship, we guarantee your success in the tech world. Don’t just dream BUILD your future with Sharpener Tech! Apply now and start your journey!
