Black Friday Sale is on: Get Amazing deals on tools and resourcess

Tutorial: Javascript Arrow Functions


By Emmanuel Chinonso

Web Developer

JavaScript Arrow Function

Contrast Bootstrap UI Kit

In ES6, the arrow functions were introduced. Using arrow functions, we may create shorter function syntax:


1hello = function() {
2 return 'Hello World!';

With Arrow Function:

1hello = () => {
2 return 'Hello World!';

It is becoming shorter! If the function just has one statement that returns a value, the braces and the return keyword can be removed:

Arrow Functions Return Value by Default:

1hello = () => 'Hello World!';

This only works if the function only contains one statement. If there are any parameters, they must be passed inside the parentheses:

Arrow Function With Parameters:

1hello = val => 'Hello ' + val;

In fact, if there is only one parameter, the parenthesis can be omitted: Arrow Function Without Parentheses:

1hello = val => 'Hello ' + val;

What About this?

The way arrow functions handle this differs from how ordinary functions handle it. In brief, there is no binding of this with arrow functions. "This" keyword was used in ordinary functions to represent the object that called the function, which could be a window, a document, a button, or anything else.

"This" keyword always reflects the object that specified the arrow function when using arrow functions. Let's look at two codes to see what the differences are. Both JavaScript Codes invoke the same procedure twice: once when the page loads and again when the user clicks a button. The first code shows how to use a standard function, while the second shows how to utilize an arrow function.

Because the window object is the "owner" of the function, the first example produces two different objects (window and button), while the second example returns the window object twice. This represents the object that calls the function in the case of a normal function:

JavaScript Code:

1// Regular Function:
2hello = function() {
3 document.getElementById('demo').innerHTML += this;
5// The window object calls the function:
6window.addEventListener('load', hello);
7// A button object calls the function:
8document.getElementById('btn').addEventListener('click', hello);

With an arrow function this represents the owner of the function:

JavaScript Code:

1// Arrow Function:
2hello = () => {
3 document.getElementById('demo').innerHTML += this;
6// The window object calls the function:
7window.addEventListener('load', hello);
9// A button object calls the function:
10document.getElementById('btn').addEventListener('click', hello);

When working with functions, keep these distinctions in mind. If the behavior of ordinary functions isn't what you're looking for, utilize arrow functions instead.

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro


Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts