The Meaning of => in JavaScript

1. Arrow Function => in JavaScript
2. Arrow Function with No Argument
3. Arrow Function with One Argument
4. Multiline Arrow Functions
5. Call or Execute Arrow Function in JavaScript
6. Use Arrow Functions With Promises and Callbacks
7. Limitations of Arrow Functions

A function in JavaScript allows you to write a block of code that performs a specific task. There are various ways of writing functions in JavaScript.

In this article, we will see what an arrow function in JavaScript is, how it works, and what is its limitations.

Arrow Function => in JavaScript

The arrow function is a combination of equals sign = and greater than sign >. It was introduced in the ES6 version of JavaScript.

It is a shorter way of writing functions in JavaScript, known as arrow functions. The advantage of using the arrow function is that it has a shorter syntax than the function expression.

The arrow function is sometimes also referred to as an anonymous function. This is because these functions don’t have any name.

The below code snippet shows the comparison between the syntax of the normal function and the arrow functions’ syntax.

Code Snippet - JavaScript:

// normal fn
function abc() {}

// arrow
() => {}

The arrow function can either take no arguments or any number of arguments.

Arrow Function with No Argument

The code snippet below shows an arrow function that takes no arguments. Also, if we have an arrow function with only a single line of code, we can avoid using the curly braces, as shown below.

Code Snippet - JavaScript:

() => console.log('This is a single line arrow fn which takes no arguments')

Arrow Function with One Argument

If you want to pass arguments to an arrow function, you can pass them inside the round brackets. Below shows the arrow function with one argument.

Code Snippet - JavaScript:

(name) => console.log(`Good Morning ${name}`)

Multiline Arrow Functions

In the above examples, we have seen an arrow function having a single line of code. But if you want to write multiline code inside an arrow function, you must use curly braces, as shown below.

Code Snippet - JavaScript:

() => {
  greetMe();
  loadData();
  console.log('The data is loaded....')
}

Call or Execute Arrow Function in JavaScript

You might ask, if an arrow function does not have a name, then how can we call or execute it? The answer is simple; we can store the arrow function inside a variable and give that variable a name.

Then using the round brackets (), we can call or execute that function similar to how we execute a normal function, as shown below. This is called an arrow function as an expression.

Code Snippet - JavaScript:

const abc = () => {
  console.log('hello');
}

If you have only one statement inside the arrow function, you can remove the curly braces {} and directly write the arrow function in just one line. This increases the code readability and reduces the lines of code.

Code Snippet - JavaScript:

const abc = () => console.log('hello');

And, in the case of arrow functions, if you want to return something after the function execution, you can also use () instead of the return keyword. But when it comes to normal functions, you must use the return keyword.

Code Snippet - JavaScript:

(params) => ({key: 'value'})

Also, one important point to remember is that the this keyword in the regular function always refers to the context of the function being called in JavaScript. But this is not the case with arrow functions.

The this keyword in arrow functions does not have its context; it refers to the scope where the function is present.

Use Arrow Functions With Promises and Callbacks

The good thing about arrow functions is that they can be used at multiple places (with promises) and in various ways (as callbacks).

Code Snippet - JavaScript:

new Promise(function(resolve, reject) {
  funReturningPromise().then(data => resolve(data)).catch(err => reject(err));
});

Here, we are using promises, and as we know, promise takes a callback method as an argument. This callback takes two arguments to resolve and reject.

Let’s assume we have a function returning a promise object. The promise can either be resolved or rejected.

So, depending on what can happen to a promise, we can use two methods, then and catch. We can use the arrow functions in these methods, as shown in the above example.

Limitations of Arrow Functions

1. Cannot be used as constructors.
2. Not suitable for call, apply and bind methods.
3. They don’t have their bindings to this, arguments or super, and should not be used as methods.
4. Don’t have access to the new.target keyword.