Why Arrow Function is Preferred over Simple Function ?

Hey 👋, Guys Welcome.

Today we are deeply learning , that why we should use Arrow Function rather than Simple Function.

Let's Dive In ..

In Most of the Programming Languages such a C++, C , Python and JavaScript , Functions are mostly used to make the code re-usable.

Definition of Function

Function is Defined as the Piece of Code that can be used again and again instead of writing same logic multiple times.

Function in JavaScript

In JavaScript Mainly there are 2 ways to describe a function

1. Simple Way (with function keyword)
2. With Arrow Function

Simple Way (with function keyword)

Before 2015 , the typical way of writing functions was same , as i am going to show you below.

Example

function Sum(Param1 , Param2)
{
    return Param1+Param2
}
console.log(Sum(3,5)) // 8

In The Above Example , you can see that the function is accepting 2 parameters and returning the sum of these 2 parameters. In This is way of writing function it is compulsory to write function keyword before name of function followed by () parentheses.

With Arrow Function

These were introduced in 2015 (ES6). This is the latest and widely used method of writing functions. Here Look at the given examples to get better understanding of that , how the arrow functions are written.

Example

let Minus=(Param1 , Param2)=>
{
    return Param1-Param2
}
console.log(Minus(12,8)) // 4

In Above Example we provide the let Keyword followed by Function Name followed by =()=>. These Parentheses are for accepting Parameters Passed to this Arrow Function.

Why Arrow Function

1. Helps to Write Short Code
2. Works Best with Array Methods (filter , reduce) , callbacks etc.

Lets See , How Arrow Function Help us to Write Short Code

Example

let Minus=Param1=>
{
    return `My Value is ${Param1}`
}
console.log(Minus(12)) // My Value is 12

Boom , You Can See That , if we have only one parameter in our function than we can omit the Parentheses. Now Lets Make this Code Much Shorter

Example

let Minus=Param1=> `My Value is ${Param1}`

console.log(Minus(12))

Wow , You can See That , if our function has one parameter and only a return statement then we can omit parentheses () , curly braces {} and return keyword as well. Our Function has been converted to single line only because of Arrow Function Super Powers 💥.

Remember : If Our Function has multiple statements in it , then we cannot omit curly braces. Just Like In Given Example

Example

let MyName=Param=>{ let X=23; let Y=10; console.log(`I am ${Param}`) }

MyName('Zubair') // I am Zubair

Anonymous Function

Arrow Functions also gives us the ability to write Anonymous Functions. These are those functions that don't have name associated with them

Example

()=>
{
    console.log("Hello World");
}

These Anonymous Functions are very helpful during callbacks (We Will Cove this later).

Like , Comment and Share if you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡