ES6 - A beginners guide - Enhanced Object Literals

You came back :) welcome! In this part of the series I am going to talk about Enhanced Object Literals. We've all used objects at some point in our JavaScript journey, ES6 can help to make this process a little more "shorthanded" reducing unnecessary code bloat, improving time to develop, and minimise the risk of simple typo's breaking our object creationg. Let's take a look at some code:

The ES5 way

We've probably all done something like this in the past:

var a = 1, b = 2, c = 3;
  obj = {
    a: a,
    b: b,
    c: c
  };
console.log(obj) // Returns {a: 1, b: 2, c: 3} in a console.log

It's a relatively simple example, and very unlikely to have any issues. Let's see what we can do in ES6:

The ES6 way

In ES6, if your key/value pair in the object is the same then you only need to add the key. The JavaScript engine will process it as a key/value pair. Take a look below:

const a = 1, b = 2, c = 3;
  obj = {
    a,
    b,
    c
  };
console.log(obj) // Returns {a: 1, b: 2, c: 3} in a console.log

Something more advanced

Those example's were extremely simple, let's step it up a gear. We can also use Object Literals in our function returns, speaking of functions though...ES6 permits even more shorthand syntax advantages. Again, let's jump to some code:

The ES5 function

function createBookShop(inventory) {
  return {
    inventory: inventory,
    inventoryValue: function () {
      return this.inventory.reduce(function(total, book) {
        return total + book.price;
      }, 0);
    },
    priceForTitle: function (title) {
      return this.inventory.find(function (book) {
        return book.title === title;
      }).price;
    },
  };
}

const bookInventory = [
  { title: "Harry Potter", price: 10 },
  { title: "Eloquent JS", price: 15 },
];

const bookShop = createBookShop(bookInventory);

console.log(bookShop.inventoryValue()); // Returns 25 in a console.log
console.log(bookShop.priceForTitle("Eloquent JS")); // Returns 15 in a console.log

Above we're creating a book shop containing an inventory and two functions to access the information from the bookshop. You can see we're calling those in the two console log. Let's look at what ES6 can do...

The ES6 function

function createBookShop(inventory) {
  return {
    inventory,
    inventoryValue() {
      return this.inventory.reduce((total, book) => total + book.price, 0);
    },
    priceForTitle(title) {
      return this.inventory.find(book => book.title === title).price;
    },
  };
}

const bookInventory = [
  { title: "Harry Potter", price: 10 },
  { title: "Eloquent JS", price: 15 },
];

const bookShop = createBookShop(bookInventory);

console.log(bookShop.inventoryValue()); // Returns 25 in a console.log
console.log(bookShop.priceForTitle("Eloquent JS")); // Returns 15 in a console.log

So we've reduced our code in a few ways now thanks to the ES6 spec, let's summarise those:

• The key/value pair has been reduced down to a single value because they key and value are the same string
• We've removed : function in our object functions. Note you cannot use fat arrow functions here
• We've used fat arrow functions inside our object functions Overall we saved 100 chars, in a small example like this of course that's not a lot but imagine this in a real world application we can saved 1000's of characters which will hugely impact the file size ultimately