ES6 Arrow Functions Cheatsheet

ES6 Arrow Functions Cheatsheet

ES6 Arrow Functions Cheatsheet

Here’s a cheatsheet to show you the many ways to write your arrow functions.

// Explicit Return, Multi-Line
a => {
  return a
}

// Explicit Return, Single-Line
a => { return a }

// Implicit Return, Multi-line
a => (
  a
)

// Implicit Return, Single-Line
a => a

// Multiple Parameters, Parentheses Required
(a, b) => a, b

Implicit vs Explicit Return

We have several ways of writing our arrow functions. This is because arrow functions can have either “implied return” or “explicit return” keyword.

With normal functions, if you want to return something, you have to use the return keyword. Arrow functions also have that. When you use the return keyword, it’s called an explicit return. However, arrow functions up their game and allow something called implied return where the return keyword can be skipped. Let’s look at some examples 🤓:

Example A: Normal Function

const sayHi = function(name) {
  return name
}

Example B: Arrow Function with Explicit Return

// Multi-line
const sayHi = (name) => {
  return name
}

// Single-line
const sayHi = (name) => { return name }

Example C: Arrow Function with Implicit Return

// Single-line
const sayHi = (name) => name

// Multi-line
const sayHi = (name) => (
  name
)

Notice the difference? When you use curly braces {}, you need to explicitly state the return. However, when you don’t use curly braces, the return is implied and you don’t need it.

There’s actually a name for this. When you use curly braces like in Example b, it’s called a block body. And the syntax in Example c is called a concise body.

⭐️ Here are the rules:

  • Block body ➡️ return keyword is required
  • Concise body ➡️ return keyword is implied and not needed

    Parentheses

With a normal function, we always had to use parentheses. However, with Arrow Functions, parentheses are optional if there is ONLY one parameter.

Parentheses are optional for a SINGLE parameter

// Normal Function
const numbers = function(one) {}

// Arrow Function, with parentheses
const numbers = (one) => {}

// Arrow Function, without parentheses
const numbers = one => {}

Parentheses are required for MULTIPLE parameters

// Normal Function
const numbers = function(one, two) {}

// Arrow Function, with parentheses
const numbers = (one, two) => {}

⚠️ Arrow Functions Gotcha: Returning Objects

Remember I mentioned about the different body types - concise body and block body. Just to quickly update you in case you skipped that section (I’m bit sad you, but not offended 😝). Block body is where you use curly braces and have an explicit return. Concise body is where you don’t use curly braces, and you skip the return keyword. Alright, now you’re caught up, let’s get back to the gotcha 🤯

Let’s purposely break our code, so you can learn your lesson lol 😂

const me = () => { name: "samantha" };

me(); // undefined 😱

What?! Why isn’t it returning my object. Don’t worry, let’s fix it by wrapping it in parentheses.

const me = () => ({ name: "samantha" });

me(); // { name: "samantha" } ✅

⭐️ Here’s the rule:

  • Block body ➡️ return keyword is required
  • Concise body ➡️ return keyword is implied and not needed

    Resources

  • Block body ➡️ return keyword is required
  • Concise body ➡️ return keyword is implied and not needed

javascript

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

JavaScript Tutorial 50 - Promises in JavaScript

JavaScript Tutorial 50 - Promises in JavaScript - This tutorial describes how to create and handle promises in JavaScript.