Shorthand

Picture filling in a form from slips of a draft. The slip labeled "age" says 30, and you copy that number into the form's line "age". The slip's label and the line's label match, so there is no point in writing it twice.

In code this happens all the time. A function gets the parameters name and age and builds an object with the keys name and age from them. The full form repeats each name twice, while the short one needs it once:

function makeUser(name, age) {
    return { name: name, age: age };
}

function makeShortUser(name, age) {
    return { name, age };
}

console.log(makeUser("Ann", 30)); // { name: 'Ann', age: 30 }
console.log(makeShortUser("Ann", 30)); // { name: 'Ann', age: 30 }

Let's go through the example:

1. makeUser writes each property in full: the key left of the colon, the value from the same-named parameter right of it.
2. makeShortUser writes only the names: { name, age }.
3. Both functions return equal objects, and console.log prints them the same way.

The short form changes only the program text. The object comes out the same as with the full form.

A property from a variable

When the key matches a variable's name, one name is enough: { name, age } means { name: name, age: age }. This is property shorthand.

How it works:

• the name becomes the key;
• the value comes from the variable or parameter with that name;
• one object can mix the forms: { name, age, city: "Oslo" }.

This form has nothing to do with methods or this. Any property whose value sits in a variable of the same name can be written this way.

The more properties an object has, the bigger the gain. For a form of ten lines, the short form removes ten repeats, and the object reads as a plain list of names.

Here the slip analogy stops working. On paper, you can copy a slip's label into the form's line however you like. In an object, the key becomes exactly the variable's name, so a key with a space, like "home city", cannot be written this way.

A method without the word function

Methods have a short form too: greet() { … } instead of greet: function () { … }. Inside such a method, this works the same way: it is the object before the dot in the call. The short form of a method is used more often than the full one: in it, a method looks like a function declaration inside the object.

Both short forms often appear together:

function makeUser(name, age) {
    return {
        name,
        age,
        isAdult() {
            return this.age >= 18;
        }
    };
}

const kid = makeUser("Tom", 12);
console.log(kid.name, kid.isAdult()); // Tom false

Let's go through it line by line:

1. The function makeUser builds an object from its parameters and returns it.
2. The lines name, and age, are shorthand properties: they get the values of the same-named parameters.
3. isAdult() { … } is a method in the short form.
4. In the call kid.isAdult(), this is kid; the method reads its age 12 and returns false.
5. The program prints Tom false.

In other people's code, interview tasks included, objects are almost always written this way. It helps to read { name, age } right away as "the key name with the value of the variable name".

Common mistake

The short form took a name that no variable has:

function makeUser(name, town) {
    return { name, city }; // ✗
}

console.log(makeUser("Ann", "Oslo"));

ReferenceError: city is not defined

Writing { city } means { city: city }, and JavaScript looks for a variable city. The parameter is called town, there is no variable city, and the program stops.

When the key and the variable have different names, write the property in full: { name, city: town }.

Key points

• { name, age } is short for { name: name, age: age }: the key takes the variable's name, and the value its contents.
• greet() { … } is short for greet: function () { … }, and this works the same way in it.
• The short form gives the same object as the full one.
• When no variable has that name, the short form throws a ReferenceError.