Nearby lessons

9 of 22

JavaScript: Destructuring Arrays

📌 What is Array Destructuring?

Array destructuring in JavaScript is a concise way to extract values from arrays and assign them to variables. It simplifies code and improves readability, especially when dealing with arrays with multiple elements or nested arrays.

1️⃣ Traditional vs Destructuring Syntax

Without destructuring, each value must be accessed individually using indexes. With destructuring, values are unpacked directly into variables.

Example02
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

2️⃣ Using Default Values

You can assign default values in case a value is undefined in the array.

Example03
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

3️⃣ Destructuring Nested Arrays

Destructuring works on nested arrays too by using nested patterns.

Example04
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

4️⃣ Using Rest Operator in Destructuring

The rest operator (...) can be used to collect remaining values into a single array.

Example05
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

5️⃣ Destructuring Parameters in Functions

You can directly destructure an array passed to a function inside its parameter list.

Example06
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

6️⃣ Returning and Destructuring Array from Function

Destructuring is helpful when functions return arrays. You can extract each item directly.

Example07
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3