JS Destructuring

JavaScript Destructuring: Object & Array Unpacking

Destructuring assignment (introduced in ES6) provides a concise syntax to unpack values from arrays or properties from objects directly into distinct variables.

Destructuring Patterns Architecture

flowchart TD
    Destruct["Destructuring Syntax"] --> ObjDest["Object Destructuring: const { name, age = 18 } = user;"]
    Destruct --> ArrDest["Array Destructuring: const [first, second, ...rest] = list;"]

Destructuring Features Reference

Practical Code Example

// Demonstrating Object, Array, and Function Parameter Destructuring

// 1. Object Destructuring with Renaming and Defaults
const developer = {
  id: 101,
  username: "maksudur_dev",
  details: { email: "[email protected]", location: "Dhaka" }
};

const { 
  username: handle, // Rename username to handle
  details: { email }, // Nested object destructuring
  status = "Active" // Default fallback value
} = developer;

console.log(`Handle: ${handle}, Email: ${email}, Status: ${status}`);

// 2. Array Destructuring with Rest Gathering
const coordinates = [23.8103, 90.4125, 10.5]; // [Lat, Lng, Elevation]
const [latitude, longitude, elevation = 0] = coordinates;
console.log(`Lat: ${latitude}, Lng: ${longitude}, Elev: ${elevation}`);

// 3. Swapping Variables without Temporary Variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(`Swapped: x=${x}, y=${y}`); // x=2, y=1

// 4. Function Parameter Destructuring
function renderUserProfile({ id, username }) {
  console.log(`Rendering Card for #${id}: ${username}`);
}
renderUserProfile(developer);

Best Practices & Gotchas

• Destructuring null or undefined Throws TypeError: const { x } = null; throws TypeError: Cannot destructure property of null. Provide default empty objects ({ x } = obj || {}).
• Use Default Parameter Objects in Functions: Write function configure({ host = "localhost", port = 8080 } = {}) so the function can be called with zero arguments configure().
• Keep Nested Destructuring Shallow: Avoid deep nested destructuring (const { a: { b: { c: { d } } } } = data), as it degrades readability.

Self-Check Challenge

Unpack the first and third items of const colors = ["red", "green", "blue"] into variables primary and tertiary.