Features with ES6

In 2015 the new standard of JavaScript was released and stabilized as ES6. It’s a new implementation for Javascript but you can use the ES6 standards with any scripting language like Typescript that is used as base for new Angular 2 and onward. While the first version of Angular was based on Js which left AngularJs with some loose ends, the Angular developers aimed to remove those in the next version of Angular by using typescript as base and re-defining the whole framework. Typescript provided many benefits that are now part of new Angular frameworks.

So lets see what important features were provided by ES6. It has many more but the below list of features are the most attractive & useful in my opinion –

1. Default Parameters
2. Template Literals
3. Multi-line Strings
4. Fat arrow Functions
5. Let & Const
6. Classes

1. Default Parameters – This doesn’t seems to be a very big enhancement but it’s quite a useful feature by ES6. If you did programming in js before you must have fought with checking the function parameters value in the code before performing any further operation on that data. But with ES6 you can initialize the parameters right on the function definition as default values for the parameters.

// ES5
var building = function (floors, area) {
  if (floors == 0) {
    floors = 1; // default floor set to 1 if data passed is 0
  }
  if (area == 0) {
    area = 100; // default area set to 100 if data passed is 0
  }
  ...
}

// ES6
var building = function(floors = 1, area = 100){
  ...
}

2. Template Literals – It is an old way of using expressions in your js file. Similarly like JSP allowed us to use java experessions within HTML. Using this way it saves developer’s time & effort of evaluating a value and performing some action based on that. Template literals are enclosed by back-ticks(` `) and syntax for using it is (${expression}).

// ES5
alert('Say hi to '+ programming)

// ES6
alert(`Say hi to ${programming}`)

3. Multi-line Strings – This is a cool feature that I like most, since if you had trouble formatting a long multi line string in past this is a savior. As I myself had a lot of tasks to perform using a long string say in email body or a notification message to user, code used to become a lot clumsy & hard to follow if your string is grwoing bigger and ES6 has catered this problem very well. See this example-

// ES5
var email = 'The traditional way of writing a big string was'
          +' complicated in terms of giving proper spacing'
          +' alignment & column count.'

// ES6
var email = `But with ES6, you don't have to worry about anything,
            just use back-ticks & start building your string
            no matter how long your string is. Have fun.`

4. Fat arrow functions – The fat arrow function is a simplified and efficient way of writing functions in JS. As you can see in the code below fat arrow function not only allows us to reduce the size the code but also it reduces the overhead of scoping. With ES5 we used to bind the global scope with the function scope using self = this or .bind(this), but that is not required with ES6.

// ES5
var output = function(name) {
  return ('User name is: ' + name);
}

// ES6
const output => (name) => { return ('User name is:' + name) };

5. Let & Const – The variable declaration was the easiest in Js compared to any other language because there were no specific data types for any data requirement, just use var for any data. But with ES6 now we can define in 2 different types either let or const. So when do I use Let & Const in my code. Lets see this with an example

// ES5
var speed = 50;
var wheels = 4;
function runMyCar(speed, wheels) {
  speed = 100;
  console.log('Now my car is running at '+ speed);
}

// ES6
let speed = 50;
const wheels = 4;
function runMyCar(speed, wheels) {
 speed = 100;
 console.log('Now my car is running at '+ speed);
} 
const output => (name) => { return ('User name is:' + name) };

So as you have noticed the const are immutable & let are mutable data values. And both are block-scoped.

6. Class – Lastly the biggest of all – Classes, yes that is true now the same object-oriented programming (OOP) concept is available to use in scripting language. Now we can encapsulate the data & functions more effectively and make it public & private based on data sensitivity or program requirement. Though ES5 do had the class concept but it was not easy to develop so generally people have avoided that.

With ES6 the implementation is as simple as we used to do in any other OOP languages.

// ES6
class Shape {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  getArea() {
  return length*width;
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super(length, width);
    this.name = 'Rectangle';
  }
  getName() {
    return this.name;
  }
}
// Now you can create an object of the child class & call the method.
let rectangle = new Rectangle(10, 5);
console.log(rectangle.getArea());
console.log(rectangle.getName());

// Output
50
Rectangle

There are many more features available with ES6 apart from the mentioned list. These are some picks by me. Please feel free to leave your thoughts on this.