This content originally appeared on DEV Community and was authored by Stefan Wright
Hey!
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
: functionin 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
This content originally appeared on DEV Community and was authored by Stefan Wright
Stefan Wright | Sciencx (2021-09-03T09:02:14+00:00) ES6 – A beginners guide – Enhanced Object Literals. Retrieved from https://www.scien.cx/2021/09/03/es6-a-beginners-guide-enhanced-object-literals/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.