JavaScript ES6: Even more new abstractions to improve your code

Leverage powerful ES6 features to write better, elegant, and more predictable JavaScript.

JavaScript ES6, also known as ECMAScript 2015, has a number of really cool new features that can improve the quality of your code. Yesterday, Glad covered five new features in ES6 that will likely improve the code you write.

So I figured, why not cover five more?

For those of you skimming, here they are in list form:

1. Let + Const
2. For … of loop
3. Spread
4. Maps
5. Promises

1. Let + Const

Let is just another way to declare variables, only difference is Let is block-scoped, that is when used to declare a variable inside a block, the value of that variable isn’t accessible outside that block.

let foo = 10;
let bar = 5;

if (true) {
    let bar = foo * 2;
    console.log( bar ); // 20
}

console.log( bar ); // 5

Const allows you to set a value to a variable that would remain the same throughout the lifecycle of the app.

const foo = 20;

2. for … of Loops

With ES6, a new way to iterate over each of the values in an array was introduced called the for ... of loops.

It also makes it easier to iterate through elements of a collection.

let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

for(var color of colors){
  console.log(color);
}

This will log the direct values of the array without having to fetch it through the key colors[i] as it’s usually done.

3. Spread

The Spread operator, which is also known as the ... operator was introduced in ES6. It makes working with objects much easier as it helps with two things:

1. Spreading an array or object into another array or object,
2. Joining multiple parameters into an array.

To spread an array or object into another:

let arr1 = [1, 2 , 3];
let arr2 = [0, ...arr1, 4, 5, 6];
console.log(arr2); // 0,1,2,3,4,5,6

As mentioned above, the spread operator also comes in handy with passing parameters to a function using an array:

function user(name, age)
{
  console.log(`My name is ${name}, I am ${age} years old.`);
}

let person = ['Brian Willer', 38];

user(...person); //My name is Brian Willer, I am 38 years old.

4. Maps

Maps are similar arrays. They hold a key-value pair but allow you to specify your own index and this index specified are unique.

var greetings = new Map();

greetings.set("hello", "Bless");
greetings.set(name, "panda");

greetings.get(name); // panda
greetings.get("hello"); // Bless

greetings.size; // 2

Maps in Action

Note: To use Maps across many browser you would need a polyfill as not browsers have it implemented.

5. Promises

Promises give us a way to handle asynchronous operations and processes in a synchronous manner. With this we can write non-dependent code easily.

It’s been argued that promises are not needed, and one can just use async, callbacks etc. However, Javascript ES6 now has a standard implementation of promises that can be used easily.

var welcomeMessage =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Welcome User!')
})

Note: Not all browsers support Promises out the box so you would need to have a polyfill for this to use cross browsers.

Conclusion

ES6 has so many cool and amazing features some you might use and some you might not have an immediate use for them but they are still worth checking out.

If you would like to check out more of this features, Luke Hoban’s created an es6features repo that has a list of all cool features ES6 has to offer.

Incase you found this article helpful, don’t forgot to share and go berserk on that clap button.

Cheers!!!

---

Plug: LogRocket, a DVR for web apps

https://logrocket.com/signup/

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

Try it for free.

---

The post JavaScript ES6: Even more new abstractions to improve your code appeared first on LogRocket Blog.