What Is ES6 JavaScript, and How Is It Different?

ES6 JavaScript.

JavaScript powers most of the interactive web, so it had to evolve in parallel. New JavaScript features are added every year now; let’s see what’s new and how you use JavaScript ES6 on your website.

JavaScript has many flavors

Oracle has a trademark on the term JavaScript, so the current standard that JavaScript implements is called the ECMAScript standard, or ES. The main JavaScript standard is ECMAScript 5, or ES5, released in 2009. It is a vanilla JavaScript without any special functionality, supported everywhere, even in IE 9.

ES6 is a relatively new specification, released in 2015, and supports many new features. It is technically called ES2015, and each annual version after is indicated by the year of its release. But everyone calls it ES6 anyway, so we stick with that.

ES6 is important, in particular, because it marks the beginning of the normalization of JavaScript. Today, ECMA publishes a new standard every year. But ES6 came out 6 years after ES5, 10 years after ES3, so it’s an important step.

How to use ES6 syntax

ES6 is actually supported in many places, the main problem being Internet Explorer (as usual). So while you can start writing in ES6 style, you can’t be sure that everyone’s browser will behave the same way.

Nowadays, it is still generally compiled in “regular” ES5 syntax using a utility like Babel. Babel is a compiler that will convert your development code (written in ES6 with all its goodies) into code that you will execute on your production site, often integrated and minified with Webpack as well as.

Here’s how it works: you have your development environment where you write your .js files. You are free to use the ES6 syntax of your choice. Rather than running them directly, you configure Webpack load JS files with Babel. Often you will want to run webpack-dev-server, so this happens automatically when you make changes.

Now, instead of loading index.js, you load bundle.js, which contains all of your code. This also has the great advantage of allowing you to use NPM modules in your JS, although it can make your code bulky if you add too much (although the webpack is good enough for minification).

What’s up

There is a lot to unpack here, so this article will certainly not cover everything. For a complete list, you can consult this compatibility table, who also includes ES2016 and newer features.

In general, if Babel can compile something according to an old JS specification, it’s probably safe to use it in development. If not, and you don’t care about the 3% of the population using IE 11, it is probably supported in most browsers, provided it is not a great new feature.

Arrow functions

Rather than typing:

arr.map (function (d) {
return d + 1;
});

You can instead replace the keyword function with an arrow after the parentheses:

arr.map ((d) => {
return d + 1;
});

In addition, you don’t need the parentheses if you only pass one argument. And, you don’t need the square brackets and the return statement if you only return one value:

arr.map (d => d + 1);

This is the new expression closures and makes functions well compacted, especially when working with lists, reminders or error handling. It is similar to single line operation if the instructions work.

Simplified creation of objects and tables with destructuring

Rather than writing:

var type = “123”, color = “blue”
var obj = {type: type, color: color}

You can just omit the key names, and they will be automatically set to the variable names:

var obj = {type, color}

In addition, it works the other way, called destructuring assignment:

var {type, color} = obj

A sophisticated side effect of destructuring is the syntax …, which acts like “etc.” and assign the rest of the array or object to a variable:

var {type, … rest} = obj

// rest == {color: “blue”}

And, it also works the other way around, which has the effect of expanding and flattening the tables:

var arr1 = [“a”, “b”], arr2 = [“c”, “d”]
var flat = […a, …b, “e”]

// dish = [“a”, “b”, “c”, “d”, “e”]

There is much more to destructuring than what’s covered here.

Classes

JavaScript now has classes. Here’s how it works, from Mozilla documents:

class Rectangle {
constructor (height, width) {
this.height = height;
this.width = width;
}
// Get
get area () {
return this.calcArea ();
}
// Method
calcArea () {
returns this.height * this.width;
}
}

const square = new Rectangle (10, 10);

console.log (square.area); // 100

As you can see, it is similar to other object oriented languages, but not entirely. As Mozilla says, this new system is “mostly syntactic sugar compared to legacy based on existing prototype JavaScript” and does not actually make JS object oriented. But it’s still nice to have.

In addition, the class syntax supports static methods and properties, and children’s course, but a child class cannot inherit from several parents.

Changes to function arguments

ES6 introduces two new ways to write function parameters. First, the default parameters can be specified by assigning a value in the function definition:

var func = (a, b = “default”) => {}

If you were to call func without specifying two arguments, it would take the default value.

In addition, functions can now receive an indefinite number of arguments in the form of an array, called syntax of rest function parameters:

var func = (a, b, c, … rest) => {}

The rest parameter will be defined on an array of the other parameters of the function, or undefined if there are no more than the named parameters.

let and const

The let command is a replacement for var that specifically grants the scope of the block. Here’s how variables normally work in JS:

var x = 0; // global variable

someFunc () function {

var y = 3; // local variable

}

The global variable can be used in the function, but the local function variable cannot be used outside the function. This is what allows you to name your variables “i”, “tmp”, “x” and “count” all the time and get by.

The scope of the blocks is different and allows you to redefine the variables with nested blocks:

var x = 0

{
either x = 2
// x == 2
}
// x == 0 again

The let syntax basically allows you to modify the contents of x in this block (be it a function, a catch block or an explicit block like this) and reset it when you leave the block. This is particularly useful for these temporary “counting” variables, as each block will have a different scope. The scope is inherited from child blocks, but can be nested and changed again.

The const syntax is quite simple. Replace var with const, and your variable is now read-only. If you try to write to it, it will launch:

TypeError not captured: assignment to a constant variable.

Let you know that you are trying to do something that you should not be doing. This has no other purpose than to be a good reminder during coding to avoid certain bugs.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.