Introduction to ES6 Arrows

ES6 introduced the Arrow syntax for the definition of a function. Typically it’s the same as you have in languages such as C#, Java or if you are acquainted with CoffeeScript then this is just a cake walk for you. This actually helps us as a shortcut for the function definition and can make the code really less cumbersome while you go through it. They support the statement as well as expression block and they share the same lexical this with the surrounding code, unlike functions. I have hereby mentioned some example with sample output. Hope this helps you understand the code better.

Let’s go through multiple blocks of code in order to understand the ES6 Arrows. We will take you through a journey which through which you can never forget the use of ES6 Arrows.

Defining Anonymous Function using ES6 Arrows

The code below helps you to define an anonymous function using ES6 Arrows. It’s so easy and the syntactical sugar makes you love it.

ES6

ES5

You can see from this sample what a Syntactical sugar does. It makes the code so easy to read. We will go through some more examples. You can view this sample out here

Single and Multiple Arguments

The ES6 Arrows can easily take up single and multiple arguments. It’s so easy to deal with these. Have a look at the code below. You can see that it pans out again as an Anonymous function. Now in the third section, we will make things work. You can see the same in action here.

ES6

ES5

Defining Closures using ES6 Arrows

Closures can be easily defined by using the below-mentioned code. If you look closely you can see that how these closures are compiled into a normal JavaScript Closure in ES5. You can have a look at these out here.

ES6

ES5Object

Object Literal Syntax using ES6 Arrows

Object literals can easily be returned using the Arrow syntax. The only thing you need to follow is to wrap your Object Literal into a Parenthesis. You can see it below and you can also see it in action at the link here.

ES6

ES

This should give you a good understanding of what the ES6 Arrows are capable of and what are the different ways in which you can utilize it.

 


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This