UI Development

ES 6 – A simpler way of writing your JavaScript!

What is ECMAScript?

ECMAScript 6 or ES6 is the latest version of JavaScript. It is standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications.

Why ES6?

The main goal of ES6 (or officially, ECMA-262) has been to provide a better support for creating larger applications and libraries in a simplified manner. This means a more mature syntax, new shortcuts to make coding easier, and also new methods, keywords, data types, and other enhancements.

Features:

The features have varying degrees of complexity and are useful in both simple scripts and complex applications. ES6 has a lot to offer, but let us look at some hand-picked and useful ES6 features that can be used in our everyday JavaScript coding.

Variables

LET

ES6 introduces the new let keyword that allows us to declare local variables in the scope of a block, such as a statement, an expression, or a(n inner) function. The subtle difference between let and var lies in scope. While var results in a variable with the surrounding function as its scope, the scope of a variable declared using let is only the block it is in.

CONST

The new const keyword makes it possible to declare constants, also known as immutable variables, to which we cannot reassign new content later.

However, immutable variables are not always fully immutable in ES6. We can still change object properties or array members.

Arrow Functions

ES6 facilitates how we write anonymous functions, as we can completely omit the function keyword. We only need to use the new syntax for arrow functions, the => arrow sign (fat arrow), that provides us with a great shortcut.

Not only do arrow functions mean fewer characters to type, but they also behave differently from regular functions. Arrow functions lexically bind the this value to the current scope. This means that we can easily reuse the this keyword in an inner function.

Spread Operator

The spread operator () is a very convenient syntax to expand elements of an array in specific places, such as arguments in function calls.

We can also use the spread operator in function calls in which we want to pass in arguments from an array:

Parameters

DEFAULT VALUES

In ES6, we can add default values to the parameters of a function. This means that if we don’t pass in arguments in the function call, the default parameters will be used. In ES5, the default values of parameters are always set to undefined.

REST PARAMETERS

ES6 also introduces a new kind of parameter, the rest parameters. It also uses the syntax and come handy if we don’t know how many arguments will be passed in later in the function call. We can use the properties and methods of the Array object on rest parameters:

Strings

METHODS

A couple of convenience methods have been added to the String prototype.

Simple but effective. Another convenience method has been added to create a repeating string:

TEMPLATE LITERAL

ES6 provides us with a new alternative for string concatenation. Template literals allow us to easily create templates in which we can embed different values to any spot we want. To do so we need to use the ${…} syntax everywhere where we want to insert the data that we can pass in from variables, arrays, or objects.

With template literals, we can easily create multi-line strings using backticks (`) characters:

Classes

In ES6, classes are declared with the new class keyword, and need to have a constructor() method that is called when a new object is instantiated by using the new myClass() syntax. Unlike function and variable declarations, class declarations are NOT hoisted in ES6.

Modules

There were no native modules support in JavaScript. People came up with AMD, RequireJS, CommonJS and other workarounds. But ES6 introduces modules as a native feature.
We need to define each module in its own file, then use the export keyword to export variables and functions to other files, and the import keyword to import them from other files:

There can be multiple export statements. Each must explicitly state the type of the exported value (function and var, in this example).
The import statement in this example uses a syntax to explicitly define what is being imported. To import the module as a whole, the * wildcard can be used, combined with the as keyword to give the module a local name:

The import statements are synchronous, but the module code doesn’t execute until all dependencies have loaded.

And many more..

These were just a few useful and quick-to-learn features of ES6. But ECMAScript 6 introduces many more methods. These methods can significantly improve the way we write our scripts.

About The Author