5 Most important new features of ES6

5 Most important new features of ES6

Whether you’re working or preparing for an interview where you might get some tricky questions about JS the following 5 features can prove to be useful. The ECMAScript6 (ES6) final specification was released in 2015 July, since then it’s supported in Node, new browsers and you can transpile the code to ES5 with babel to be compatible with older browsers. Let’s get to it.

1. Let and const, block-scoped variables.

On a high level, using const and let will result in a more robust codebase, which is easier to understand, because your code will be more restricting.

Const keyword prevents the value of a primitive from changing or a new object being made and overwriting an existing object. Using const over let/var has one huge advantage in my opinion:

It makes the intent of your code much clearer, leading to a quicker understanding of it whenever anyone takes a look at it, a readable clear code is nowadays one of the most important attributes of good code.

The let keyword is a nice improvement after var which is function scoped when let is block scoped. As you can see in the example a variable created with var in a loop can be seen outside of it, when the same thing cannot be said for let.

Example for var:

JS Bin on jsbin.com

Example for let:

JS Bin on jsbin.com

2. Arrow functions

This shouldn’t be new to anyone who is using the language on a daily basis.

JS Bin on jsbin.com

Basically, it looks like syntactic sugar for a simpler function declaration although arrow functions in ES6 have at least two limitations:

  • Doesn’t work with new.
  • ‘this’ doesnt get bound, so you cannot use the instance variables.

So for example in the next scenario, it wouldn’t work because ‘this’ wouldn’t be bound to the function. (You could make it work with anonymous functions but it wouldn’t be as nice as this.)

JS Bin on jsbin.com

3. Classes

So finally ES6 introduced classes to the language, so people can understand/write code with less invested time, finally, you can write code which is somewhat similar to OO stuff like Java, although JS doesn’t have interfaces nor abstract classes. Classes are syntactic sugar for its hard to understand prototypal inheritance. The main difference between classes and constructor functions (which are used to create instances pre ES6) is hoisting, so first you must declare your classes and you can only use them after that. (In Javascript functions and ‘var’ declarations get hoisted, which means you can use them in your code before you have declared them.)

Lets see an example for a class with ES5:

JS Bin on jsbin.com

With ES6:

JS Bin on jsbin.com

The inheritance is where it gets tricky with the prototype syntax, as you can see its pretty complicated with ES5:

JS Bin on jsbin.com

The same thing with the new version is way more easy to understand and less code:

JS Bin on jsbin.com

4. Spread operator

Spread operator is a really great addition to the language it has multiple use cases:

  • as function parameters
  • copying arrays
  • copying objects

So let’s see the first use case as function parameters, as you can see we want to pass multiple parameters to our function and we don’t know how many to expect. After the first one, the rest of the parameters are going to be in an array. This way we can create really versatile functions.

JS Bin on jsbin.com

The second use case is copying arrays, let’s see an example for this. Its pretty straightforward, we copy the first array into the middle of the second one.

JS Bin on jsbin.com

Copying objects are pretty similar to arrays:

JS Bin on jsbin.com

5. Default function parameters

Default parameters are a nice add on for the language, it helps in writing denser and easy to understand code and in my opinion, it’s nicer than function overloading (what we have in Java and C++). In many cases, we want to create a function where most of the time we want to pass only one parameter but in some edge cases, another parameters are necessary. Let’s see an example.

JS Bin on jsbin.com

I hope these 5 features will help you preparing for your next interview, becoming a better developer. Be sure to experiment with these examples, it is the best way that you won’t forget them.


Leave a Reply

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