3 Refreshing Features in JavaScript ECMAScript 6 (ES6)

ECMAScript (or ES) is the standardized scripting language for many programming languages, including JavaScript. The previous version of the scripting language, ES5, compelled developers to include several walkarounds before delivering quality in their applications.

According to Kauress, who has more than four years of front-end web development and currently uses practical projects to assist others gain similar skills, “The new ES6 intends to address most of the shortcomings in the language and allow developers to write cleaner and more concise lines of code.”

Here are three refreshing new features in JavaScript ECMAScript 6.

1. New let and const keywords

ES6 introduced let and const keywords which allow you to declare reassignable variables and constants respectively.

Previously, the var keyword was used to define all types of variables, even if they are constants. However, this keyword often makes variables to have function scope with the possibility of being hoisted to the top.

However, let is a mutable variable that allows you to confine the declared variables within their block scope, leading to fewer variables hanging around.

Here is an example:

{
var globalVar = “ES6 with Var”;
}
{
let globalLet = “ES6 with Let”;
}
console.log(globalVar); //ES6 with Var
console.log(globalLet); //undefined

Similarly, const is also blocked-scope; that is, it can only be available within the scope. The const keyword is an immutable variable that declares only read-only reference to values. Once you’ve declared a variable using it, you cannot change its value.

Here is an example:

const x = “y”;
x = “x”; // TypeError: invalid assignment to constant variable `x’

Nonetheless, it is possible to mutate const objects.

Here is an example:

const x = { x: “x” };
x.x = “y”;
console.log(x);// {x:”y”}

2. Arrow functions

Arrow functions are an awesome ES6 feature that shorten function notations using the => (fat arrow) syntax. They provide an amazing shortcut for working with functions, allowing you to make your code clean, structured, and modern.

Here is an example of a function in ES5:

var sum = function(x, y) {
return x + y;
};

Here is the same function written using an arrow function in ES6:

let sum = (x, y) => x + y;

Is the code simple and clean using ES6?

Furthermore, arrow functions offer several benefits when using the this keyword — something which is difficult to achieve with regular functions.

For example, while regular functions receive the this value automatically, arrow functions lexically bind the this value to the present scope. Consequently, this allows you to reuse the this keyword when working with an inner function.

Here is an example that illustrates how this works with JavaScript objects:

var myObject = {
     name: “Name”,
     arrowRetrieveName: () => this.name,
     regularRetrieveName: function() { return this.name },
     arrowRetrieveThis: () => this,
     regularRetrieveThis: function() { return this }
}
console.log(this.name)//no output
console.log(myObject.arrowRetrieveName());//no output
console.log(myObject.arrowRetrieveThis());//[object Window]
console.log(this) //[object Window]
console.log(myObject.regularRetrieveName()); //Name
console.log(myObject.regularRetrieveThis()); //{“name”:”Name”}

3. Helper methods

ECMAScript 6 introduces several helper methods that will make your JavaScript programming easier and more fun.

For example, the forEach array method runs the stipulated function once for every element of the array, saving you the hassle of using complicated walkarounds.

Here is an example:

let colors = [‘grey’, ‘white’, ‘orange’];
colors.forEach(values => console.log(values));
//grey
//white
//orange

The new helper methods can significantly save your time and assist you write more elegant code. You can find other examples on the Mozilla Dev website.

Conclusion

This article is a brief introduction to the exciting new features in JavaScript ES6. There are also other several ES6 features that can assist you to write less and do more with your code.

You can learn about them and take your JavaScript coding skills to the next level.

Which other ECMAScript 6 features do you know about?

Please let me know your thoughts in the comment section below.

Happy coding!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.