ES6: Scripting Better JavaScript

Are you tired of maintaining your object-oriented code in JavaScript? The new JavaScript standard, ECMAScript 6, has good news for you. New syntactic sugars have been added to the language that make writing and maintaining object-oriented code in JavaScript a delight.

Let’s explore what’s in store for you.

ECMAScript 6 (ES6), released in June 2015, reduces complex multi-line codes into shorter readable lines of code. It has made some of the commonly used third-party library-based functionalities into built-in methods. New syntactic techniques have been added to make the code concise and more readable. The major syntactic improvement is in the addition of class and extends keywords that makes Object-Oriented Programming (OOP) a first-class citizen in JavaScript.

1. OOP

Class and extends are the main concepts of OOP. Functional programming languages like JavaScript do not provide a clean and direct way to express these concepts. As a result, it is often cumbersome to write clean object-oriented code in JavaScript. ES6 handles this issue with the addition of keywords like class and extends.

Consider you want to write a class representing Lion, which is a subclass of Mammal, which in turn is a subclass of Animal.

Representation of Lion within Animal Kingdom

 

Here’s how you do that in ES5 and ES6:

OOP in ES5

OOP in ES6

ES6 Advantages

    • There are fewer lines of code for extending a class.
    • The code is more readable.

 

2. Arrow Functions

Arrow functions reduce syntax complexity in anonymous functions. In ES6, multi-line functions will become a one-line code.

Arrow Functions in ES5

Another example,

Arrow Functions in ES6


ES6 Advantages

    • Cleaner Lambda Expressions: Anonymous functions can be written without name and the function keyword. If the body contains a one-line code, then you don’t need to use opening and closing parentheses. So it would now look like Lambda expression.
    • Lexical Scoping: Lexical scoping of this keyword is another advantage of arrow functions. In ES5, it is not possible to use this of a parent function inside its inner function.

 

3. Modules

JavaScript developers use third-party libraries to extend the functionalities of an application. Due to the fast growth of JavaScript as a web development language, a lot of third-party libraries have emerged in a short period.

ES6 has introduced a generic solution by adding modules to the application. Import and export keywords are used to implement this. Module importing is similar to that in Node.js.

A module can provide variables and functions to importing applications. Only those variables that are marked with export keyword (referred to as the public variable) will be accessible in the importing applications. These export variables should be declared at the top of the module.

ES6 modules are currently not available to any browser. However, by using transpilers we can compile ES6 modules to node-style or Asynchronous Module Definition (AMD) modules.

Module in ES5

Not available in ES5.

Module in ES6

var studentId = ‘23’;   //  private data
export var studentName = ‘Sachin’;  // public data
export function attendExam(){
// function body
}
Consider the above module is named  ‘student.js’, we can import its public data by the following method:
import { attendExam } from “student.js”;
attendExam();

ES6 Advantages

    • It is easy to load external resources asynchronously.
    • The code is more modular.
    • It is easy to add functionalities.
    • Simplicity and usability.

 

4. Block Bindings

In ES5, the scope of the variable created using var is available outside the declared block with the value “undefined.” This can lead to confusion in developers. ES6 introduces two new keywords to address this:

    • let, for creating variables inside a block, where its scope is limited to the declared block.
    • const, for declaring constants. It must be initialized on declaration.

Block Bindings in ES5

let and const are not available in ES5.

Block Bindings in ES6


ES6 Advantages

    • ES6 introduces lexical scoping.
    • In each iteration of for loop, let can create a new binding (while var binds only the last value to each iteration).

 

5. Promises

One of the attractive features introduced in ES6 is promises. Promises handle success and errors of asynchronous actions. Currently, different JavaScript frameworks like AngularJS and RSVP.js have this functionality. Promises replace callbacks in ES5 with several additional functionalities. Promises also have chain functionality and other functions such as resolve, reject, race and all.

Promises in ES5

Not available in ES5.

Promises in ES6

ES6 Advantages

    • It is easy to handle multiple asynchronous actions.
    • The code has a modular structure.

 

6. Extended Parameter Handling

ES6 has the feature to add default value to parameters on defining functions. This will reduce the complexity of initializing objects.

Extended Parameter Handling in ES5

Extended Parameter Handling in ES6


ES6 Advantage

    • There is a simple syntax to add default parameter values.

 

Other Syntactic Sugars

ES5 ES6
[1,2,3,4,5,6].filter(function(x){ return x<2 }) [1,2,3,4,5,6].find(x => x<2)
“hello world”.indexOf(“world”) !== 1; // true “hello world”.includes(“world”) // true

var name = “Tom”;

var class = “10”;

var student = {
‘name’: ‘Tom’,

‘class’: ‘10’

}

var name = “Tom”;

var class = “10”;

var student = { name, class }

var a = [1,2,3];

var b = [4,5];

a = a.concat(b) // a = [1,2,3,4,5]

var a = [1,2,3];

var b = [4,5];

a = [a, …b] // a = [1,2,3,4,5]

var student = { name: “Tom”, class: 10 }
var string = student.name + “is in class \n” + student.class;
var student = { name: “Tom”, class: 10 }
var string = ‘${student.name} is in class ${student.class}’

var a=10, b=20; // swapping values

var temp = a;

a=b;

b=temp;

var a=10, b=20;

[a, b] = [b, a]

 

Conclusion

ECMAScript 6 will reduce the complexity of developing huge event-driven applications in JavaScript. With ES6, code reusability and readability will vastly improve. The object-oriented programmer in you would be happy too.

You May Also Like