In this section, we will learn what the Arrow Function is and how to use it in JavaScript.

What is Arrow Function in JavaScript? (Lambda Expression)

Arrow functions which also known as lambda expression, are the shorter way of creating function expressions.

How to Declare Arrow Function in JavaScript? (JavaScript Arrow Function Syntax)

Let’s see a function expression first and then turn it into an arrow function:

let func = function greet(name){
        console.log(`Welcome ${name}`);
 }

This is a typical function expression.

Now to turn this function expression into an arrow function:

1. Remove the keyword `function`.
2. Remove the name after the keyword `function` (if any).
3. Put an arrow sign `=>` after the pair of parentheses of the function, but before the opening brace `{` of that function.

So if we apply the steps mentioned above, the arrow function of the function expression above becomes this:

let func = (name)=>{
        console.log(`Welcome ${name}`);
      }

As you can see, there’s no keyword `function`, the name of the function is removed as well and we put an arrow sign `=>` after the pair of parentheses but before the opening brace `{`.

The body of the function is still the same and just like a function expression. Also, if we want to call this function, we would use the variable name that holds the function. (func) in this case.

Example: creating arrow function in JavaScript

let func = (name)=>{
  console.log(`Welcome ${name}`);
}
func("John");

Outut:

Welcome John

JavaScript Arrow Function with Single Statement

If the arrow function has only one statement in its body, just like the arrow function in the example above, we can remove the pair of braces altogether.

Example:

let func = (name)=> console.log(`Welcome ${name}`);

func("John");

Note: this only works if there’s one statement in the body of the arrow function.

Also, if the arrow function has one statement and that is a `return` statement, again, we can remove the pair of braces `{}` and define the function in one single line. In a situation like this, we also don’t need to use the `return` keyword as well.

Example: creating arrow function with single statement:

let func = (name)=> `Welcome ${name}`;
let message = func("John");
console.log(message);

Output:

Welcome John

JavaScript Arrow Function with no-parameter

if the target arrow function does not have any parameter, we set an empty pair of parentheses.

Example:

let func = ()=> `Welcome ${name}`;

Example: creating arrow function with no-parameter

let func = ()=> `Welcome John Doe`;
console.log(func());

JavaScript Arrow Function with single parameter

If the target arrow function only has one parameter, we can remove the pair of parentheses around the parameter’s name.

Example: creating arrow function with single parameter

let func = name=> `Welcome ${name}`;
let message = func("John");
console.log(message);

Output:

Welcome John

JavaScript Arrow Function as Argument

An arrow function can also be passed as the argument to other functions.

Example: using this in JavaScript Arrow Function

function greet(arrowFnc){
  arrowFnc("John");
}
greet(name=>console.log(`Welcome ${name}`));

Output:

Welcome John

Here the `greet()` function has one parameter and in the body of the function, this parameter is being called as if it’s a function. This means when we call the `greet()` function, we need to pass a reference to another function as the argument to the `greet()`.

So here, instead of creating a function in a separate line, we directly created an arrow function in the pair of parentheses where we called the `greet` function.

This arrow function is stored in the memory and its address will be assigned to the `arrowFnc` parameter. So when the execution engine starts to execute the body of the `greet()` function, it basically invokes the body of the function that we passed as the argument to the `greet` function and will execute its body.