Getting Started with ES6 Arrows

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

(msg)=>console.log('Hello World')

ES5

'use strict';

(function (msg) {
  return console.log('Hello World');
});

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

// Multiple Parameter
(arg1,arg2,arg3,arg4)=>{
  return arg1+arg2+arg3+arg4
}

// Single Parameter 
(arg1)=>{ 
return arg1
}

ES5

"use strict";

// Multiple Parameter
(function (arg1, arg2, arg3, arg4) {
  return arg1 + arg2 + arg3 + arg4;
});

// Single Parameter 
(function (arg1) {
  return arg1;
});

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

// Single Line Closure
var SayHello=(hello)=>console.log(hello)

// Multi Line Closure
var SayHelloAgain=(hello)=>{
console.log('This is a multiline Closure')
console.log(hello)
}

// Calling the Two above Closure
SayHello('Hey I am ES6 Arrow')
SayHelloAgain('Heya Again!!!');

ES5Object

'use strict';

// Single Line Closure
var SayHello = function SayHello(hello) {
  return console.log(hello);
};

// Multi Line Closure
var SayHelloAgain = function SayHelloAgain(hello) {
  console.log('This is a multiline Closure');
  console.log(hello);
};

// Calling the Two above Closure
SayHello('Hey I am ES6 Arrow');
SayHelloAgain('Heya Again!!!');

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

var createObject = (x,y,color)=>({x:x,y:y,z:z})

ES

"use strict";

var createObject = function createObject(x, y, color) {
  return { x: x, y: y, z: z };
};

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.

Originally published at The Web Juice.