Different Many Ways to Write Arrow Function in JavaScript

Hello World, in this blog I will show you the different ways of writing arrow functions in your JS code.

Based on the above possibilities there could be (2 x 2 x 3)12 possible types of basic arrow functions. These are the kind of functions you'll find in different JS code.

1. Function with "No Return Value" AND "No Arguments(s)" AND "Single Statement"

2. Function with "No Return Value" AND "No Arguments(s)" AND "Multiple Statement"

3. Function with "A Return Value" AND "No Argument(s)" AND "Multiple Statements"

4. Function with "A Return Value" AND "No Argument(s)" AND "Single Statement"

5. Function with "No Return Value" AND "Multiple Arguments(s)" AND "Single Statement"

6. Function with "No Return Value" AND "Multiple Arguments(s)" AND "Multiple Statement"

7. Function with "A Return Value" AND "Multiple Argument(s)" AND "Multiple Statements"

8. Function with "A Return Value" AND "Multiple Argument(s)" AND "Single Statement"

9. Function with "No Return Value" AND "Single Arguments(s)" AND "Single Statement"

10. Function with "No Return Value" AND "Single Arguments(s)" AND "Multiple Statement"

11. Function with "A Return Value" AND "Single Argument(s)" AND "Multiple Statements"

12. Function with "A Return Value" AND "Single Argument(s)" AND "Single Statement"

I hope you recognise the differences or the usage wherever you find them. I also hope that it will add some perspective and intuition to using the arrow function in your code.

Basic Structure:

const myFunction = () => {
  // Statements
};

/* A B = (arguments) => {
C
} */

/*
A = let / const / var
B = Name of the function 
C = body of the function / statements

use these A, B, C according to need of your program in your arrow function.
*/

Function with "No Return Value" AND "No Arguments(s)" AND "Single Statement":

const greet = () => console.log("Hello, world!");
greet(); // Output: Hello, world!

Function with "No Return Value" AND "No Arguments(s)" AND "Multiple Statement":

const printNumbers = () => {
  console.log(1);
  console.log(2);
  console.log(3);
};

printNumbers();
// Output:
// 1
// 2
// 3

Function with "A Return Value" AND "No Argument(s)" AND "Multiple Statements":

const getRandomNumber = () => {
  const randomNumber = Math.random();
  return randomNumber;
};

const number = getRandomNumber();
console.log(number); // Output: (a random number between 0 and 1)

Function with "A Return Value" AND "No Argument(s)" AND "Single Statement":

const getPi = () => 3.14;
const pi = getPi();
console.log(pi); // Output: 3.14

Function with "No Return Value" AND "Multiple Arguments(s)" AND "Single Statement":

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

Function with "No Return Value" AND "Multiple Arguments(s)" AND "Multiple Statement":

const displayInfo = (name, age) => {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
};

displayInfo("John", 30);
// Output:
// Name: John
// Age: 30

Function with "A Return Value" AND "Multiple Argument(s)" AND "Multiple Statements":

const calculateAverage = (a, b, c) => {
  const sum = a + b + c;
  const average = sum / 3;
  return average;
};

const result = calculateAverage(10, 15, 20);
console.log(result); // Output: 15

Function with "A Return Value" AND "Multiple Argument(s)" AND "Single Statement":

const multiply = (x, y) => x * y;
const product = multiply(5, 7);
console.log(product); // Output: 35

Function with "No Return Value" AND "Single Arguments(s)" AND "Single Statement":

const square = num => console.log(num * num);
square(4); // Output: 16

Function with "No Return Value" AND "Single Arguments(s)" AND "Multiple Statement":

const printPerson = person => {
  console.log(`Name: ${person.name}`);
  console.log(`Age: ${person.age}`);
};

const person = { name: "Alice", age: 25 };
printPerson(person);
// Output:
// Name: Alice
// Age: 25

Function with "A Return Value" AND "Single Argument(s)" AND "Multiple Statements":

const isEven = num => {
  const remainder = num % 2;
  return remainder === 0;
};

console.log(isEven(4)); // Output: true
console.log(isEven(7)); // Output: false

Function with "A Return Value" AND "Single Argument(s)" AND "Single Statement":

const double = num => num * 2;
const result = double(5);
console.log(result); // Output: 10

A Final Generalised Example

// No arguments and a single statement
const greet = () => console.log("Hello!");

// Single argument and a single statement
const double = x => x * 2;

// Multiple arguments and a single statement
const add = (a, b) => a + b;

// No arguments and multiple statements
const printNumbers = () => {
  console.log(1);
  console.log(2);
};

// Single argument and multiple statements
const isEven = num => {
  const remainder = num % 2;
  return remainder === 0;
};

Thank you all. Keep skimming!