Destructuring in JavaScript
When we work with arrays and objects in JavaScript, we often need to take values out of them.
Normally we do something like:
const user = {
name: "Dhiraj",
age: 20
}
const name = user.name
const age = user.age
Works fine.
But it feels repetitive.
So JavaScript gives us a cleaner way to do this.
That is destructuring.
In this blog I will share how I understand destructuring and how it makes code simpler.
What destructuring means
Destructuring means:
taking values out of an array or object and assigning them to variables
In short:
extract → assign
Destructuring objects
Instead of this:
const user = {
name: "Dhiraj",
age: 20
}
const name = user.name
const age = user.age
We can do:
const { name, age } = user
That’s it.
less code, same result
How it actually feels
Object → variables
Important thing
Variable name must match key:
const { name } = user
takes user.name
Destructuring arrays
Arrays work a bit differently.
const arr = [10, 20, 30]
const [a, b, c] = arr
So:
a = 10b = 20c = 30
Here it depends on position.
Array mapping idea
Skipping values
const arr = [10, 20, 30]
const [a, , c] = arr
skips middle value
Default values
Sometimes value may not exist.
const user = {
name: "Dhiraj"
}
const { name, age = 18 } = user
if age not present → use default
Before vs After
Before:
const title = post.title
const author = post.author
const date = post.date
After:
const { title, author, date } = post
cleaner, less repetition
Benefits of destructuring
reduces repetitive code
makes code cleaner
easier to read
faster to write
Small real example
function greet(user) {
const { name } = user
console.log("Hi " + name)
}
Even shorter:
function greet({ name }) {
console.log("Hi " + name)
}
Where you will see it a lot
React props
API responses
function parameters
arrays from functions
Destructuring is just a cleaner way to take values out of arrays and objects.
Once you start using it, going back feels weird.
It doesn’t add new power, just makes things simpler.
