Destructuring in JavaScript

Unpack values from arrays and objects into neat, individual variables — in a single line.

---

Here's a pattern I used to write all the time before I learned about destructuring:

const user = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
};

const name = user.name;
const age = user.age;
const city = user.city;

console.log(name); // "Pratham"
console.log(age); // 22
console.log(city); // "Delhi"

Three lines just to pull values out of an object and assign them to variables. It works, but it's repetitive. You're typing user. three times, and if the object had 10 properties, you'd have 10 lines of essentially the same pattern.

Destructuring lets you do all of that in one line:

const { name, age, city } = user;

Same result. One line. No repetition. When I first saw this in the ChaiCode Web Dev Cohort 2026, it felt like a cheat code. Let me show you how it works.

---

What Does Destructuring Mean?

Destructuring is a JavaScript syntax that lets you extract values from arrays or objects and assign them to variables — all in a single, clean statement.

Think of it like unpacking a suitcase. Instead of reaching in and pulling out items one at a time:

Suitcase → reach in → grab shirt → put on shelf
Suitcase → reach in → grab pants → put on shelf
Suitcase → reach in → grab shoes → put on shelf

You dump everything out at once and each item goes to its labeled spot:

Suitcase → { shirt, pants, shoes } → all on their shelves instantly

That's destructuring. One operation, multiple variables created.

---

Destructuring Objects

Object destructuring is the one you'll use most often. It lets you pull out specific properties by name.

Basic Syntax

const { property1, property2, property3 } = object;

The variable names inside { } must match the property names in the object.

Example

const student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
};

// Without destructuring
const name = student.name;
const age = student.age;
const course = student.course;

// With destructuring — same result, one line
const { name, age, course } = student;

console.log(name); // "Pratham"
console.log(age); // 22
console.log(course); // "Web Dev Cohort 2026"

Visual: Object → Variable Extraction

const student = {
  name: "Pratham",        ──→  const name = "Pratham"
  age: 22,                ──→  const age = 22
  course: "Web Dev 2026"  ──→  const course = "Web Dev 2026"
};

         ⬇  Destructuring does this in ONE step  ⬇

const { name, age, course } = student;
         ↑     ↑      ↑
         │     │      └── matches key "course" → gets "Web Dev 2026"
         │     └── matches key "age" → gets 22
         └── matches key "name" → gets "Pratham"

You Don't Have to Extract Everything

You can pick only the properties you need. The rest are simply ignored.

const product = {
  title: "Laptop",
  price: 75000,
  brand: "Dell",
  inStock: true,
};

// I only need title and price
const { title, price } = product;

console.log(title); // "Laptop"
console.log(price); // 75000
// brand and inStock are still in the object, just not extracted

Renaming Variables

What if the property name conflicts with an existing variable, or you just want a different name? Use the : syntax:

const person = {
  name: "Pratham",
  age: 22,
};

// Rename 'name' to 'userName' and 'age' to 'userAge'
const { name: userName, age: userAge } = person;

console.log(userName); // "Pratham"
console.log(userAge); // 22
// console.log(name);  // ❌ ReferenceError — 'name' wasn't created, 'userName' was

The syntax reads as: "take the property name and store it as userName."

Nested Object Destructuring

Objects inside objects? You can destructure those too:

const user = {
  name: "Pratham",
  address: {
    city: "Delhi",
    state: "Delhi",
    pin: 110001,
  },
};

const {
  name,
  address: { city, pin },
} = user;

console.log(name); // "Pratham"
console.log(city); // "Delhi"
console.log(pin); // 110001

---

Destructuring Arrays

Array destructuring works by position instead of by name. The first variable gets the first element, the second gets the second, and so on.

Basic Syntax

const [var1, var2, var3] = array;

Example

const colors = ["red", "green", "blue"];

// Without destructuring
const first = colors[0];
const second = colors[1];
const third = colors[2];

// With destructuring
const [first, second, third] = colors;

console.log(first); // "red"
console.log(second); // "green"
console.log(third); // "blue"

Visual: Array Destructuring Mapping

const colors = ["red", "green", "blue"];
                  ↓       ↓        ↓
const [first,  second,  third] = colors;
         ↓       ↓        ↓
       "red"  "green"   "blue"

Position 0 → first  = "red"
Position 1 → second = "green"
Position 2 → third  = "blue"

Skipping Elements

Don't need the second element? Just leave an empty slot with a comma:

const scores = [95, 82, 78, 90];

const [best, , , fourth] = scores;
//          ↑ ↑
//     skipped positions

console.log(best); // 95
console.log(fourth); // 90

Swapping Variables

One of the coolest tricks with array destructuring — swapping two variables without a temporary variable:

let a = 1;
let b = 2;

// Traditional swap (needs a temp variable)
// let temp = a;
// a = b;
// b = temp;

// Destructuring swap — one line, no temp
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

The Rest Pattern (...rest)

Want to grab the first couple of elements and dump the rest into another array?

const numbers = [1, 2, 3, 4, 5, 6];

const [first, second, ...remaining] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(remaining); // [3, 4, 5, 6]

The ...remaining collects everything that's left into a new array. This works with objects too:

const user = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  course: "Web Dev",
};

const { name, ...otherDetails } = user;

console.log(name); // "Pratham"
console.log(otherDetails); // { age: 22, city: "Delhi", course: "Web Dev" }

---

Default Values

What happens if the property or element you're trying to destructure doesn't exist? You get undefined. Default values let you set a fallback.

Object Defaults

const settings = {
  theme: "dark",
  language: "en",
};

const { theme, language, fontSize = 16 } = settings;

console.log(theme); // "dark"
console.log(language); // "en"
console.log(fontSize); // 16 — not in the object, so the default kicks in

If fontSize existed in settings, its actual value would be used. The default only applies when the value is undefined.

Array Defaults

const rgb = [255, 100];

const [red, green, blue = 0] = rgb;

console.log(red); // 255
console.log(green); // 100
console.log(blue); // 0 — no third element, default is used

Combining Defaults with Renaming (Objects)

const config = {
  apiUrl: "https://api.example.com",
};

const { apiUrl: url, timeout: requestTimeout = 5000 } = config;

console.log(url); // "https://api.example.com"
console.log(requestTimeout); // 5000

This reads as: "take apiUrl and call it url; take timeout and call it requestTimeout, but if it doesn't exist, default to 5000."

---

Before vs After Destructuring

Let's see the transformation across different scenarios:

Extracting Object Properties

// ❌ Before
const name = person.name;
const age = person.age;
const city = person.city;

// ✅ After
const { name, age, city } = person;

Extracting Array Elements

// ❌ Before
const first = scores[0];
const second = scores[1];
const third = scores[2];

// ✅ After
const [first, second, third] = scores;

Function Parameters

// ❌ Before
function displayUser(user) {
  console.log(user.name);
  console.log(user.age);
  console.log(user.city);
}

// ✅ After — destructure right in the parameter
function displayUser({ name, age, city }) {
  console.log(name);
  console.log(age);
  console.log(city);
}

displayUser({ name: "Pratham", age: 22, city: "Delhi" });

This last one — destructuring in function parameters — is incredibly common in modern JavaScript and React. You'll see it everywhere.

---

Benefits of Destructuring

Let's summarize why destructuring isn't just a "nice to have" but a genuine improvement:

Benefit	Explanation
Less repetition	No more obj.property over and over
Cleaner code	One line instead of many for extracting values
Better readability	You instantly see which properties are being used
Default values	Handle missing data gracefully without extra if checks
Function params	Destructure right in the parameter list — cleaner function signatures
Modern standard	Used everywhere in ES6+, React, Node.js, and APIs

---

Let's Practice: Hands-On Assignment

Part 1: Object Destructuring

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010,
  rating: 8.8,
};

// Destructure title and director
const { title, director } = movie;
console.log(`${title} by ${director}`); // "Inception by Christopher Nolan"

Part 2: Array Destructuring

const topCities = ["Tokyo", "Delhi", "Shanghai", "São Paulo", "Mumbai"];

const [first, second, ...others] = topCities;
console.log(`#1: ${first}`); // "#1: Tokyo"
console.log(`#2: ${second}`); // "#2: Delhi"
console.log(`Others:`, others); // Others: ["Shanghai", "São Paulo", "Mumbai"]

Part 3: Default Values

const userProfile = {
  username: "pratham16",
  email: "[e-mail]",
};

const { username, email, bio = "No bio yet." } = userProfile;
console.log(username); // "pratham16"
console.log(bio); // "No bio yet."

Part 4: Destructuring in Function Parameters

const printStudent = ({ name, age, course }) => {
  console.log(`${name}, ${age} — enrolled in ${course}`);
};

printStudent({
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
});
// "Pratham, 22 — enrolled in Web Dev Cohort 2026"

Part 5: Variable Swap

let x = 100;
let y = 200;

console.log(`Before: x=${x}, y=${y}`); // Before: x=100, y=200

[x, y] = [y, x];

console.log(`After: x=${x}, y=${y}`); // After: x=200, y=100

---

Key Takeaways

1. Destructuring extracts values from objects (by key name) and arrays (by position) into individual variables — all in one line.
2. Object destructuring uses { } and matches variable names to property names. You can rename with : and skip properties you don't need.
3. Array destructuring uses [ ] and matches by position. You can skip elements with commas and collect leftovers with ...rest.
4. Default values (= fallback) kick in when a property or element is undefined. They're perfect for handling missing data.
5. Destructuring is the modern standard — you'll see it in function parameters, API responses, React props, and virtually all modern JavaScript code.

---

Wrapping Up

Destructuring is one of those ES6 features that fundamentally changes how you write JavaScript. Before it, extracting values was tedious and repetitive. After it, your code becomes tighter, more readable, and more expressive. And the best part? Once you start using it, it becomes second nature — you'll destructure without even thinking about it.

I'm working through all of this in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and destructuring comes up in nearly every lesson now. Array methods, React components, API responses — it's everywhere. Getting comfortable with it early is one of the best investments you can make.

Connect with me on LinkedIn or visit PrathamDEV.in to follow along. More articles on the way as the learning continues.

Happy coding! 🚀

---

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode