More Advanced Destructuring Features

Aliases

const hero = {
name: 'Iron Man',
realName: 'Tony Stark'
};
const { realName: secretName } = hero;
secretName; // => 'Tony Stark'

Extracting properties from nested objects

const { prop1: { prop2: { prop3: { .... } } } } = object;
const hero = {
name: 'Iron Man',
realName: 'Tony Stark,
address: {
city: 'Los Angeles'
}
};
// Object destructuring:
const { address: { city } } = hero;
city; // => 'Los Angeles'

Dynamic name property extraction

const hero = {
name: 'Iron Man',
realName: 'Tony Stark'
};
const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Iron Man'

Rest object after destructuring

const { identifier, ...rest } = expression;
const hero = {
name: 'Iron Man',
realName: 'Tony Stark'
};
const { name, ...realHero } = hero;
realHero; // => { realName: 'Tony Stark' }

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store