ES6 features — A walk through

We are going to discuss few ES6 features which we can use while coding.

Template Literals

The below code shows what is template literals in ES6 compared to ES5

We are using backtick character here. To add a placeholder in a template literal, we use the ${expression} syntax. You can replace “expression” with any JavaScript expressions. Another benefit of using template literals is that they can expand multiple lines.

Let and Const

we used the var keyword to define variables in ES5. The scope the var keyword is the entire enclosing function. Here’s an example:

Another issue with the var keyword is that if you use it at the top level outside of a function, it creates a property on the global object. ES6 introduced 2 new keywords for resolving these issues: let and const. Both these keywords define variables that are scoped to the containing “block” not “function”:

With const we can define a constant. So we cannot reassign it later:

Also let and const don’t create a property on the global object if you use them at the top level:

Arrow Function

Here’s a function expression in ES5:

With arrow functions, we get rid of the function keyword and put a fat arrow (=>) between the parameters and the body of the function:

If our function is a one-liner and returns a value, we can drop the return keyword as well as the curly braces:

If our arrow function includes only a single parameter, we can even drop the parenthesis:

If our arrow function doesn’t have any parameters, then

Arrow functions are particularly useful when you need to pass callback functions as arguments:

Arrow functions, unlike normal functions, don’t rebind this.

Arrow functions use the this value of the enclosing execution context. So, if we replace the inner function above with an arrow function, we don’t need to keep a reference to this anymore.

Destructuring

Destructuring is an expression that allows us to extract properties from an object, or items from an array. Let’s say we have an address object like this:

Now, somewhere else we need to access these properties and store their values in a bunch of variables: here is both ES5 and ES6 versions

We can also destructure arrays but we use square brackets ([]) instead of curly braces ({}).

Default Parameters

In ES5, if any of the function parameter don’t have a value means we will be checking whether its undefined and assign some default value.This can be done easily in ES6 as below:

Import and Export

allows you to export a module to be used in another JavaScript component. We use to import that module to use it in our component.

If we want to export a single value or to have a fallback value for our module, we could use a default export:

default export is only one per module.In the case of named export, we have to write like:

Promises

Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!

The Promise takes two parameters: and to handle an expected error.To consume the Promise — meaning we want to process the Promises value once fulfilled — we attach a handler to the Promise using it’s method. This method takes a function that will be passed the resolved value of the Promise once it is fulfilled.

Note: the fetch function returns a Promise itself!

Rest parameter and Spread operator

operator spread the elements of array into individual values.

We have put in front of array, so it spread the elements of array into individual values. It allows to split an array to single arguments which are passed to the function as separate arguments.

Now, let’s concatenate two arrays:

Output would be ;

Now, let’s look at the operator.

As the name suggests, Rest operator will take care of the rest of the parameters. Here is a snippet:

The output of above code would be .

As you can see the x and y have been assigned the values 1 and 2 respectively whereas rest of the parameters got assigned to z. Rest parameters are indicated by three dots preceding a parameter. Named parameter becomes an array which contain the rest of the parameters.

Remember: It’s the same three dots …, the how and where of use, makes these three dots Spread or Rest.

Classes

Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

More about classes can be referred here MDN classes

Thanks to Mosh and Other medium articles for making me understand all this :D

Happy Reading!

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store