Normal V Arrow Functions :

normal function :
In JavaScript, Function can be declared in different ways. The common way is to declare after using function keyword
EX :
function greetMessage(userName) {
return `Hello ${userName}`;
}
Arrow function :
Arrow Function. This is a new feature introduced in ES6 that is a more concise syntax for writing function expression in JavaScript. While both the way of definining function works in same way, Only the coding structure has been minimised.
EX :
const greetMessage = (userName) => {
return `Hello ${userName}`;
}

difference b/w Arrow & Regular Functions ?
1. Syntax

One very basic difference is that the Regular Functions uses function keyword but Arrow Functions don't inspite it uses arrow symbol(=>).

2. this keyword

Regular function have its their own this context, but the Arrow function don't have their own. Inside an Arrow function this value hold the this value of outer function.

Ex :
let user = {
userName: "Parth",
greetMessage1:() => {
console.log("Hello " + this.userName); // Output: Hello undefined
},
greetMessage2(){

console.log("Good Morning " + this.userName); // Output: Good Morning Parth 'this' binding works here }
};
user.greetMessage1();
user.greetMessage2();

In the above example, We can see the greetMessage1(Arrow Functions) don't have its own this, But the greetMessage2(Regular Function) have it's own this due to which we can see the userName value in output.

3. Using new keyword

Regular function are constructible and callable.As it are constructible, they can be called using the 'new' keyword. But the arrow functions are only callable and not constructible.
Due to which we will get a run-time error when trying to construct a non-constructible arrow functions using the new keyword.


Ex :
// Using regular function
let x = function(){
console.log(arguments);
}; console.log(new x (1,2,3));
// Output: Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// Using Arrow function
let x = ()=> {
console.log(arguments);
};
new x(1,2,3);
// TypeError: "x is not a constructor"


3. Using new keyword

While working with Regular functions return expression statement is used to return the result from the function. It return statement is not available inside the function then udefined is returned from the function. But with Arrow function there is one exception where return is not mendatory to return result from the functions

Ex :
// Using regular function
function sum(a, b) {
return a+b;
}
sum(10,20);
// Outpu: 30

// Using Arrow function
const sum = (a, b) =>a+b;
sum(10,20);
//Output: 30