Javascript: Cleaner Objects with ES6's Object Property Shorthand

With the introduction of ES6, developers were blessed with a handful of extremely powerful Javascript features — one being Object Property Shorthand

You've probably been there before — you're creating an object and it starts looking something like this:

let name = "Tony"
let age = 55
let occupation = "Plumber"

let person = {
    name: name,
    age: age,
    occupation: occupation
}

console.log(person) // {name: "Tony", age: 55, occupation: "Plumber"}

We can all agree that writing an object like that seems a little ridiculous — and at the very least.. repetitive. So now what?

In comes the Object Property Shorthand feature. We can create the same exact object by doing the following:

let name = "Tony"
let age = 55
let occupation = "Plumber"

let person = {
    name,
    age,
    occupation
}

console.log(person) // {name: "Tony", age: 55, occupation: "Plumber"}

Note: At the time of writing this, Internet Explorer does not support this feature.

That's pretty much all there is to this ES6 feature. Check out some of my other blogs covering some of the a few of the other ES6 features:

JS: VAR, LET, and CONST feat. Hoisting
Javascript: How to Use Arrow Functions
Javascript: How to Use the Spread Operator and Rest Parameter
Javascript: Destructure Objects and Arrays for Cleaner Code

Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello 👋.