Arrow function in JavaScript

Arrow functions expression is an alternative to traditional function expression. They are similar to lambda functions in python. These functions are often used in passing a function as a parameter to higher order functions. It is one of the features introduced in ES6.

The function ,

// function expression
let x = function(x, y) {
   return x * y;
}

Can be written as

// using arrow functions
let x = (x, y) => x * y;

Syntax:

let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}

myFunction – name of function

arg1,arg2,…argN – arguments of function

statement(s) – function body

Example:

The below example illustrates arrow functions with

No arguments
Single argument
Function expression
Function body

No arguments:

// with no argument
let noarg = () => console.log('Abaython');
noarg(); // Abaython

One argument:

// with one argument

let onearg = x => console.log(x);

onearg('Abaython'); // Abaython

As Expression:

//as expression
let num = 50;
let func = (num > 20) ?
  () => console.log('Greater than 20') :
  () => console.log('Less than 20');
func(); // Greater than 20

Function Body:

let sum = (a, b) => {

    let result = a + b;

    return result;

}

let result1 = sum(10,20);

console.log(result1); // 30

Output:

Abaython

Greater than 20

Arrow functions and this keyword:

In a regular function this keyword refers to the function where it is called. But arrow functions does not have this and it refers to its parents scope whenever called.

function Employee() {
    this.name = 'Anna',
    this.age = 25,
    this.sayName = function () {

        console.log(this.name);
        let Func = () => {
            console.log(this.name);
        }

        Func();
    }
}
const x = new Employee();
x.sayName();

Output:

Anna

Func() is defined within arrow. Inside the arrow this keyword refers to parents scope and returns this.name as Anna.

Argument bindings:

Arrow functions don’t have argument bindings.

let x = () => {
    console.log(arguments);
}
x(10, 20); // error

Output:

Reference error

To solve this use spread syntax.

let x = (...n) => {
    console.log(n);
}
x(10, 20); // [10, 20]

Output:

[10, 20]

Limitations:

Arrow functions does not have bindings to this, arguments or super and should be used as methods.
Calling arrow functions with new throws type error. They cannot be used as constructor.
They cannot use yield within their body and cannot be created as generator function.
You should not use arrow functions to create methods inside objects.

Key differences with Regular function:

No prototype object for arrow functions
Duplicate-named parameters are not allowed.
Does not have argument object.

When to use them?

Arrow functions can be used when we need to bind this to the context and not to the function itself. It is a clear and concise way to write callbacks without exposing the scope that should be hidden.

In the coming article will try to ellaborate the difference with regular functions.