Back to Course

Introduction to JavaScript

0% Complete
0/0 Steps
  1. JavaScript: Basics
    9Topics
    |
    10 Quizzes
  2. JavaScript: Variables
    9Topics
    |
    10 Quizzes
  3. JavaScript: Conditional Statements
    10Topics
    |
    11 Quizzes
  4. JavaScript: Functions
    10Topics
    |
    11 Quizzes
  5. JavaScript: Scope
    6Topics
    |
    7 Quizzes
  6. JavaScript: Arrays
    11Topics
    |
    12 Quizzes
  7. JavaScript: Loops
    8Topics
    |
    9 Quizzes
  8. JavaScript: High Order Functions
    3Topics
    |
    3 Quizzes
Lesson 4, Topic 10
In Progress

JavaScript: Concise Body Arrow Functions

Yasin Cakal 7 Nov 2021
Lesson Progress
0% Complete

There are several ways to refactor the syntax of arrow functions in JavaScript. The function’s most condensed form is known as a concise body. Below, we’ll look at a few of these methods:

Parentheses are not required for functions with only one parameter. Parentheses are required if a function takes zero or multiple parameters.

  • ZERO PARAMETERS
    const functionName = () => { };
  • ONE PARAMETER
    const functionName = parameter1 => { };
  • MULTIPLE PARAMETER
    const functionName = (parameter1 , parameter2 ) => { };

Curly braces { } are not required for a function body made up of a single-line block. If the curly braces are removed, whatever that line evaluates will be returned automatically. The return keyword can be removed, and the contents of the block should immediately follow the arrow =>. This is known as an implicit return.

  • SINGLE-LINE BLOCK
    const sum = number => number + number;
  • MULTI-LINE BLOCK
const sum = number => {
   const sum = number + number;
   return sum;
};

So if we have a function:

const numberCube = (num) => {
  return num *num*num;
};

We can refactor the numberCube and can write it as:

const numberCube = num => num * num * num;

Take note of the following changes:

  • Because num only has one parameter, the parentheses ( ) around it have been removed.
  • Since the function is a single-line block, the curly braces { } have been removed.
  • The function is a single-line block so┬áthe return keyword has been removed.

Responses

Leave a Reply

%d bloggers like this: