If you’ve ever found yourself writing repetitive code to extract values from objects or arrays in JavaScript, you’re not alone. I used to do the same — writing line after line just to pull out values from objects or arrays. But one day, while scrolling through X (formerly Twitter), I saw a code snippet that caught my attention. It was short, clean, and did exactly what I had been doing manually — but with way fewer lines of code.
I got curious and decided to look into it. That’s when I learned that this was a feature introduced in ES6 called JavaScript Destructuring. It allows you to easily unpack values from objects and arrays into variables with just a single statement.
Destructuring helps you write cleaner and more readable code by allowing you to extract values directly from objects and arrays. Once you get the hang of it, you’ll wonder how you ever coded without it! 😎
Let’s dive into how destructuring works and how you can use it to simplify your JavaScript code.
What is Destructuring in JavaScript?
Destructuring allows you to extract values from arrays or objects and assign them to variables in a single statement.
What i used to write before learning destructuring.
const person = {
name: 'John',
age: 30
};
const name = person.name;
const age = person.age;
console.log(name); // 'John'
console.log(age); // 30
After learning destructuring this is how my code looks now.
const person = {
name: 'John',
age: 30
};
const { name, age } = person;
console.log(name); // 'John'
console.log(age); // 30
Destructuring makes your code cleaner. Let’s see how it works with both arrays and objects.
Array Destructuring
Previously i used to write code like this.
const colors = ['red', 'green', 'blue']; const first = colors[0]; const second = colors[1]; console.log(first); // 'red' console.log(second); // 'green'
Now have a look at the code with Destructuring.
const colors = ['red', 'green', 'blue']; const [first, second] = colors; console.log(first); // 'red' console.log(second); // 'green'
In the above code snippet the values from the array are assigned to the variables in order. first gets the value at colors[0], and second gets colors[1].
Also if you want to skip values you can leave a blank space between 2 commas. Have a look at the below code example.
const colors = ['red', 'green', 'blue']; const [first, , third] = colors; console.log(first); // 'red' console.log(third); // 'blue'
Also we can use rest operator (…) to collect the remaining values in an array.
const colors = ['red', 'green', 'blue', 'yellow']; const [first, ...rest] = colors; console.log(first); // 'red' console.log(rest); // ['green', 'blue', 'yellow']
Object Destructuring
Destructuring also works with objects by matching property names.
Code without destructuring.
const person = {
name: 'Alice',
age: 25
};
const name = person.name;
const age = person.age;
console.log(name); // 'Alice'
console.log(age); // 25
With Destructuring
const person = {
name: 'Alice',
age: 25
};
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age); // 25
In the above code example the keys of the object (name, age) are matched to the variable names and the order doesn’t matter in object destructuring since it’s based on key names, not position.
Also if a property doesn’t exist then you can set the default value. Have a look at the code example below.
const person = {
name: 'Alice'
};
const { name, age = 30 } = person;
console.log(name); // 'Alice'
console.log(age); // 30
We can also rename the properties before destructuring.
const person = {
name: 'Alice',
age: 25
};
const { name: firstName, age: years } = person;
console.log(firstName); // 'Alice'
console.log(years); // 25
Like arrays we can use rest operator to collect remaining properties of objects as well.
const person = {
name: 'Alice',
age: 25,
country: 'USA'
};
const { name, ...details } = person;
console.log(name); // 'Alice'
console.log(details); // { age: 25, country: 'USA' }
Conclusion
We can also use destructuring in function parameters, but since the title of this article is about an introduction to destructuring in JavaScript, we’ve kept it simple for now. We’ll cover destructuring in function parameters in a future article and will add the link below once it’s published.
We hope you now have a good understanding of destructuring in JavaScript. If you have any questions or doubts, feel free to ask in the comments below. Happy coding!