Why do we need "Arrow Functions"?

A Function in JavaScript is a block of code designed to perform a particular task. functions allow the developers to break the code into smaller or simpler components as a result, we can write once and use it several times instead of repeating the code.

The traditional way of writing any function in any language involves Function declaration and Function expression.

//Function Declaration
function productOfNumbers(a,b) {
  return a * b
}
productOfNumbers(2,3);  // 6
//Function Expression
function multiplicationOfNumbers(a,b){
    return a * b;
}
multiplicationOfNumbers(2,3)//6

Now, here is the same function expressed as an arrow function:

//Using Arrow function
const productOfNumbers = (a,b) => a*b;
productOfNumbers(2,3)//6

It’s much shorter! We can omit the curly braces and the return statement due to implicit returns.

The 2015 edition of ECMAScript specification (ES6) added arrow function expressions to the JavaScript language. Arrow functions are a new way to write anonymous function expressions, and are similar to lambda functions in some other programming languages, such as Python.

Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed. let's look into some examples:

• Arrow Functions with No parameters:

  If there are no parameters, you can place empty parentheses.

//No parameters
const welcome = () => {
   console.log("Welcome");
}
// version 2
const welcome = () => console.log("welcome");

In fact, you don’t even need the parentheses!

const welcome = _ => console.log("welcome");

• Arrow Functions with a single parameter:

  With these functions, parentheses are optional

const squareOfNum = a => {
    return a ** 2;
}
squareOfNum(2)//4
//version 2
const squareOfNum = a => a ** 2;

• Arrow Functions with Multiple parameters:

  We need parentheses for these functions

const sum = (a,b) => {
    return a + b;
}
sum(2,3)//5

Benefits of Arrow Functions:

1. Arrow Functions allow implicit return when there is no body block, resulting in shorter and simpler code.

2. Arrow functions take the this from their surroundings (called lexical binding).

    // ES5 way 
    var result = { 
      name: "Hello", 
      data: function data() { 
        setTimeout(function() { 
          console.log(this.name); 
        }.bind(this), 5000); 
      } 
    }; 
   
    // ES6 way with arrow functions 
    var result = { 
      name: "Hello", 
      data: function data() { 
        setTimeout(() => { 
          console.log(this.name); 
        }, 5000); 
      } 
    };
   

Conclusion

Arrow functions could be confusing to start with but it is super useful to make the code behave more predictably with the lexical scoping of the this keyword. It is also easy on fingers as it let you type less code.

Thanks for Reading this.....:) I hope this post help to understand better on Arrow Functions.