Code that can be reused is a valuable asset for developers in the process of application development. However, reusing code does not imply utilizing it without the JavaScript function. Functions execute code snippets during runtime. In JavaScript, the two primary types of functions are traditional functions and Arrow functions.
In this article, we will explore the distinctions between standard functions and Arrow functions, along with their practical uses.
What is a Function?
A core element of JavaScript is the function. Within JavaScript, a function serves as a set of statements that perform an action or calculate a value, similar to a procedure. However, for a process to qualify as a function, it should accept certain inputs, yield outputs, and demonstrate a relationship between the inputs and outputs. Additionally, to utilize a function, it must be defined within the scope from which it is invoked. JavaScript functions are available in two primary types:
- Normal Functions
- Arrow Functions (Introduced in ES6)
JavaScript Normal function
Utilizing the "function" keyword along with a designated function name establishes a standard function. Following this, we create an environment where user input can influence the outcomes. Furthermore, the results will adhere to the directives specified within the brackets.
There are two methods to define a standard function: through a function declaration and via a function expression.
The main difference between a function's declaration and a function expression lies in the timing of their invocation. In the case of the function add(2,3), it is called prior to its declaration, whereas the function sum(2,3) is invoked only after it has been defined.
Syntax:
The subsequent example syntax illustrates the standard function in JavaScript. It demonstrates how we can perform the addition operation utilizing the function along with its corresponding value.
function function_name(value1, value2){
return value1+value2;
}
We can call the function and display the output.
Let variable_name = function_name(2, 5);
Console.log(variable_name);
Example
The subsequent example demonstrates a standard function in conjunction with the alert and console tab. We can utilize the Button to incorporate a conventional function into the onclick event.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo after clicking the Button </h4>
<input type = "button" value = "Click Here" onclick = "dataDisplay();">
<script>
function dataDisplay(){
alert("Difference Between Arrow Function and Normal Function in JavaScript");
console.log("Difference Between Arrow Function and Normal Function in JavaScript");
}
</script>
</body>
</html>
Output:
JavaScript Arrow Operation
The alternative name for the arrow function is the fat arrow function. This concise syntax for writing function expressions is a novel feature introduced in ES6. Arrow functions utilize the "fat arrow" syntax (=>), which simplifies the process of function creation when compared to traditional functions. In this context, there is no need for a declaration method; we can solely utilize function expressions.
It is an alternative method to the normal JavaScript function. The arrow function has some limitations, as detailed below.
- Arrow functions cannot be used as a method. They do not use binding keywords such as this, super, or arguments.
- The Constructors are derived from arrow functions and Sending them a new request raises a TypeError. Additionally, they are unable to use the new.target keyword.
- Arrow functions are not generator functions; they are not able to employ yield within their bodies.
Syntax:
The subsequent demonstration syntax illustrates the arrow function in JavaScript. We can perform the addition operation utilizing the arrow notation along with its corresponding parameter.
const function_name = (value1, value2) => value1+value2;
We can call the function and display the output.
Let variable_name = function_name(2, 5);
Console.log(variable_name);
Example
The subsequent example demonstrates the use of an arrow function alongside the alert and console tab.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo after Run and click the Button </h4>
<input type = "button" value = "Click Here" onclick = "dataDisplay();">
<script>
let dataDisplay = "";
dataDisplay = () => {
alert("JavaScript Arrow Function Demo after Run and click the Button!");
}
dataDisplay();
</script>
</body>
</html>
Output:
Comparison Table of the Normal and Arrow Functions
The subsequent section illustrates a comparison between traditional functions and arrow functions.
| Aspect | Arrow functions | Normal functions |
|---|---|---|
| Anonymous | Yes. It does not require a function name. | No. It requires a function name. |
| Syntax | It shows shorter syntax. | It shows the normal or Longer syntax |
| Handling multiple operational expressions | Cannot handle or difficult to handle | Better handling |
| "this" keyword behavior | Inherits from a block scope are referred to as "this". | Refers to the object belonging to the "this" keyword. |
| Constructor functionality | It is not suitable to use as a constructor functionality. | Suitable to use as constructor functionality. |
| Arguments object | It does not have an argument object | It is used as an argument object |
| Duplicate parameter's names | Not allowed | Allowed |
| Call, apply, and bind | Cannot change the value of "this" keyword | Change the value of the "this" keyword |
| Scoping | Lexically scoped | Functionally scoped |
Key Differences between Regular and Arrow Functions
There are several distinctions between traditional functions and Arrow functions. Each fundamental difference is elaborated upon in detail.
1. Function Syntax
A standard function is defined using the function keyword followed by curly braces, and it is capable of handling multiple expressions within its body. However, if the function consists of a single expression, the use of curly braces can be omitted, as the function will automatically return the result of that expression. Conversely, an arrow function is characterized by its syntax which includes the arrow symbol.
Regular Expression
The following syntax uses regular expression.
<script>
function summation(x, y){
return (x+y);
};
console.log(summation(2, 5));
let multiple = function(x, y){
return (x*y);
};
console.log(multiple (2, 5));
</script>
Arrow Function
The following syntax uses arrow expression.
<script>
var multiple = (x, y) => {
return (x*x);
};
console.log(multiple(3, 7));
var addition = (x, y) => x+y;
console.log(addition(3, 7));
</script>
2. Functions anonymous
A standard function is not anonymous; it features a designated function name and executes the expression accordingly. Conversely, an Arrow function is considered anonymous, as it defines a function without a name and lacks explicit identifiers. Instead, these functions are typically associated with variables or passed as arguments to other functions.
Regular Expression
The subsequent syntax employs non-anonymous regular expressions.
<script>
function summation(x, y){
return (x+y);
};
console.log(summation(2, 5));
</script>
Arrow Function
The syntax presented below indicates that the arrow function is unnamed.
<script>
var multiple = (x, y) => {
return (x*x);
};
console.log(multiple(3, 7));
</script>
3. No arguments in the arrow function (argument like array objects)
In situations where we do not know the total count of arguments being passed, the function can capture all arguments/parameters within a single variable. Notably, arrow functions do not possess their own arguments object. Therefore, if we attempt to access the arguments within an arrow function, it will result in an error message stating, "Uncaught ReferenceError: arguments is not defined."
The parameters appear to resemble an array. The length property serves to combine array-like entities with array objects. The key difference is that array-like entities do not possess inherent array methods; nonetheless, it is possible to convert an array-like entity into an array object utilizing either the spread operator or the Array.from method.
Regular Expression Example
The subsequent example demonstrates the use of regular expressions, which is permitted within the argument for in.
function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with the arguments </h4>
<script>
function summation(){
console.log(arguments);
return Math.max(...arguments);
};
summation(12, 5, 8, 10, 21, 4, 37);
</script>
</body>
</html>
Output:
Arrow Function example
The subsequent example illustrates an arrow function that includes an argument within its definition.
The console tab displays an error related to the argument within the arrow function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo with the arguments </h4>
<script>
var summation = () =>{
console.log(arguments);
return Math.max(...arguments);
};
summation(12, 5, 8, 10, 21, 4, 37);
</script>
</body>
</html>
Output:
4. No prototype object to use in the Arrow function
Unlike traditional regular functions, arrow functions do not possess a prototype object. If one tries to access the prototype of an arrow function, it will lead to an undefined error.
Regular Expression Example
The subsequent illustration demonstrates that the use of regular expressions is permitted in conjunction with the "prototype" keyword.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with the "prototype" keyword </h4>
<script>
console.log("JavaScript Normal Function Demo with the 'prototype' keyword");
//create a function with the two arguments
var User_Data= function(x, y){
return x+y;
}
User_Data(2, 9);
// Display output from the object:
console.log(User_Data.prototype);
//create an empty function and use the prototype keyword
var User_Data1= function(){
}
const emp2 = new User_Data();
// Display output from the object:
console.log(User_Data1.prototype);
</script>
</body>
</html>
Output:
The result demonstrates the operational significance of the "prototype" keyword.
Arrow Function example
The subsequent illustration demonstrates the use of an arrow function featuring the "prototype" keyword. In the console tab, you can observe the error related to the usage of the new keyword within the arrow function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo with the "prototype" keyword </h4>
<script>
console.log("JavaScript Arrow Function Demo with the prototype keyword");
//create a function with the argument
var dataDisplay = (x,y) => {
return x+y;
};
dataDisplay(2,7);
//display undefined output
console.log(dataDisplay.prototype);
</script>
</body>
</html>
Output:
The result indicates that the "prototype" keyword holds an undefined value.
5. New keyword helps not to invoke (Not a constructor function)
It is not possible to invoke the arrow function with the new keyword since arrow functions lack a constructor. Attempting to create an instance using the new keyword will result in an error.
Regular Expression Example
The example provided below demonstrates the utilization of a regular expression in conjunction with the "new" keyword.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with the "new" keyword </h4>
<script>
console.log("JavaScript Normal Function Demo with the 'new' keyword");
// Create an object to use the "new" keyword
const User_Data= function(fname, accountData){
this.fname = fname;
this.accountData = accountData;
}
//Creating 2 instances of User
const emp1 = new User_Data("Ram", "current");
const emp2 = new User_Data("Shyam", "saving");
// Display output from the object:
console.log(emp1);
console.log(emp2);
</script>
</body>
</html>
Output:
The result illustrates the operational significance of the "new" keyword.
Arrow Function example
The subsequent illustration demonstrates an arrow function utilizing the "this" keyword. The console tab displays an error related to the use of the new keyword within the arrow function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo with the "new" keyword </h4>
<script>
console.log("JavaScript Arrow Function Demo with the new keyword");
// Create a constructor to use the "new" keyword
const dataDisplay = "";
dataDisplay = (firstname) => {
this.firstname = firstname;
};
const output_val = new dataDisplay("Example");
console.log(output_val);
</script>
</body>
</html>
Output:
The result illustrates the undefined value associated with the "new" operator.
6. No use of the "this" keyword (call, apply & bind operation is not working as expected)
In traditional functions, the default value of "this" is dynamic, varying based on the way in which the function is invoked. Conversely, arrow functions do not establish their own "this" context; instead, they inherit it from the closest non-arrow parent function. Thus, when "this" is referenced within an arrow function, it will yield the "this" value from the nearest non-arrow function that surrounds it.
The arrow function possesses a constant value that is established at the time of its declaration and remains unchanged throughout its execution. Consequently, the context of the arrow function (this) cannot be modified through methods such as calling, applying, or binding.
Regular Expression Example
The subsequent illustration demonstrates how a regular expression can be utilized in conjunction with the "this" keyword.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with the "this" keyword </h4>
<script>
// Create an object to use "this" keyword
const person_info = {
firstName: "Ram",
lastName: "Sharma",
id: 002,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display output from the object:
console.log(person_info.fullName());
alert(person_info.fullName());
</script>
</body>
</html>
Output:
The result illustrates the operational significance of the "this" keyword.
Output:
The output shows the alert tab.
Arrow Function example
The example below illustrates the use of an arrow function that incorporates the "this" keyword. The console tab displays an error associated with the "this" keyword within the arrow function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo with the "this" keyword </h4>
<script>
// Create an object to use "this" keyword
const person_info = {
firstName: "Ram",
lastName: "Sharma",
id: 002,
fullName : () => {
return this.firstName + " " + this.lastName;
}
};
// Display output from the object:
console.log(person_info.fullName());
alert(person_info.fullName());
</script>
</body>
</html>
Output:
The result displays an uninitialized value for the "this" keyword.
Output:
The output shows the alert tab.
7. It is not used for generating functions
A generator function is established by employing the function* syntax, which consists of the function keyword accompanied by an asterisk. It is important to note that the body of an arrow function is not permitted to include the yield keyword, except when it is used within functions that are nested inside it. Therefore, arrow functions are not suitable for use as generators.
Regular Expression Example
The subsequent illustration employs a regular expression, which can be utilized within the generator function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with Generator Function </h4>
<script>
function* generatorFun(x) {
yield x;
yield x + 10;
yield x + 15;
}
const genFun = generatorFun(10);
console.log(genFun.next().value);
console.log(genFun.next().value);
console.log(genFun.next().value);
</script>
</body>
</html>
Output:
The result demonstrates the incorporation of the generator function.
Arrow Function Example
The example presented below illustrates that the arrow function does not qualify as a generator function. The error related to the generator function is displayed in the console tab when using the arrow function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo with generator function </h4>
<script>
console.log("JavaScript Arrow Function Demo with generator * function");
let dataDisplay = "";
dataDisplay = *() => {
alert("JavaScript Arrow Function Demo with generator function");
console.log("JavaScript Arrow Function Demo with generator function");
};
dataDisplay();
</script>
</body>
</html>
Output:
The output displays the error associated with the generator function.
8. Duplicate parameter names are not allowed
In regular functions, it is possible to utilize parameters with the same name when operating in non-strict mode. Conversely, this practice is disallowed in strict mode. Arrow functions, regardless of being in strict or non-strict mode, do not permit parameters with the same name, differing from traditional functions. If duplicate parameters are present, a Syntax Error will be triggered.
Regular Expression Example
The subsequent example demonstrates the use of regular expressions, which enable the inclusion of duplicate parameters.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Normal Function Demo with duplicate parameter </h4>
<script>
function dataDisplay(x, x, x){
return (x+x+x);
};
console.log(dataDisplay(2, 5, 6));
alert(dataDisplay(2, 5, 6));
</script>
</body>
</html>
Output:
The output displays the error generated by the function intended for producing values.
Arrow Function example
The subsequent example illustrates that arrow expressions do not permit the use of duplicate parameters. The console tab displays an error message indicating that parameters with the same name are not allowed within the function.
<!DOCTYPE html>
<html>
<head>
<title> Difference Between Arrow Function and Normal Function in JavaScript </title>
</head>
<body style = "background-color:beige;">
<h2> Difference Between Arrow Function and Normal Function in JavaScript </h2>
<h4> JavaScript Arrow Function Demo after Run and click the Button </h4>
<script>
let dataDisplay = "";
dataDisplay = (x, x, x) => {
return (x*x+x);
};
console.log(dataDisplay(3, 7, 3));
alert(dataDisplay(3, 7, 3));
</script>
</body>
</html>
Output:
The output displays the error associated with the identical parameters.
Conclusion
The distinction between a traditional function and an arrow function is determined by their respective use cases. Traditional functions are typically employed for handling multiple expressions, whereas arrow functions are generally utilized for concise, single expressions.