Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Regular functions vs Arrow functions in JavaScript?
Arrow functions and regular functions are both ways to define functions in JavaScript, but they have important differences in behavior. Understanding these differences helps you choose the right function type for your needs.
Syntax
The syntax differs between regular and arrow functions:
Arrow Function Syntax
let x = (params) => {
// code
};
Regular Function Syntax
let x = function functionName(params) {
// code
};
Usage of "this" Keyword
The most significant difference is how they handle the this keyword. Arrow functions don't have their own this context and inherit it from the surrounding scope, while regular functions have their own this context.
Example
In this example, we use both regular and arrow functions inside an object to calculate areas. The arrow function returns NaN because this doesn't refer to the object, while the regular function works correctly.
<html>
<body>
<script>
var num = {
len: 12,
bre: 13,
square: () => {
document.write(this.len * this.len);
},
rectangle() {
document.write(this.len * this.bre);
}
};
num.square();
document.write("<br>");
num.rectangle();
</script>
</body>
</html>
NaN 156
Usage of 'new' Keyword
Arrow functions are not constructible, meaning they cannot be used with the new keyword. Regular functions are both callable and constructible, so they can be used as constructors.
Example
This example demonstrates that regular functions work with the new keyword, while arrow functions throw an error:
<html>
<body>
<script>
// Regular function works with 'new'
var RegularFunc = function(name) {
this.name = name;
document.write("Regular function: " + this.name + "<br>");
};
try {
new RegularFunc("TutorialsPoint");
} catch(e) {
document.write("Error: " + e.message + "<br>");
}
// Arrow function throws error with 'new'
var ArrowFunc = (name) => {
document.write("Arrow function: " + name);
};
try {
new ArrowFunc("TutorialsPoint");
} catch(e) {
document.write("Error: " + e.message);
}
</script>
</body>
</html>
Regular function: TutorialsPoint Error: ArrowFunc is not a constructor
Arguments Object
Regular functions have access to the arguments object, while arrow functions do not. Arrow functions inherit arguments from the enclosing scope.
Comparison
| Feature | Regular Functions | Arrow Functions |
|---|---|---|
this binding |
Own context | Lexical (inherited) |
| Constructor usage | Yes (with new) |
No |
arguments object |
Available | Not available |
| Hoisting | Yes (function declarations) | No |
When to Use Each
Use arrow functions for short, simple functions and when you want to preserve the outer this context. Use regular functions when you need their own this context, constructor functionality, or access to the arguments object.
Conclusion
Choose arrow functions for concise syntax and lexical this binding. Use regular functions when you need constructor functionality or their own this context.
648 Views
