Destructuring Assignment in JavaScript —

Story: Riya and the Magic School Bag

Once upon a time, there was a girl named Riya who loved learning JavaScript. One day, her teacher gave her a magic school bag containing three things:

• A book
• A pencil
• A notebook

Riya wanted to take each item out and give it a separate name. Her teacher showed her a special JavaScript trick called destructuring assignment.

1. Chapter One: Unpacking the bag (Array Destructuring)

Riya stored her items inside an array.

const bag = ["Book", "Pencil", "Notebook"];

const [first, second, third] = bag;
console.log(first);  // Book
console.log(second); // Pencil
console.log(third);  // Notebook

What did Riya learn?

JavaScript took each value from the array and assigned it to a separate variable.

• first received "Book".
• second received "Pencil".
• third received "Notebook".

This is called array destructuring because the values are extracted from an array using square brackets [].

2. Chapter Two: The student information card (Object Destructuring)

The next day, Riya’s teacher gave her a student information card.

The card contained her name, age, and favorite subject. Riya wanted to take out only the information she needed.

const student = {
  name: "Riya",
  age: 18,
  subject: "JavaScript"
};

const { name, age, subject } = student;
console.log(name);    // Riya
console.log(age);     // 18
console.log(subject); // JavaScript

What did Riya learn?

Get Raveenanagar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

JavaScript matched the property names with the variables:

• name received "Riya".
• age received 18.
• subject received "JavaScript".

This is called object destructuring because we extract properties from an object using curly braces {}.

3. Chapter Three: The missing gift (Default Values)

One day, Riya received a gift box, but her name tag was missing. Her teacher told her to use "Guest" as a default name.

const [name = "Guest"] = [];

console.log(name); // Guest

Because the array did not contain a first value, JavaScript used the default value "Guest".

4. Chapter Four: Choosing only what you need

Riya received three candies but wanted only the first and third.

const candies = ["Red", "Green", "Blue"];

const [first, , third] = candies;
console.log(first); // Red
console.log(third); // Blue

The empty space between the commas tells JavaScript to skip the second value, "Green".

5. What is the moral of the story? 🌟

Riya discovered that destructuring makes JavaScript code shorter and easier to understand.

Remember these two golden rules:

• Array destructuring []: Values are extracted according to their positions.
• Object destructuring {}: Values are extracted according to their property names.

Destructuring is useful when working with student records, website data, API responses, and functions.

In simple words: Destructuring assignment is like opening a bag and taking out the things you need, giving each one its own variable in JavaScript.