Destructuring allows us to extract data from Objects, Arrays, Maps & Sets. It allows you to write DRY code.

Object Destructuring

You will have to use “{}” (curly braces) for Object Destructuring.

const facilityDetails = {
    name: 'Swimming Pool',
    capacity: 25,
    canBeOverbookBy: 10,
    shut: 'Sunday',
    dynamic: {
        booking: true,
        time: false
    },
    safeForKids: true
}

// Single Level Destructuring
const {name, capacity, canBeOverbookBy} = facilityDetails;

console.log(`The ${name} has the capacity of ${capacity} guests and can be overbooked by ${canBeOverbookBy} guests.`);

// Multi Level Destructuring
const {booking, time} = facilityDetails.dynamic;

console.log(`The ${name} has the capacity of ${capacity} guests and can be overbooked by ${canBeOverbookBy} guests. This facility ${booking===true ? `has` : `does not have`} booking at dynamic start time and ${time===true ? `has` : `does not have`} booking of dynamic duration.`);

// Renaming variables while Destructuring
const { shut:closedOn } = facilityDetails;

console.log(`The ${name} has the capacity of ${capacity} guests and can be overbooked by ${canBeOverbookBy} guests. This facility ${booking===true ? `has` : `does not have`} booking at dynamic start time and ${time===true ? `has` : `does not have`} booking of dynamic duration. This facility is closed for maintenance on ${closedOn}.`);

// Assigning default value during Destructuring
const {safeForKids, isOpenAir = true} = facilityDetails;

console.log(`${name} is ${isOpenAir === true ? `an Open Air` : `not an Open Air`} & ${safeForKids === true ? `Safe for Kids` : `Not Safe for Kids`} facility.`);

Array Destructuring

You will have to use “[]” (square brackets) for Object Destructuring.

//Destructuring an Array
//name, capacity, canBeOverbookBy, shut, dynamic (booking, time), safeForKids
const facilityDetails = ['Swimming Pool', 25, 10, 'Sunday', [true, false], true];
const [name, capacity, canBeOverbookBy] = facilityDetails;

console.log(`The ${name} has the capacity of ${capacity} guests and can be overbooked by ${canBeOverbookBy} guests.`);

//Destructuring a nested array
const [booking, time] = facilityDetails[4];

console.log(`The ${name} has the capacity of ${capacity} guests and can be overbooked by ${canBeOverbookBy} guests. This facility ${booking===true ? `has` : `does not have`} booking at dynamic start time and ${time===true ? `has` : `does not have`} booking of dynamic duration.`);

// Converting a comma separated string to an Array and destructuring it after that
const facilityDetailsString = 'Sunday, true';
const [shut, safeForKids] = facilityDetailsString.split(',');

console.log(`This facility is ${safeForKids===true ? `Safe for Kids` : `not Safe for Kids`} and is closed on ${shut}.`);

// Exploring ...rest parameter
const kidsUsingTheFacilityRightNow = ['Megan', 'Roy', 'James', 'Louis'];
const [child, ...others] = kidsUsingTheFacilityRightNow;

console.log(child, ...others); // Will print Megan Roy James Louis
console.log(child); // Will print Megan
console.log(...others); // Will print Roy James Louis

Peace ✌️