In this article, we will discuss the arrow function and how it works in Reactjs.
What are Arrow Functions?
In Javascript, there is a sort of function syntax called an “arrow function” that at first resembles a shortened function expression.
"Function Expression"
let foo = function foo(bar) {return bar + 1}
--------------------------------
"Arrow Function Expression"
let foo = bar => bar + 1
Let’s first examine the two function formulations before discussing the absence of a return in our arrow function. Both functions will accept 1 argument and return “+1”.
As you can see, writing a function expression more concisely is possible with the arrow function. The ability of arrow functions to further condense their syntax is one of their more excellent features. I didn’t include a return statement or parenthesize my input in the aforementioned function.
For our arrow functions, optional parentheses for single argument functions as well as implicit returns provide some great syntactic sugar. Even if one argument function does not require parenthesis, parentheses are still required if the function accepts more or fewer arguments.
React’s arrow functions
This might be a problem in React. When creating a class component, each function i.e. written out must be bound to the function Object() { [native code] } in order for the “this” keyword to behave correctly and allow you to present your data as intended.
If you need to utilize the keyword “this” in numerous separate functions, it could look a little disorganized. The arrow function steps in to save the day at this moment.
import React from 'react';
import ReactDOM from 'react-dom/client';
import {Component} from "react"
export default class App extends Component {
constructor() {
super()
this.example = this.example.bind(this)
}
example = () => {
return "Hello Rohit!"
}
render() {
return (
<h1>{this.example()}</h1>
)
}
}
Output

Because the arrow function expression enables it to inherit the “this” definition from the App function Object() { [native code] }, Example 3 will be able to return this without being bound in the function Object() { [native code] }. This enables us to create React functions without needing to explicitly bind this, as a result. There are many ways to bind this, such as writing an anonymous function to call your unbound function.
We have an example of employing an anonymous function to preserve “this” in the render method. To make sure that “this” refers to the right data, we utilized an anonymous function. The arrow function allows you to write the least amount of code necessary to achieve the same result, even if all three of the aforementioned examples are techniques to make sure that we preserve the correct definition of “this.”
You will be alright as long as you pay attention to how the word “this” is defined, but utilizing an arrow function can help you prevent mistakes like forgetting to bind variables or using functions in an anonymous manner. Although arrow functions are more recent and have a distinct appearance, they can still be a valuable tool in some circumstances.
The Importance of Arrow Functions
Another implicit action that is not immediately apparent from looking at an arrow function is one of the most crucial aspects of arrow functions. That is how the keyword “this” gets preserved.
The definition of “this” in a standard Javascript function expression or declaration depends on where the function was called. As a result, you might need to use the bind method to make sure the “this” keyword keeps the correct reference in order to make sure it’s functioning on the right object or class.
let foo = {
bar: 50,
getBar: function() {
return this.bar
}
}
let unboundGetBar = foo.getBar
console.log(unboundGetBar())
//=> undefined
let boundGetBar = unboundGetBar.bind(foo)
console.log(boundGetBar())
//=> 50
To specify what “this” should refer to for getBar, we must utilize the bind method. The console log returns undefined when getBar is not bound in the first example because it is inheriting the definition of “this” from the global scope. We don’t need to worry about binding “this” with an arrow function because it lacks a “this” of its own. An arrow function will therefore inherit “this” from its enclosing scope.
How do Arrow Functions and Regular Functions differ from one another?
Arrow Functions | Regular Functions | |
Syntax | Arrow Functions utilize the arrow symbol(=>). | Regular Functions use the function keyword. |
Using New Keyword | The arrow functions can only be called; they cannot be created. As a result, employing the new keyword to construct a non-constructible arrow function will result in a run-time error. | Regular functions are callable and constructible. They can be called using the ‘new’ keyword since they are constructible. |
this keyword | This value holds the “this” value of the outer function inside an Arrow function. | The context for regular functions is unique. |
Implicit return | The return is not required to return the function’s result with the exception of the Arrow function. | When using regular functions, the return expression statement is used to bring back the function’s output. |
Conclusion
This article will help you to learn about the arrow function. Thank you for reading the article. Hope you understand very well the concept of arrow function.