ES6 Tutorial - Arrow functions
   Dec. 27th,2017
   Ismail Nassor Mbarack

Arrows are a function shorthand.Instead of writing the whole function keyword we can simply replace it with => .Their syntax is similar to the functions in Java 8, C# and CoffeeScript. If you are familiar with some backend languages like Java then you are going to love the arrow syntax. Let's take a look at the following examples.

let toDoList=['Buy some groceries','Play with my son','Write s tutorial','Watch TV'];

toDoList.forEach(function (singleToDo,index) {
    console.log(index+":"+singleToDo);
});

console.log("=========&&&&&&&&&=========");
//remove the function keyword and add => after the parantheses
toDoList.forEach((singleToDo,index) => {
    console.log(index+":"+singleToDo);
});

 

See what we did above was to simply remove the function keyword and add the arrow after the parenthesis and the result is exactly the same, how simple was that. At the beginning, you may find it weird to write a function like that, trust me I had the same feeling as well.Give it a try and after some time it's gonna get into your reflex actions.I almost no longer type the word function in my codes recently.The arrow syntax just doesn't end up here, they have some sugar added on top to make them soooooo amazing.

If you happen to only have one argument in your function then the parenthesis could be omitted entirely.

let toDoList=['Buy some groceries','Play with my son','Write s tutorial','Watch TV'];
//remove the function keyword and add => after the paranthesis
//paranthesis could be omitted
toDoList.forEach( singleToDo => {
    console.log(singleToDo);
});

 

If you have no arguments completely parenthesis are a must, without them, the compiler won't compile your code.

let toDoList=['Buy some groceries','Play with my son','Write s tutorial','Watch TV'];
//remove the function keyword and add => after the paranthesis
toDoList.forEach( () => {
    console.log('it works');
});

 

Curly braces on the function could be omitted if you're only executing a single line of code.Look at how this code got cleaned up.

let toDoList=['Buy some groceries','Play with my son','Write s tutorial','Watch TV'];
toDoList.forEach( (singleToDo) => console.log(singleToDo) );

 

The return keyword can be completely omitted if you're only executing a single line of code.

let friends = ['Eddie','Barack','Ibrahim','Lisa'];
let alteredFriends = friends.map((el,index)=>{
    return el+' is cool';
});

console.log("=====with return keyword======");
console.log(alteredFriends);

let otherFriends = friends.map((el,index)=> el+' is cool' );
console.log("=====without return keyword======");
console.log(otherFriends);

 

The keyword this in ES6 refers to the root object or class.Take a look at the example below

console.log('========this in ES6=========');
let myObj={
    teacher:'Nas',
    students:['Mike','Tom','Hassan','Malaika'],
    showRelationship(){
        this.students.forEach( (singleStudent) => {
            //this refers to the main object myObj
            console.log(this.teacher+' knows '+singleStudent);
        });

    },
}
myObj.showRelationship();

console.log('========this in ES5=========');

function mySecondObj() {
    this.teacher='Nas';
    this.students=['Mike','Tom','Hassan','Malaika'];
    this.showRelationship = function showRelationship() {
        this.students.forEach(function () {
            //this is undefined
            console.log(this);
        });
    }
}

var friendship = new mySecondObj();
friendship.showRelationship();

 

 

 

That's all about arrow functions in a nutshell.Have fun with them......