Arrow functions

I’m pretty impressed with Arrow functions in ECMAScript6. An Arrow function is very simple when compared to traditional function expressions.

Arrow functions are always anonymous and do bind its own this, arguments, super and new.target properties.

So, we can simply say Arrow functions are shorter functions and non-binding of this.

Let’s begin with exploring shorter functions.

To experiment shorter functions, we shall start creating a traditional function and then later we shall replace it with Arrow functions.

var fruits = ['mango', 'jack fruit', 'banana'];
var a = fruits.map(function (f) { return f.length });

console.log(`using traditional function ${a}`);

In the above code, I have created an array with my favorite fruits name (we call this combination of fruits as mukkani in South India which means three fruits).

Using map function, we have returned the length of each item and stored the final array in variable a. This is the traditional function expression we used to write earlier.

Now, let’s rewrite the same functionality with Arrow functions.

var fruits = ['mango', 'jack fruit', 'banana'];

// using traditional function
var a = fruits.map(function(f) { return f.length });

// using arrow function
var b = fruits.map(f => f.length);

console.log(`using traditional function ${a}`);
console.log(`using arrow function ${b}`);

In the above code, we have removed the return and the keyword function and added => between arguments and expression. We have stored the Arrow function results in variable b.

To make sure both the ways are returning the same set of results, we have written the values in the console. The console writing may look little bit different than our usual because I have used template literals in this example. Click here to know more about template literals.

Output:
using traditional function 5,10,6
using arrow function 5,10,6

 

this binding

In ES5, we will bind() or var self = this; to make functions to create their own “this”. We used to store parent this in a variable and use that during the callback.

Let create a timer with native this,

function MyTimer() {
 this.seconds = 0;
 setInterval(function() {
 this.seconds++;
 }, 1000); 
}

var myCounter= new MyTimer();
setTimeout(function() {
 console.log(myCounter.seconds);
}, 1200);

It will return the timer seconds first after that it will always return 0 (this.seconds in MyTimer function it won’t bind with this.seconds++ inside the setInterval function ).

In ES5, to bind the value we have to follow the technique of assigning the this of a parent to inside the function like follows:

function MyTimer() {
 this.seconds = 0;
 var self = this;
 setInterval(function() {
 self.seconds++;
 }, 1000); 
}

var myCounter= new MyTimer();
setTimeout(function() {
 console.log(myCounter.seconds);
}, 1200);

After using the self-variable, we can able to use the incremented value inside the setInterval function.

Let’s rewrite same in ES6,

function MyTimer() {
 this.seconds = 0;
 setInterval(() => this.seconds++, 1000);
}

var myCounter = new MyTimer();
setTimeout(() => console.log(myCounter.seconds), 1200);

The seconds variable is properly binded now.

Happy coding 🙂

Template literals

Template literals in ES6 allows us to embed expressions to our string literals. We can use multi-line strings and string interpolation features with them.

Template literals are enclosed by the back-tick (` `) instead of double or single quotes.

var message = `single line string`;
console.log(message);

// single line string

 

We can include place holders for string substitution using ${ } syntax

var expression = "place holder"; // string substitution
console.log(`this is a text with ${expression} in a line`);

// this is a text with place holder in a line

 

We can directly use expression interpolation to embed inline math

var a = 5;
var b = 5;
console.log(`the addition of a+b = ${a+b}`);
// the addition of a+b = 10

 

We can also call functions and use member functions in strings

function sample() { return "text from sample method"; }
console.log(`yes! ${sample()} and i am in uppercase`.toUpperCase());
// YES! TEXT FROM SAMPLE METHOD AND I AM IN UPPERCASE

The above code retrieves data from sample() method and converts it to uppercase in run-time.

 

Multiline Strings

We can achieve multi line strings, previously we used to insert new line character in our string

console.log(`First line
Second line`);
// First line 
// Second line

 

Raw strings

The special raw property, available on the first function argument of tagged template literals, allows you to access the raw strings as they were entered.

String.raw`Hi \n ${2+3}!`;
// "Hi \n 5!"

 

Tagged template literals

A more advanced form of template literals are tagged template literals. With them we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.

var a = 1;
var b = 2;

function tag(strings, ...values) {
 console.log(strings[0]); // "One "
 console.log(strings[1]); // " Two"
 console.log(strings[2]); // " Three"
 console.log(values[0]); // 1
 console.log(values[1]); // 2
}

tag`One ${ a } Two ${ b } Three`;

// One 
// Two 
// Three
// 1
// 2

Happy exploring ES6 🙂