# JS Tip of the Day: Reduce Code with Object Shorthand Syntax

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-object-shorthand-syntax/643170>\
**Category:** web dev\
**Created:** [February 26, 2020, 12:33pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-object-shorthand-syntax/643170 "2020-02-26T12:33:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [February 26, 2020, 12:33pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-object-shorthand-syntax/643170/1 "2020-02-26T12:33:48Z")

</div>

**Reduce Code with Object Shorthand Syntax**  
Version: ES2015  
Level: Beginner

Object literals (`{}`) offer a couple of shortcuts that allow you to simplify and reduce redundancy in your code. The first we’ll look at is a shorthand for assigning properties in a new object to variables of the same name in the available scope. Not using this shorthand syntax, you’d have something like:

```javascript
let wantsToBeAProperty = true;
let holderOfProperties = {
    wantsToBeAProperty: wantsToBeAProperty
};

```

This creates a `wantsToBeAProperty` property on the `holderOfProperties` object with a value equal to the value in the variable `wantsToBeAProperty` (true). The problem is, this code is redundant, causing you to write out `wantsToBeAProperty` twice for the property, once for the key and once for the value. With the property shorthand syntax, you’ll only need to refer to it once.

```javascript
let wantsToBeAProperty = true;
let holderOfProperties = {
    wantsToBeAProperty
};

```

Simply including the property name without a colon (`:`) and a respective value, JavaScript will automatically give it the value of the variable of the same name.

Functions, or object methods, also have a shorthand syntax. Normal method properties include the property name followed by a function expression as a value.

```javascript
let doerOfThings = {
    doAThing: function () {
        // does a thing...
    }
};

```

Using the method shorthand syntax, we can drop the colon (`:`) and the `function` keyword allowing us to more simply write:

```javascript
let doerOfThings = {
    doAThing () {
        // does a thing...
    }
};

```

This creates a function much like before, but without requiring as much code. In fact, if you’re familiar with `class` syntax, you may recognize this is the same syntax used for class methods there.

More info:

- [Object initializer on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
- [Method definitions on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions)