❮ Previous Next ❯

Destructuring

  • This lesson covers array and object destructuring techniques.

  • Introduction to Destructuring

    In JavaScript, we often work with:

    • Arrays containing multiple values

    • Objects containing many properties

    Traditionally, extracting values from arrays and objects required multiple lines of code.

    Destructuring is a modern JavaScript feature that allows us to:

    • Extract values easily

    • Write cleaner code

    • Improve readability

    • Reduce repetition

    What is Destructuring ?

    Destructuring is a syntax that allows unpacking values from:

    • Arrays

    • Objects

    and assigning them to variables in a single statement.

    Why Destructuring is Important

    Without destructuring:

    • Code becomes lengthy

    • Repetition increases

    • Readability decreases

    With destructuring:

    • Code is shorter

    • Logic is clearer

    • Maintenance becomes easier

      Types of Destructuring

      JavaScript supports two types of destructuring:

      1. Array Destructuring

      2. Object Destructuring

        Array Destructuring

        What is Array Destructuring ?

        Array destructuring allows us to extract array elements and store them in variables based on position (index).

      Extract Array Values Using Destructuring

      Simplifies assigning array elements to variables using a clean syntax 

      // Traditional Way
let colors = ["Red", "Green", "Blue"];

let first = colors[0];
let second = colors[1];
let third = colors[2];

console.log(first, second, third);

// Using Destructuring
let [f, s, t] = colors;

console.log(f, s, t);

      • Same result with less code.

        How Array Destructuring Works

        • Values are assigned based on order

        • First variable gets first value

        • Second variable gets second value

      Skip Elements in Array Destructuring

      Allows ignoring specific values while extracting from an array 

      let numbers = [10, 20, 30, 40];

let [first, , third] = numbers;

console.log(first, third); // 10 30
      • Using Default Values

      Set Default Values in Array Destructuring

      Assigns default values when array elements are missing 

      let data = [5];

let [a, b = 10] = data;

console.log(a, b); // 5 10
      • Swapping Variables Using Destructuring

      Swap Variables Using Array Destructuring

      Exchanges values of variables without using a temporary variable 

      let x = 5;
let y = 10;

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

console.log(x, y); // 10 5
      • Destructuring with Functions (Array Return)

      Destructuring Function Return Values

      Extracts array values returned from a function into variables 

      function getCoordinates() {
  return [12, 45];
}

let [lat, long] = getCoordinates();

console.log(lat, long); // 12 45

      • Object Destructuring

        What is Object Destructuring ?

        Object destructuring allows extracting values from objects using property names, not order.

      Extract Object Properties Without Destructuring

      Accesses object values using traditional dot notation 

      let user = {
  name: "Amit",
  age: 25,
  city: "Delhi"
};

let name = user.name;
let age = user.age;
let city = user.city;

console.log(name, age, city);
      • Using Object Destructuring

      Extract Object Properties Using Destructuring

      Retrieves values from an object using property names in a concise way 

      let user = {
  name: "Amit",
  age: 25,
  city: "Delhi"
};

let { name, age, city } = user;

console.log(name, age, city);

      • Important Rule for Object Destructuring

        • Variable names must match object property names

      Rename Variables During Object Destructuring

      Assigns object properties to new variable names while destructuring 

      let user = {
  name: "Amit",
  age: 25
};

let { name: userName, age: userAge } = user;

console.log(userName, userAge);
      • Default Values in Object Destructuring

      Handle Missing Properties with Default Values

      Provides fallback values when object properties are missing 

      let product = {
  title: "Laptop"
};

let { title, price = 50000 } = product;

console.log(title, price); // Laptop 50000
      • Destructuring Nested Objects

      Extract Values from Nested Objects

      Accesses deeply nested object properties using destructuring 

      let employee = {
  id: 101,
  details: {
    name: "Ravi",
    department: "IT"
  }
};

let {
  details: { name, department }
} = employee;

console.log(name, department);
      • Destructuring Function Parameters

      Destructure Object Parameters in Functions

      Extracts object properties directly in function parameters for cleaner code 

      function displayUser({ name, age }) {
  console.log(name, age);
}

displayUser({ name: "Neha", age: 22 });

      • This improves function readability.

        Destructuring in DOM Manipulation

      Extract DOM Element Properties Using Destructuring

      Retrieves properties like id and className directly from a DOM element 

      let element = document.getElementById("box");

let { id, className } = element;

console.log(id, className);
      • Array vs Object Destructuring
        FeatureArray DestructuringObject Destructuring
        Based onOrderProperty names
        Uses[ ]{ }
        FlexibilityPosition-basedName-based
        Default valuesSupportedSupported

        Common Mistakes

        • Mismatching property names

        • Forgetting correct brackets

        • Overusing destructuring

        • Writing unreadable nested destructuring

        Best Practices for Destructuring

        • Use destructuring only when it improves readability

        • Avoid deeply nested destructuring

        • Use default values safely

        • Prefer clarity over short code

        • Use destructuring in function parameters

        Use Cases

        • API response handling

        • React props handling

        • Configuration objects

        • DOM element property access

        • Cleaner function arguments

      ❮ Previous Next ❯