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:
let
andconst
for ⦠of
loop- Spread
Map
- 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:
- Spreading an array or object into another array or object
- 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.
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!!!