Skip to main content Accessibility Feedback

Object property shorthand values with vanilla JS

In yesterday’s article on destructuring function parameters, I mentioned the ES6 object property shorthand.

If you prefer, you can also use the ES6 object property shorthand approach (which I haven’t written about yet but will soon).

Well, today’s the today. Let’s dig in!

How object property shorthand values work

Unlike most things in JavaScript, this one is actually pretty straightforward.

If you want to define a property in an object, and that key name already exists as a variable within the object’s scope, you don’t have to explicitly assign a value. You can use just the key name, and that variable’s value is used automatically.

Here’s an example.

// Some details
let name = 'Merlin';
let job = 'wizard';
let age = 'old AF';

// The object
let wizard = {
	name: name, // The old way
	job,        // ES6 shorthand
	age         // ES6 shorthand

You can play around with a demo here.

Historically, we needed to do things like name: name. With ES6 shorthand values, you can include the key name without the colon (:) or value.

It’s pretty useful!

Function shorthands

Let’s imagine we wanted to add a few functions to our wizard object. ES6 provides a simpler way to do that as well.

Instead of creating a key name and then writing function () {}, you can add a named function without the function keyword.

let wizard = {

	// Values
	name: name, // The old way
	job,        // ES6 shorthand
	age,        // ES6 shorthand

	// The old way of adding functions
	summon: function () {
		console.log('From out of thin air, watch me make a bear');

	// The ES6 shorthand way
	vanish () {
		console.log(`Now you see me, now you don't.`);


Here’s another demo for you.