Search⌘ K
AI Features
Home
Courses
The Complete Guide to Modern JavaScript

Arrow Functions

Explore the syntax and behavior of ES6 arrow functions, including implicit returns, handling of the this keyword, and differences from traditional functions. Understand when to use arrow functions effectively and how they impact scope and arguments in your JavaScript code.

We'll cover the following...

What is an arrow function?

ES6 introduced fat arrows (=>) as a way to declare functions. This is how we would normally declare a function in ES5:

Node.js
const greeting = function(name) {
  console.log("hello " + name);
}

The new syntax with a fat arrow looks like this:

Node.js
var greeting = (name) => {
  console.log(`hello ${name}`);
}

We can go further if we only have one parameter. We can drop the parentheses and write:

Node.js
var greeting = name => {
  console.log(`hello ${name}`);
}

If we have no parameters at all, we need to write empty parenthesis like this:

Node.js
var greeting = () => {
  console.log(`hello ${name}`);
}

 

Implicitly return

With arrow functions, we can skip the explicit return and return like this:

Node.js
const greeting = name => `hello ${name}`;

Look at a side by side comparison with an old ES5 Function:

Node.js
const oldFunction = function(name){
  return `hello ${name}`
}
const arrowFunction = name => `hello ${name}`;

Both functions achieve the same result, but the new syntax allows you to be more concise. Beware! Readability is more important than conciseness so you might want to write your function like this if you are working in a team and not everybody is totally up-to-date with ES6.

Node.js
const arrowFunction = (name) => {
  return `hello ${name}`;
}

Let’s say we want to ...