Please forgive the somewhat alliterative title of this post. I promise I wasn't going for clickbait! Recently I was looking at some code from a friend of mine and saw something I had not seen in JavaScript before. It obviously worked (and I confirmed myself of course) but I wanted to know why. Luckily I've got some smart followers online who helped me out. Here's what I discovered.

JavaScript Object Literals

Both of the features I'll demonstrate apply to object literals. Basically:

const person = {
	name: "Ray", 
	age: 50, 
	cool: true
}

If you've been doing anything in JavaScript for any amount of time, you've probably worked with an object literal from time to time. Both of the features below don't change how these work, but rather help you write them quicker. Both are optional of course and you should use whatever makes sense for you. Finally, both of what I'm going to share are ES6 features and should be universally safe to use.

Property Value Shorthands

The first feature, and the one I knew about, let's you skip a common pattern of creating a property of an object with a name of X based on a variable X. So for example:

const name = "Ray";
const age = 50;
const cool = true;

const person = {
	name:name,
	age:age,
	cool:cool
};

Obviously in this case the three first lines aren't needed, but imagine they were passed in as arguments or created elsewhere. The shorthand methods lets you skip the X:X syntax:

const name = "Ray";
const age = 50;
const cool = true;

const person = {
	name,
	age,
	cool
};

You can mix and match too if you want:

const name = "Ray";
const age = 50;
const cool = true;
const isOld = false;

const person = {
	name,
	age,
	cool,
	isOld:isOld,
	isNotOld: !isOld
};

In that example, I've written isOld the "full" way and made a new property based on another variable. So this is what I already knew. Now for what I didn't.

Method Value Shorthand

When I was reviewing my friend's code, I saw something like this:

const cat = {
	meow() {
		return 'Meow!';
	}
}

Specifically, the cat object literal has a property, meow, that is a function. You can of course, mix it up and include anything else:

const cat = {
	name:'Luna',
	meow() {
		return 'Meow!';
	}
}

And just to be clear, this is shorthand for:

const cat = {
	name:'Luna',
	meow:function() {
		return 'Meow!';
	}
}

Honestly this feels even more useful than the first item I covered.

Thanks!

I don't know about you, but I love it when I discover stuff like this. I don't know how I missed the method value shorthand. Heck, I probably saw it and it just didn't click. I want to send thanks to both Šime Vidas and Dr. Axel Rauschmayer for their help in pointing me to the relevant specs for this feature. You can see our conversation here: https://mastodon.social/@raymondcamden/110820954856487108. Any mistakes in my post above are 100% my fault, not theirs. (And give them both a follow. They've both helped me multiple times in the past!)

If you want to see this "running", you can check out the simple CodePen below.

See the Pen Shorthand stuff by Raymond Camden (@cfjedimaster) on CodePen.

Photo by Jason on Unsplash