JavaScript Arrow Function With Examples

The JavaScript arrow function expression is a concise and more compact alternative to a normal function but it has some limitations too.

Syntax of arrow function

Arrow function is written using the fat arrow (=>). Zero or more arguments on the left side of the arrow and expression on the right side.

When no arguments-

() => expression

With single argument-

arg => expression

With multiple arguments-

(arg1, arg2, …) => expression

JavaScript arrow function example

First let's write a normal JavaScript function and then its arrow function counterpart to make it easy to understand how it differs from a normal function.

Here is a simple function hello which just returns a message.

function hello(){
	return "Greetings!"
}

If you have to write it using arrow function.

const hello = () => {
  return "Greetings!"
}

What you have to do is to remove function keyword and function name and place an arrow between the argument and opening body bracket.

() => {
  return "Greetings!"
}

Arrow functions are always anonymous functions. You can assign the arrow function to a variable so it has a name. That's what is done by assigning it to const hello.

You can call the function using this variable name.

let s = hello()
console.log(s);

You can make the above arrow function more compact; if an arrow function has only a single return statement, then you can remove the curly braces and return keyword. The return is implied.

const hello = () => "Greetings!"

Arrow function with single parameter

const hello = (name) => "Greetings " + name + "!";

If your arrow function has a single parameter then the parenthesis is optional.

const hello = name => "Greetings " + name + "!"

Arrow function with multiple parameters

const sum = (a, b) => a + b;

Remember that parenthesis can't be omitted in the case of multiple parameters and no parameters, only in the case of single parameter you can omit parenthesis.

Multiline arrow functions

If you are writing an arrow function with multiple expressions and statements then you need to enclose them in curly braces. An explicit return is also required since curly braces require a return within them to return a value.

For example, an arrow function to get maximum value using if-else.

const max = (a, b) => {
  let m;
  if(a > b)
    m = a;
  else
    m = b;
  return m;
}

Of course, the same thing can be written in a much more compact way using ternary operator.

const max = (a, b) => (a > b) ? a : b;

Limitations of arrow functions

1. With arrow functions there are no binding of this. The value of this is determined by the surrounding scope instead.
2. Arrow functions should not be used as class methods because of the way this is used in case of arrow functions.
3. Arrow functions cannot be used as constructors because they do not have a prototype property.

That's all for this topic JavaScript Arrow Function With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. JavaScript Spread Operator
2. JavaScript Import and Export
3. JavaScript Array map() Method
4. JavaScript filter Method
5. React HelloWorld App - First React App

You may also like-

1. Angular Application Bootstrap Process
2. Lambda expressions in Java 8
3. How HashMap internally works in Java
4. How to Untar a File in Java