What is difference between Arrow Functions and Regular Functions?
In JavaScript, Function can be declared in different ways. The common way is to declare after using function keyword like below:
// Function declaration
function greetMessage(userName) {
return `Hello ${userName}`;
}Above way of declaring function is also called as regular Function.
Now we will talk about the latest way of declaring a function in javascript, that is 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.
Let’s have a look at the syntax of Arrow Function below:
const greetMessage = (userName) => {
return `Hello ${userName}`;
}As a developer we must know the differences between the Arrow Functions and Regular Functions to maintain code to enhance the coding in JavaScript.
What is the difference between Arrow Functions and 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.
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.
// 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"
4. Implicit return
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. See the example below:
// With Regular functions
function sum(a, b) {
return a+b;
}
sum(10,20); // Outpu: 30// With Arrow functions
const sum = (a, b) =>a+b;
sum(10,20); //Output: 30
Conclusion
In this article, we saw the major differences between Arrow functions and Regular Functions which is very commonly asked in JavaScript Interviews.
Thanks!
Find much more about JavaScript libraries/frameworks at JsonWorld.
Click here to Join live Classed led by IT Professionals of Tech Giants like TCS, IBM, Accenture, Infosys, etc.
