7. Javascript ES6: Arrow functions and expression syntax

Arrow function is a famous ES6 feature.

It is a new syntax for creating functions.

Lets check ES5 & arrow function

ES5 Function declaration:

For ES5 function we no need to assign function to a variable. Without variable we can create simple function ES5 

 

    square function(x){

        return x*x;

    }

    console.log(square(8));

 

In ES6 arrow function we wont be using function() keyword. It will start with argument followed by '=>' { }

Arrow functions allow us to write shorter function syntax. Which is introduced in ES6.

Before Arrow ES5:

   

const hi = function(){

        return "hello";

    }

   

After Arrow ES6:

In ES6 arrow function we must declare with variable as mentioned below.

   

const abc = () => {

        return "hello";

    }

   

Arrow function returns the value by default.

Arrow function always anonymous.

Arrow function Expression Syntax:

If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword as mentioned below

 

    const square = (x) => x*x;

 

This works only if the function has only one statement.

Arrow function without parantheses:

It can be written with or without the parentheses with one statement.

const square = x => x*x;

Lets create a regular arrow function and short hand syntax 

function name: getFirstName and pass argument on it.

Arrow function using regular function syntax:

    

 const fullName = 'Sleepy Coder';

    const getFirstName = (name) => {

        return name.split('')[0];

    }

    console.log(getFirstName(fullName));

 

Arrow function using short hand syntax:

     

const fullName = 'Sleepy Coder';

    const getFirstName = (name) => name.split('')[0];

    console.log(getFirstName(fullName));

 

Let see details of arrow functions

1.Arguments object -> No longer bound with arrow functions.

i.e if you try to access argument it is not going to work.

2.This Keyword -> No longer bound with arrow functions.

const add = function (a,b) {

console.log(arguments);

return a*b;

}

console.log(add(55,1,1001);

This arguments wont be there in ES6 arrow functions.

This argument will show all arguments that we passed in add(55,1,1001) along with it will show value.

    const arrowAdd = (a,b) => {

        console.log(arguments);

        return a+b;

    }

    console.log(arrowAdd(55, 1, 1001);)

   

This will throw an undefined Error. because arguments no longer bound with ES6 arrow functions.

This Keyword:

lets create a simple user object.

With arrow functions the this keyword always represents the object that defined the arrow function.

    const user = {

        name: 'Prabakaran',

        cities: ['Bangalore', 'Chennai', 'Kolkatta'],

        printPlaceLivedIn : function(){

            console.log(this.name);

            console.log(this.cities);

        }

    }

    user.printPlaceLivedIn();

   

Let's see how to loop through array map 

map:

map is array method like forEach.

1. This useful array method creates a new array with the results of calling a provided function on every element in the calling array.
2. It calls a function once for each element in an array.
3. It does not execute the function for empty elements.
4. It does not change the original array.

    const user = {

        name: 'Prabakaran',

        cities: ['Bangalore', 'Chennai', 'Kolkatta'],

        printPlaceLivedIn : function(){

            this.cities.map(city) => {

                console.log(this.name+' has Lived in '+ city);

            }

           

        }

    }

    user.printPlaceLivedIn();

This function we cant convert arrow function

printPlaceLivedIn : function(){

This is how we need to define ES6 normal function. If we declare arrow function this wont be accessible.

we can use either of below one.

   

    printPlaceLivedIn(){

       

    }

    or

    printPlaceLivedIn : function(){

    }