Destructuring

ES6 Destructuring Overview

Destructuring is an ES6 feature that allows values from arrays or properties from objects to be unpacked into individual variables. It reduces repetitive code, improves readability, and is heavily used in modern JavaScript, React, Node.js, Vue, Angular, and TypeScript applications.

Destructuring is commonly used with function parameters, API responses, configuration objects, React props, state management, and array processing.

Why Use Destructuring?

• Reduces repetitive property access.
• Produces cleaner code.
• Improves readability.
• Works well with APIs.
• Simplifies React components.
• Supports default values.
• Makes function parameters easier to read.
• Supports nested objects and arrays.

Basic Array Destructuring

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

const
[
  first,
  second,
  third
]
=
colors;

console.log(first);
console.log(second);
console.log(third);

Skipping Array Values

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

const
[
  first,
  ,
  third
]
=
numbers;

console.log(first);
console.log(third);

Array Default Values

const colors =
[
  "Red"
];

const
[
  primary,
  secondary = "Blue"
]
=
colors;

console.log(primary);
console.log(secondary);

Using Rest Operator

const values =
[
  1,
  2,
  3,
  4,
  5
];

const
[
  first,
  ...others
]
=
values;

console.log(first);
console.log(others);

Swapping Variables

let first =
  "HTML";

let second =
  "CSS";

[
  first,
  second
]
=
[
  second,
  first
];

console.log(first);
console.log(second);

Destructuring makes swapping values simple without creating a temporary variable.

Basic Object Destructuring

const user =
  {

    name: "Alice",

    age: 25,

    city: "Dallas"

  };

const
{

  name,

  age,

  city

}
=
user;

console.log(name);
console.log(age);
console.log(city);

Rename Variables

const user =
  {

    name: "John",

    age: 30

  };

const
{

  name: fullName,

  age: years

}
=
user;

console.log(fullName);
console.log(years);

Object Default Values

const user =
  {

    name: "John"

  };

const
{

  name,

  city = "New York"

}
=
user;

console.log(city);

Nested Object Destructuring

const employee =
  {

    profile:
      {

        name: "Sarah",

        department: "Engineering"

      }

  };

const
{

  profile:
  {

    name,

    department

  }

}
=
employee;

Nested Array Destructuring

const values =
[
  1,
  [
    2,
    3
  ]
];

const
[
  first,
  [
    second,
    third
  ]
]
=
values;

Mixed Destructuring

const response =
  {

    users:
    [
      {
        name: "Alice"
      }
    ]

  };

const
{

  users:
  [
    firstUser
  ]

}
=
response;

console.log(firstUser.name);

Destructuring Function Parameters

function displayUser(

  {

    name,

    age

  }

) {

  console.log(name);
  console.log(age);

}

displayUser(

  {

    name: "David",

    age: 28

  }

);

Destructuring with Default Object

function createUser(

  {

    name = "Guest",

    age = 18

  } = {}

) {

  console.log(name);
  console.log(age);

}

createUser();

Returning Multiple Values

function calculate() {

  return
  [
    10,
    20
  ];

}

const
[
  width,
  height
]
=
calculate();

Ignoring Returned Values

const values =
[
  100,
  200,
  300
];

const
[
  ,
  second
]
=
values;

console.log(second);

Destructuring API Responses

const response =
  {

    data:
      {

        users: [],

        total: 100

      }

  };

const
{

  data:
  {

    users,

    total

  }

}
=
response;

Using Rest with Objects

const employee =
  {

    id: 1,

    name: "John",

    department: "IT",

    salary: 90000

  };

const
{

  salary,

  ...details

}
=
employee;

console.log(details);

React Props Example

function Button(

  {

    title,

    color,

    size

  }

) {

  return title;

}

Configuration Object Example

function initialize(

  {

    timeout = 5000,

    retries = 3,

    debug = false

  }

) {

  console.log(timeout);

}

Loop Destructuring

const users =
[
  {
    name: "John"
  },
  {
    name: "Sarah"
  }
];

for (

  const
  {
    name
  }

  of users

) {

  console.log(name);

}

Map Function Example

const users =
[
  {
    name: "John"
  },
  {
    name: "Sarah"
  }
];

const names =
users.map(

  (
    {
      name
    }
  ) =>

    name

);

Destructuring vs Traditional Code

// Traditional

const name =
  user.name;

const age =
  user.age;

// Destructuring

const
{
  name,
  age
}
=
user;

Common Use Cases

• React props.
• API responses.
• Configuration objects.
• Function parameters.
• Array processing.
• State management.
• Database results.
• JSON parsing.
• Object cloning.
• Multiple return values.

Common Mistakes

• Destructuring undefined values.
• Using incorrect property names.
• Forgetting default values.
• Using object destructuring on arrays.
• Using array destructuring on objects.
• Overusing deeply nested destructuring.
• Ignoring missing properties.
• Making code difficult to read.

Best Practices

• Use destructuring to improve readability.
• Keep nested destructuring shallow.
• Provide default values whenever appropriate.
• Use object parameters instead of long parameter lists.
• Rename variables only when necessary.
• Prefer object destructuring for configuration objects.
• Use rest properties for remaining values.
• Avoid unnecessary destructuring.
• Write self-documenting variable names.
• Keep code simple and maintainable.

Interview Questions

• What is destructuring?
• What is the difference between array and object destructuring?
• How do default values work?
• How do you rename destructured variables?
• What is nested destructuring?
• How do rest properties work?
• Can destructuring be used in function parameters?
• How do you swap variables using destructuring?
• What are common mistakes?
• When should destructuring be avoided?