JavaScript ES6: Even more new abstractions to improve your code

ES6, also known as ECMAScript 2015, has a number of really cool new features that can improve the quality of your JavaScript 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 and const
2. for … of loop
3. Spread
4. Map
5. Promises

1. let and const

let is just another way to declare variables. The only difference is that let is block-scoped, i.e., 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. Map

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

var greetings = new Map();

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

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

greetings.size; // 2

Note: To use maps across many browsers, you would need a polyfill since not all 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, but they are still worth checking out.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

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

In case you found this article helpful, don’t forget to show some love in the comments.

Cheers!!!