DEV Community 👩‍💻👨‍💻

Cover image for JavaScript : Arrow Functions
Kiran Raj R
Kiran Raj R

Posted on

JavaScript : Arrow Functions

Functions are sets of statements that perform a specific task bundle together under a name. Functions are one of the fundamental building block of JavaScript. A function definition consists of function keyword followed by function name, list of parameters enclosed in parenthesis and function statements enclosed in curly brackets.

// Example of a function declaration
function displayName(fname, lname) {
    console.log(`${fname} - ${lname}`)
}
Enter fullscreen mode Exit fullscreen mode

Functions can also be created using function expression.

//Example of function expression
let displayName = function(fname, lname){
    console.log(`${fname} - ${lname}`)
};
Enter fullscreen mode Exit fullscreen mode

In ES6 another method was introduced to create function, called arrow function.

Arrow function syntax

  1. parameter => expression
  2. (parameter1, parameter2..) => expression
  3. parameter1 => { // statement1 // statement2 // .... }
  4. (parameter1, parameter2..) => { // statement1 // statement2 // .... }
let arrFun = (argA, argB...) => expression; 
Enter fullscreen mode Exit fullscreen mode

The equivalent of the above arrow function is

let arrFun = function(argA, argB...) {
  return expression;
};
Enter fullscreen mode Exit fullscreen mode

How a function can be made into an arrow function?

We will explain it with an example, first we declare a normal function to compare with the arrow function. The function take two arguments, multiply the arguments are return the result. The code is given below.

// Normal function
function doSomething(varA, varB){
    let result = varA * varB;
    console.log(`${result}`);
    return result/2
}
Enter fullscreen mode Exit fullscreen mode

Now let's create a arrow function which is equivalent to the above function. We will do it by editing the above code such a way that we get a arrow equivalent. We first remove the function keyword, then the arguments are enclosed in parenthesis. If there are no arguments then an empty parenthesis is used, if only one argument is passed we can omit the parenthesis. After that we use T_DOUBLE_ARROW (=>), then the function code is enclosed in curly bracket. If there is only one statement we can omit the curly brackets also. return keyword can be omitted inside the arrow function as the arrow function has an implicit return, if function statements are not enclosed in curly brackets. The equivalent arrow function code is given below.

// Arrow function
let doSomething = (varA, varB) => {
    let result = varA * varB;
    console.log(`${result}`);
    return result/2
Enter fullscreen mode Exit fullscreen mode

Some more arrow function examples are provided below.

// Normal Function
function square(x) {
    return x * x;
}
//Arrow function
let square x => x*x;

// Normal Function
function add(x,y){
    return x + y;
}
//Arrow function
let add = (x,y) => x+y

//Normal function
function() {
    return a *10;
}
//Arrow function
() => a * 10
Enter fullscreen mode Exit fullscreen mode

Let's look at another example.

let object1 = {
    fname : "kiran",
    lname : "raj",
    greet : function(){
        console.log(`${this.fname} ${this.lname}`)
    },
    arrow_greet : () => console.log(`${this.fname} ${this.lname}`, this)
}

object1.greet();       //kiran raj
object1.arrow_greet(); //undefined undefined window
Enter fullscreen mode Exit fullscreen mode

In the above example concentrate on the greet and arrow_greet methods. greet is a normal method where as arrow_greet is arrow equivalent of greet function(just added an extra this to the console.log statement to see where this points at), greet methods works fine but in arrow_greet the output is printed as undefined undefined. this points to the window global object. This example clearly shows that the arrow function does not have a own binding to this. Due to this it is better to avoid using arrow functions as methods.

Summary

  1. Arrow function does not have a own binding to this.
  2. Arrow functions should not be used as methods.
  3. Arrow function does not have a own binding to super.
  4. Arrow functions cannot be used as a constructor.

Top comments (0)

🌚 Life is too short to browse without dark mode