ES6 Essentials – Part 1: Property Value Shorthands, Computed Property Names, Method Definitions, Arrow Functions

## **Object Literals** An *Object Literals* is an object declaration using *shorthand syntax*: {}. For example: var book = { title: 'Modular ES6', author: 'Nicolas', publisher: 'O´Reilly' } ES6 brings some improvements to **object literal syntax**: *property value shorthands*, *computed property names*, and *method definitions*. Let’s go through each improvement in turn, and look at some practical cases for each **object literal syntax** ### **1. Property Value Shorthands** Sometimes we actually declare objects with one or more properties with the same value as the variable. In the following example, we have an array *listeners*, and this array is assigned to a variable also named *listeners* in an object literal: var listeners = [] function listen() {} var events = { listeners: listeners, listen: listen } With ES6, we can remove *property value* and : (colon) by **property value shorthand syntax**: var listeners = [] function listen( ) {} var events = { listeners, listen } ### **2. Computed Property Names** Sometimes we need to declare an object with properties with a name based on another **JavaScript expressions**. As in the following example written with ES5, suppose *expertise* is passed as a **function parameter**, and you don’t know the value of *expertise* in advance: var expertise = 'journalism' var person = { name: 'Sharon', age: 27 } person[expertise] = { years: 5, interests: ['international', 'politics', 'internet'] } **Object literals** in ES6 are blocked limited by declaration with *static names*. With **computed property names**, you can put any expression in [] (square brackets), and use it as a *property name*. In the following example, we have a **persion** object with only 1 step declared, including *expertise*: var expertise = 'journalism' var person = { name: 'Sharon', age: 27 , [expertise]: { years: 5, interests: ['international', 'politics', 'internet'] } } > **Note**: We cannot combine **property value shorthands** with **computed property names**. > **Value shorthands** are processed at compile-time to avoid repetition, while **computed property names** are computed at runtime. Example: var expertise = 'journalism' var journalism = { years: 5, interests: ['international', 'politics', 'internet'] } var person = { name: 'Sharon', age: 27, [expertise] // this is a syntax error! } – A common case for **computed property names** is when we want to add an entity to an object map, using *entity.id* as a param. Instead of needing a 3rd declaration to add *grocery* to *groceries* map, we can declare it directly on *groceries* object: var grocery = { id: 'bananas', name: ' Bananas', units: 6, price: 10, currency: 'USD' } var groceries = { [grocery.id]: grocery } – Another case is when a function takes a parameter, and that parameter can used to build an object. With ES5, you need to allocate a variable that declares an iteral object, then add a dynamic property, and return object: function getEnvelope(type, description) { var envelope = { data: {} } envelope[type] = description return envelope } With **Computed property names**, we just need to make it more concise: function getEnvelope(type, description) { return { data: {}, [type]: description } } ### **3. Method Definitions** Usually, we declare methods in an object by adding properties to them. Following example, we create an event **emitter** that supports multiple event types. The emitter#on method is used to register event listeners, and the emitter#emit method is used to raise events: var emitter = { events: {}, on: function (type, fn) { if (this.events) [type] === undefined) { this.events[type] = [] } this.events[type].push(fn) }, emit: function (type, event) { if (this.events[type] = == undefined) { return } this.events[type].forEach(function (fn) { fn(event) }) } } With ES6, we can declare methods in object using method definition new syntax. In this example, we can omit the : and the function keyword: var emitter = { events: {}, on(type, fn) { if (this.events[type] === undefined ) { this.events[type] = [] } this.events[type].push(fn) }, emit(type, event) { if (this.events[type] === undefined) { return } this. events[type].forEach(function (fn) { fn(event) }) } } ### **4. Arrow Functions** In JS, normally we declare a function including name, list parameters and function body: function name(parameters) { // function body } We can also create an anonymous functions by omitting the name when assigning a function to a variable, a property or a function call: var example = function (parameters) { // function body } With ES6, we can use arrow functions as another way to write anonymous functions. The difference here, is that arrow functions omits the keyword function and adds => after the parameter list: var example = (parameters) => { // function body } > * *Arrow function** cannot be used as a constructor, there is no prototype property. So you can’t use new for an arrow function, and they are bound by their lexical scope, that’s why they don’t change the meaning of this

Source : Viblo