Destructuring in JavaScript

Destructuring is one of the most useful and modern features in JavaScript. It allows you to extract values from arrays and objects and assign them to variables in a clean and readable way.

What Destructuring Means

Destructuring is a simplest way to unpack a value from any object or array and place into a individual variable.

Instead of write the repetitive code to access any values, it's make this in a single line.

Destructuring Object

Without Destructuring

const user = {
  name: "Janardan",
  age: 27
};

const name = user.name; // Janardan
const age = user.age; // 27 (if console.log() them)

With Destructuring

const user = {
  name: "Janardan",
  age: 27
};

const { name, age } = user; 

console.log(name,age) // Janardan,27

Destructuring Arrays

Array destructuring extracts values based on position (index).

Example

const fruits = ["apple", "banana", "mango"];

const [first, second] = fruits;

console.log(first);  // apple
console.log(second); // banana

If we need mango but skip banana, Then we can write like bellow (look carefully)

const fruits = ["apple", "banana", "mango"];

const [first, , third] = fruits;

console.log(third); // mango

Diagram

["apple", "banana", "mango"]
   ↓        ↓        ↓
 first    second    third

Here, to skip second indexes value, we leave it with black by coma (,)

Default Values

Sometimes a value might be missing. You can assign defaults.

Example

const user = {
  name: "Bob"
};

const { name, age = 18 } = user;

console.log(age); // 18

Note: Your assignment -> combine the user and age in a object (don't change the above code, write your code just after console.log())

Benefits of Destructuring

1. Reduces Repetitive Code

   // Before
   const title = book.title;
   const author = book.author;
   
   // After
   const { title, author } = book;
   

2. Improves Readability: Cleaner syntax makes your code easier to understand.

3. Useful in Functions

   function greet({ name }) {
     console.log("Hello " + name);
   }
   
   greet({ name: "Sam" });
   

4. Works Great with APIs & Data: When dealing with JSON or server responses, destructuring makes extraction super fast.

This method give us clean, short and more readable code and we can easily extract the exact values.

Thank you!