Different types of arrow functions

Different types of arrow functions
October 20, 2023

1. No Parameters

This function is named greet. It takes no parameters. When invoked, it simply returns the string "Hello!".

const greet = () => "Hello!";

The function's primary purpose is to always provide a greeting. Since there are no parameters, every time it's called, it will consistently return the same greeting message.

2. Single Parameter

If there's only one parameter, parentheses are optional.

const square = x => x * x;
console.log(square(4)); // Outputs: 16

This function is named square. It takes a single parameter x and returns the result of multiplying x by itself.

The function calculates the square of a number. If you provide 4 as an argument, it will return 16 because 4 multiplied by 4 equals 16.

3. Multiple Parameters

For more than one parameter, parentheses are required.

const add = (a, b) => a + b;
console.log(add(2, 3)); // Outputs: 5

This function is named add. It takes two parameters, a and b, and returns their sum.

This function can be used for adding two numbers together. For instance, invoking add(2, 3) would return 5.

4. Function Body with Multiple Statements

If the function body has more than one statement, you need to use curly braces and specify the return keyword (if you want to return something).

const greetPerson = name => {
  const greeting = "Hello, " + name + "!";
  return greeting;
console.log(greetPerson("Alice")); // Outputs: Hello, Alice!

This function is named greetPerson. It accepts a single parameter name. Inside its body, it constructs a personalized greeting message and then returns that message.

This function's purpose is to provide a personalized greeting based on the name provided. If you call it with greetPerson("Alice"), it will return "Hello, Alice!".

5.  Returning Object Literals

When directly returning an object literal, wrap the literal in parentheses to differentiate it from the function block.

const makePerson = (firstName, lastName) => ({ first: firstName, last: lastName });
console.log(makePerson("John", "Doe")); // Outputs: { first: 'John', last: 'Doe' }

This function is named makePerson. It takes two parameters, firstName and lastName. The function then returns an object with two properties: first and last, which are assigned the values of firstName and lastName respectively.

This function is useful for quickly creating an object with a given first name and last name. For instance, makePerson("John", "Doe") would return the object { first: 'John', last: 'Doe' }.

6. Higher Order Functions and Callbacks

Arrow functions are particularly popular when used as short callbacks

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8]

In this example, the map method is used to iterate over each element in the numbers array. For each element, it calls the provided arrow function, which doubles the number, resulting in a new array doubled with all numbers doubled.

This code's main aim is to produce a new array where each element is doubled. Given the initial array [1, 2, 3, 4], the resulting doubled array will be [2, 4, 6, 8].

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates