ES6 - Arrow Function

In this tutorial we will learn about ES6 Arrow function expression.

To create a function in JavaScript we use the function keyword and the syntax looks like the following.

function functionName(argument) {
  // function body
}

In ES6 we can create functions using arrow function expression syntax which looks like the following.

(arguments) => {statements}

Where, => is the Arrow (a.k.a. fat arrow) hence the name arrow function.

Arrow function expression is a compact version of the regular function expression.

Printing "Hello World" using Arrow Function

Let's say we want to create a greetings function that will print "Hello World" in the console when we call it. So, we will write the following code in regular function expression.

function greetings() {
  console.log('Hello World');
}

And to invoke or execute the greetings function we write.

greetings();

And this gives us the message "Hello World" in the console.

Now, let's write the above code using arrow function expression.

const greetings = () => {
  console.log('Hello World');
};

In the above code we have created a constant by the name greetings and assigned it an anonymous function using arrow function syntax.

To execute the above function we write the following.

greetings();

And we get the same output "Hello World" in the console.

To learn more about the const keyword check out this tutorial or watch this video.

Passing arguments to functions

Let's create a function that takes arguments. For this example we will pass a name to the greetings function and it will print a message using the name.

So, let's change the regular greetings function to accept an argument name.

function greetings(name) {
  console.log('Hello, ' + name);
}

Now, let's call the greetings function with a name.

greetings('Yusuf');

The above code will print "Hello, Yusuf" in the console.

Now let us rewrite the same function using arrow function expression.

const greetings = (name) => {
  console.log('Hello, ' + name);
};

And if we now call the greetings function with name 'Yusuf' we will get the same result.

Shorthand for single argument arrow function

When using arrow function expression to create functions we can drop the parenthesis if the function takes single argument.

In the above arrow function greetings we are passing only one argument so, we can rewrite it like the following.

const greetings = name => {
  console.log('Hello, ' + name);
};

Note! If the arrow function takes zero argument then we can't remove the parenthesis.

In ES6 we can use template literals to simplify the above string concatenation.

Let's refactor the above code using template literal.

const greetings = name => {
  console.log(`Hello, ${name}`);
};

To learn more about template literal check out this tutorial or watch this video.

Function taking argument and returning value

Let's create a function named add that takes two arguments and return the sum.

function add(x, y) {
  return x + y;
}

When we call the add function with argument say, 2 and 3 we will get 5 as the result.

var result = add(2, 3);
console.log('Sum = ', result);

Now, let's refactor the code and use arrow function.

const add = (x, y) => {
  return x + y;
};

When we call the above function with the same argument 2 and 3 it will return us 5.

Shorthand for return statement in arrow function

If we only have one single statement in the body of the arrow function and that statement is a return statement then we can drop the curly brackets and the return keyword.

So, let's refactor the above add function.

const add = (x, y) => x + y;

The above function takes x and y as argument and return x + y.

Alright this brings us to the end of this tutorial. Hope it was helpful. Thanks for reading and don't forget to practice the code and share this tutorial with your friends. See you in the next tutorial. Have fun coding.