Arrow function in javaScript

In this blog we are going to know about arrow function in javaScript cover all basic information about arrow function.

Topic cover:

• What is arrow function

• Arrow function with one and multiple parameter

• Implicit return vs Explicit return

• Difference between arrow function and normal function

---

What is arrow function?

Arrow function is a modern way to define function introduced in ES6 but arrow function is just not a way to write function. It is more than that before arrow function function were already define and works so now what is new in arrow function? we will cover it later.

Arrow function reduce the boilerplate of function and provide shorthand notation to return value ( Implicit return ). Lets compare a normal function and arrow function.

// Normal function
function greetWithNormal(){
    return "Welcome to Chaicode";
}

// Arrow function
const greetWithArrow = () => {
    return "Welcome to Chaicode";
}

// Another way to write
const greetWithArrow = () => "Welcome to Chaicode";

console.log(greetWithNormal());
console.log(greetWithArrow());

In this example we can see there is a normal function and than write the same function into arrow function. In the arrow function there are two way to write same function.

---

Implicit and Explicit Return

There are two ways to return value in arrow function.

const greet = (name) => {
    return `Welcome ${name}`;
}

console.log(greet("Happy singh negi"));

This is Explicit return where we return value in a proper way using {} braces return keyword.

const greet = (name) => `Welcome ${name}`;

console.log(greet("Happy singh negi"));

This is Implicit return where we write function in one line without {} braces and return keyword.

Remember things:

• No need to use {}.

• No need to write return keyword.

• return statement should be in one line.

---

With one and more parameter

There are also different way to write with one parameter and more parameter.

const greet = (name) => `Welcome ${name}`;
const greet = name => `Welcome ${name}`;

console.log(greet("Happy singh negi"));

In this example I pick above one code and write same code in another way. if there is only one parameter so does not need to use (). It always work.

const prinData = (name, age) => `Name: \({name} | Age: \){age}`;

console.log(prinData("Happy singh negi", 21));

If we pass multiple parameter so need to use () otherwise It shows error.

---

Regular and Arrow function

We know arrow function is a another way to define function and introduced in ES6 which is latest as compare to regular function but does It just a syntactic sugar ?

The answer is no there are key difference between regular function and arrow function which makes arrow function totally difference from regular function.

Feature	Regular function	Arrow function
function keyword	Start with function keyword and then name	Hold in a variable. It is a expression
this binding	this is create dynamically. It depends how a function call	does not create own this. It inherits their lexical environment.
arguments	It supports arguments keyword array like object.	It does not support arguments keyword. It inherits from it's parent.
new keyword	can create new object instance with new keyword.	does not support new keyword. if we use so it shows error.
Hoisting	It hoisted so can call before declaration.	It does not hoisted so can call before define the function.

These are some key differences between regular and arrow function.

That all about arrow function. Thanks for reading this blog.