Destructuring in JavaScript

Learning web development in public. Writing simple, real-world explanations about web development concepts. Helping beginners understand why things work, not just how.
Search for a command to run...

Learning web development in public. Writing simple, real-world explanations about web development concepts. Helping beginners understand why things work, not just how.
No comments yet. Be the first to comment.
Every day, millions of users upload photos, videos, stories, and reels to Instagram. From a user's perspective, the process appears simple: select media, apply filters, add a caption, and tap "Post."
Building Offline-First Messaging Apps: How Messages Work Without Internet Modern messaging applications have transformed the way people communicate. Whether it's chatting with friends, collaborating w
In this article we'll explore about the Expo Router and React Navigation and answer which one to use in 2026. If you build mobile apps using React Native, one thing becomes obvious very quickly: Navig

Modern mobile apps are no longer just a collection of screens connected together. Apps like Instagram, WhatsApp, Uber, and Netflix operate at massive scale with millions of users, real time systems, o
In this article we'll be exploring react.js and the things of react.js that makes it popular and stand out among other libraries ( no fight over library vs framework ). We'll go through: What problem

Shkaai
68 posts
In this article we'll discuss and learn about the destructuring concept in JavaScript - the easy way. What we are going to learn:
What destructuring means
Destructuring arrays
Destructuring objects
Default values
Benefits of destructuring
Destructuring mean unpacking values from arrays, or properties from objects, into variables. For example you have a bag pack that contains your things, so you take things out of it when you need them , destructuring is just like that. Now let's see how we can destructure values in JavaScript with simple example:
let p, q, rest;
[p,q] = [10, 20]
console.log(p) // 10
console.log(q) // 20
[p,q, rest] = [10, 20, 30, 40, 50]
console.log(rest) // [30, 40, 50]
Using destructuring syntax we can easily unpack the the values form arrays.
const [a, b, c, d, e] = [10, 20, 30, 40, 50]
console.log(a, b, c, d, e) // 10, 20, 30, 40, 50
We can also use destructuring syntax to easily extract values from the objects:
const user = {
name: "Josh",
age: 20,
address: "Paris",
phone: "4903XXXXXXX"
}
const { name, age, phone } = user
console.log(name, age, phone) // Josh, 20, 4903XXXXXXX
As you can see in the example, we can easily unpack the desired values from the objects using destructuring syntax.
While destructuring we can also give default values to any property. As each property can have a default value:
const [a = 1] = [] // a is 1
const { b = 2 } = { b: undefined } // b is 2
const {c = 3 } = { c: null } // c is null
// if you are confuse why c is null ---> because null is a deliberate give empty value whereas undefined is the default value assigned by JavaScript when we do not give any value.
So why should we use destructuring syntax instead of the normal way?
Let’s understand this step by step.
Without destructuring:
const user = { name: "Josh", age: 20 };
const name = user.name;
const age = user.age;
With destructuring:
const { name, age } = user;
You can see how much cleaner and shorter it becomes.
2. Easy to pick only what you need
Sometimes objects have many properties, but you only need a few.
const user = {
name: "Josh",
age: 20,
address: "Paris",
phone: "12345" };
const { name, phone } = user;
console.log(name, phone);
You don’t need to access everything manually.
3. Works great with functions
Destructuring is very useful when working with functions.
Without destructuring:
function printUser(user) {
console.log(user.name, user.age);
}
With destructuring:
function printUser({ name, age }) {
console.log(name, age);
}
This makes your function parameters cleaner and easier to read.
4. Helps avoid repetition
Instead of writing the same object name again and again:
console.log(user.name);
console.log(user.age);
You can do:
const { name, age } = user;
console.log(name); console.log(age);
Less repetition = better readability.
5. Useful with APIs and real-world data
When working with APIs, you often get large objects.
Destructuring helps you quickly extract only what you need:
const response = { data: {
id: 1,
title: "Post",
author: "John"
} };
// vs
const { title, author } = response.data;
Final Thoughts
Destructuring might look confusing at first, but once you understand it, it becomes one of the most useful features in JavaScript.
It helps you:
write cleaner code reduce repetition make your code easier to read work better with objects and arrays
Start using it in small examples, and slowly you’ll feel comfortable using it in real projects.