JavaScript ES6+ : Destructuring

Follow me on twitter @jaymanpandya

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 ✌️

I am an UI designer with a flair for front-end development that makes any brand shine at what they do best. I am right now building amazing products for our clients both Indian and International at Interactive Digital Labs. I am part of the Design and Marketing Teams for Make WordPress and has spoken at local camps on Gutenberg as well as the importance of user experience. I am not intimidated by markup, languages, or tools: HTML to CSS, wireframing to prototyping, JavaScript to agile development, and design programs including Sketch, Adobe XD, Figma, Photoshop, Illustrator, InDesign etc. I love languages, and not just programming either. I speak English, Hindi, Marathi, and Gujarati. When I am not taking courses to improve my skills, I am trying new food, dabbling in filmmaking and photography, and running and cycling. Say hi to me on Twitter here @jaymanpandya.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.