ES6 - A beginners guide - Enhanced Object Literals
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-09-03 09:02:14

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:
```javascript
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:
```javascript
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
```javascript
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
```javascript
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