When You Should Not Use Arrow Functions in JavaScript

The JavaScript Arrow function does not have the "this" value or any argument. Using it as an event handler, an object literal method, or a prototype method is not recommended. If a function applies the arguments objects, the arrow function does not work correctly. The function keyword is unnecessary to declare an arrow function because it doesn't return any value. It is not possible to use arrow functions as constructors.

Reasons not to Use the Arrow Function

There are three reasons not to Use Arrow Functions in JavaScript.

Event handlers
Object methods
Prototype methods
Functions use the arguments object

Event Handlers

The event handler does not return any input value and functions with the object's data. If the arrow function does not return a value, it shows an undefined value.

Why do event handlers not use an arrow function?

The "this.value" function in the event handler always returns undefined as an output.
Global object in a web browser is used window. The value is a property which is missing from the window object. As a result, the window object has the value property added to the function. These values are set to "undefined" by the JavaScript engine.
There is no "this" value specific to the arrow function. The surrounding global scopes are used for the "this" keyword value. The global object is referred to by the "this" value in the arrow function in the example below.
You can use a standard function in the place to resolve the problem. The element acts as the event's trigger when the "this" value is tied to it.

Example:

The following example shows the undefined value using the arrow method. It does not work for the event handler method in the arrow function.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Event handlers do not work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
greeting.textContent = 'javascript tutorial: Hello ' + this.value;
});
</script>
</body>
</html>

Output

The output shows the undefined value in javascript.

When You Should Not Use Arrow Functions in JavaScript

Object Methods

The Prototype method uses the function for the data of the own value. This keyword does not work for the arrow function.

Example:

The following example shows the NaN value using the arrow method. It does not work for the event handler method in the arrow function.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Object methods do not work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
const counter = {
count: 0,
next: () => ++this.count,
current: () => this.count
};
greeting.textContent = 'javascript tutorial: Hello ' + counter.next();
console.log(counter.next());
});
</script>
</body>
</html>

Output

The output shows the NaN value in JavaScript.

Solution of the object methods problem:

We can use simple functions to work the object functions method.

Example:

The following example works function without any error.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Object methods work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
const counter = {
count: 0,
next() {
return ++this.count;
},
current() {
return this.count;
}
};
greeting.textContent = 'javascript tutorial: Hello ' + counter.next();
console.log(counter.next());
});
</script>
</body>
</html>

Output

The output shows the data of the function.

Prototype Methods

The prototype method uses the function for the data of the own value. The multiple function does not work for the arrow function.

Example:

The following example shows the undefined value using the arrow method. It does not work for the prototype method in the arrow function.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
The prototype method does not work for the arrow function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function MyName(name) {
this.personName = name;
}
MyName.prototype.sayPersonName = () => {
console.log(this === window); // => true
return this.catName;
};
const person = new MyName('Mew');
person.sayPersonName();
greeting.textContent = 'javascript tutorial: Hello ' +person.sayPersonName();
});
</script>
</body>
</html>

Output

The output shows the undefined value in javascript.

Solution of the Prototype methods problem

We can use simple functions to work the prototype functions method.

Example:

The following example works function without any error.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
The prototype method does not work for the arrow function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function MyPerson(name) {
this.catName = name;
}
MyPerson.prototype.sayPersonName = function() {
console.log(this === person); // => true
return this.catName;
};
const person = new MyPerson('Student');
person.sayPersonName(); // => 'Student'
greeting.textContent = 'javascript tutorial: Hello ' +person.sayPersonName();
});
</script>
</body>
</html>

Output

The output shows the data of the function.

Functions Use the Arguments Object

The arguments object is missing from arrow functions. As a result, if your function uses parameter objects, you cannot utilise the arrow function.

Example:

The following example shows the error value using the arrow method. It does not work for the prototype method in the arrow function. The function does not work because of the argument object.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Functions use the arguments object does not work for arrow function
<br>
console.log tab shows the error of the concat() function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
const concat = (separator) => {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
console.log(concat());
}
greeting.textContent = 'Uncaught ReferenceError: arguments is not defined';
console.log(concat());
});
</script>
</body>
</html>

Output

The output shows the error value in javascript.

Solution of the argument objects problem:

We can use a simple function to work the arguments object.

Example:

The following example works function without any error.

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Functions use the arguments object works for arrow function
<br>
Remove the error of the argument object
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const great_data = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function concat(separator) {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}
great_data.textContent = 'Hello student' +concat();
console.log(concat());
});
</script>
</body>
</html>

Output

The output shows the data of the function.