An Introduction to ES6

Hey Guys,

As you know, the JavaScript programming language is standardized by the ECMA (which is a standards body like the W3C) under the name ECMAScript. It’s latest version ECMAScript 6 popularly known as ES6 contains many new features that make JavaScript much more powerful and expressive. Although ES6 is a major upgrade to the language, it still allows all existing JavaScript code to work since ES6 was specifically designed to allow maximum compatibility with existing code.

ES6’s features range from welcome conveniences like arrow functions and simple string interpolation, to brain-melting new concepts like proxies and generators. In this post we’re going to look at some of the key new features and functions that ES6 offers. These are as follows:

Const keyword

Const stands for PI = 3.141592653589793 or console.log(PI);

Variables declared with the const keyword are just like variables except that you can’t assign anything to them except at the point where they’re declared.

Let keyword

For example let counter = 0;

let is basically the new var. It can be used to declare variables just like the var keyword, but with better scoping rules. These rules are:

• let variables are block-scoped
• Global let variables are not properties on the global object
• Loops of the form for (let x…) create a fresh binding for x in each iteration
• It’s wrong to try to use a let variable before its declaration is reached
• Re-declaring a variable with let is not allowed

Default parameters

For example:

function loadProfile(profile="standard"){
}


Rest parameters

For example:

function findAll(haystack, ...needles) {

}

The ellipsis before ‘needles’ indicates it is a rest parameter. All the other passed parameters are put into an array and assigned to the variable ‘needles’.
So for example if you write findAll(“banana”, “b”, “nan”) you’re setting the needles variable to [“b”, “nan”]. Only the last parameter of a function may be marked as a rest parameter.

The for-of loop


for (var value of myArray) {
console.log(value);
}


The for–of loop is for looping over data like the values in an array for instance. It avoids all the pitfalls of for–in. Unlike forEach(), it works with break, continue, and return.

Collections

Es6 also provides the new collection classes – Set, Map, WeakSet and WeakMap.

These collections do not expose their data as properties. This means that expressions like obj.key or obj[key] cannot be used to access data in these collections. To do that you need to use the map.get(key) method. So what are these new collection classes?
Well, a Set is basically a collection of values that never contains the same value twice. It’s mutable, so you can add and remove values as it goes. A Map on the other hand is a collection of key-value pairs.

Map and Set objects keep a strong reference to every key and value they contain. This means that if a DOM element is removed from the document and dropped, garbage collection can’t recover that memory until that element is removed from Set or Map as well. It is possible to solve this particular problem using a weak collection though.

Arrow Functions

Arrow functions or lambda expressions are a concise way of defining functions inline. The syntax they use is simply Identifier => Expression. To saves you from having to type function and return, as well as some parentheses, braces, and a semicolon. In ES5 for example you’d have to write the following code:


// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});

var total = values.reduce(function (a, b) {
return a + b;
}, 0);

In ES6 however, thanks to Arrow functions, you can simply write:
// ES6
var selected = allJobs.filter(job => job.isSelected());

var total = values.reduce((a, b) => a + b, 0);

Template strings

ES6 also introduces a new kind of string literal syntax known as template strings. These look like ordinary strings except for the fact that they use the backtick character ` rather than the usual quote marks ‘ or “. Template strings bring simple string interpolation to JavaScript. For example:

`User ${user.name} is not authorized to do ${action}.`

${user.name} and ${action} are called template substitutions. JavaScript will plug the values user.name and action into the resulting string. The code in a template substitution can be any JavaScript expression, so function calls, arithmetic, and so on are allowed. Template strings can cover multiple lines. All whitespace in the template string, including newlines and indentation, is included verbatim in the output.

Explore our blog

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.