Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1068 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Shorthand Properties in ES6

1:01 JavaScript lesson by

Shorthand properties allow you to compose complex objects from other objects.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Shorthand properties allow you to compose complex objects from other objects.

Avatar
Michal

I think the lesson 9: Destructuring assignment in ES6 should come just before this one, because you mention destructuring in the video, and it is confusing for those who watch it in order.

Where destructuring in ES6 allows you to easily get properties out of an object, this shorthand property syntax allows you to easily push properties in. It's like destructuring backwards.

If I have a firstName and a lastName and I want to create a person, I can just say, {firstName, lastName}. Then when I log out my person and I run this, you can see that it logs out an object with the first name of John and a last name of Lindquist.

let firstName = "John";
let lastName = "Lindquist";

let person = {firstName, lastName}

console.log(person);

If I wanted to build some more objects, like I want to build a team. I have a mascot with a Moose, and I wanted to build a team like this, where I have a person and a mascot, and then I log out my team. I have a team object with a person of {firstName, lastName}, John and Lindquist, with the mascot of Moose.

let mascot = "Moose";
let team = {person, mascot};

console.log(team);

This syntax allows you to easily construct objects with the properties and things you already have and just build them up however you'd like.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?