Destructuring

Learn how JavaScript destructuring makes it easier to extract values from objects and arrays into separate variables.

What is Destructuring?

Destructuring is a JavaScript syntax that allows us to unpack values from arrays or properties from objects into separate variables. :chatgpt-content-reference{index="1"}

Instead of accessing each value separately, destructuring lets us extract multiple values using a concise syntax. :chatgpt-content-reference{index="2"}

Destructuring extracts values from objects and arrays into separate variables.

Types of Destructuring

Example 1: Object Destructuring

In object destructuring, the property names are written inside curly braces.

let student = {
    name: "Amit",
    course: "JavaScript",
    city: "Pune"
};

const { name, course, city } = student;

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

Example 2: Array Destructuring

In array destructuring, the values are assigned according to their index position.

let courses = [
    "Java",
    "Python",
    ".NET"
];

const [first, second, third] = courses;

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

Example 3: Renaming Object Properties

Object destructuring also allows us to assign a property to a variable with a different name.

let employee = {
    name: "Sneha",
    department: "Training"
};

const {
    name: employeeName,
    department: team
} = employee;

console.log(employeeName);
console.log(team);

Example 4: Default Values

A default value can be provided during destructuring. The default is used when the property is missing or has the value undefined. :chatgpt-content-reference{index="3"}

let course = {
    name: "JavaScript"
};

const {
    name,
    duration = "3 Months"
} = course;

console.log(name);
console.log(duration);