JavaScript

What’s new in JavaScript ES6?

JavaScript is considered to be among the most widely used and popular scripting languages; It was invented in 1995 and originally called Mocha but eventually became JavaScript. The language JavaScript was invented by BrendanEich and turned into the ECMA standard; ES1, ES2, ES3, ES5, and ES6 are  numerous versions of ECMAScript.

JavaScript ES6 is a standard for ensuring web page interoperability in various web browsers. ES6 is the 6th version of JavaScript programming language. It’s a major improvement in the JavaScript language, adding more features to facilitate large-scale software development. Few features of the ES6 script are not supported by all the browsers, but most are supported; almost all the famous web browsers support all the features of ES6.

Transpiler software can be used to transform ES6 code into ES5, which is the older version of JavaScript and hence more compatible with browsers.

In this article, we look at some changes ES6 brought in JavaScript.

Features of ES6 JavaScript

Constants known as Immutable Variables : ES6 now supports the notion of constant variables. The value of these variables cannot be modified. An error will be triggered if someone tries to redefine the variable in the similar scope:

const pi = Math.PI;
// Output: Value of PI
console.log(pi);

pi = 4;
// TypeError: Assignment to constant variable.
console.log(pi);

{
const pi = Math.PI;
// Output: Value of PI
console.log(pi);
}

const pi = 4;
// Output: 4 (without any error as it is out of the scope)
console.log(pi);

If an object has been declared using const, its keys cannot be changed. However its values can be changed:

const user = {
    name: "Steve",
    age: 13
  }

  user = {
    userName: "Harry",
    grade: "3rd"
  } // TypeError: Assignment to constant variable.

const user = {
    name: "Steve",
    age: 13
  }

user.name = "Harry";

console.log(user);

Rules of Blocked Scope Functions & Variables

Another important new feature of ES6 is that variables can be declared through let and const which follow block-scoped rules. Through this block-scoped rule, the variable holds its value until the end of the block. The value of the outer block will be restored after the inner block:

let a = 5;
// Output: 5
console.log(a);
{
    let a = 4;
    // Output: 4
    console.log(a);
}
// Output: 5
console.log(a);

Arrow Functions

ES6 also supports arrow functions that are almost the same as JavaScript traditional functions but are more compact. In the example below we have made an arrow function which takes a number as an argument and returns the value of its square:

sq = a => a*a;

console.log(sq(5));

The arrow functions do have their limitations and cannot be used everywhere.

Handling of Function Parameters

ES6 gives us the option to set default values for the parameters of a function. If no arguments are given when calling the function then the default parameters are used:

function sq(a = 5, b = 3) {
    console.log(a + " + " + b + " = " + (a+b));
}

sq(5, 9);
sq();

Parameters of Rest Function

Rest parameters function is another feature of ES6. This feature helps you to receive any number of arguments whenever the function is called. The syntax shown below allows you to capture the remaining arguments after the defined argument in an array:

function restParams(a, b, ...params) {
    console.log(a);
    console.log(b);
    console.log(params);
}

restParams(1,2,3,4,5,6,7,8,9);

Template literals

A string template or template literal refers to interpolate variables and expressions as strings using a Perl syntax. In simpler words a string can be enclosed in backticks (`) and these strings can include (interpolated) expressions by using the ${···} syntax:

var firstName = 'John';
var lastName = 'Doe';
console.log(`My name is ${firstName} ${lastName}`);

Properties of Object

ES6 provided a new syntax for the creation of objects. Here is the example:

var firstName = 'John';
var lastName = 'Doe';
var id = 03;
var department = 'Education';

var employeeData = {firstName, lastName, id, department};
console.log(employeeData);

Syntax of Formal Class Definition

JavaScript ES6 supports formal class definition syntax. It’s a simple syntactic sugar for prototype based classes that’s already available, but it helps improve code clarity. This means that this hasn’t added a new object model.

class circle {
    constructor(radius) {
        this.radius = radius;
    }
}

var c = new circle(8);

Methods Declaration

ES6 JavaScript provides a simpler way to declare methods. Earlier, in ES5, we had to mention the keyword “function” along with the function name while defining it. However, in ES6, we can use the arrow function and we are not obliged to write the “function” keyword. Here is the example:

In ES5

var diameter = function(radius) {
  let dia = 2*radius;
  return dia;
};

diameter(8);

In ES6

var diameter = (radius) => {
  let dia = 2*radius;
  return dia;
};

diameter(8);

For/Of Loops

Using for/of, you can iterate over iterable data structures such as arrays, strings, maps etc:

var num = [5, 6, 7, 8, 9];

for (let d of num)
{
  console.log(d);
}

Conclusion

ES6 is the second major revision of JavaScript which was released back in 2015. There have been yearly additions to JavaScript in ES7, ES8, ES9 and so on but these new versions have not brought any significant change. In this article, we briefly explained what ES6 JavaScript is, the benefits of the ES6 version and some of the new features introduced in version ES6.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.