Arrow Functions in JavaScript: A Simpler Way to Write Functions

A function is a reusable block of code designed to perform a specific task. Instead of writing the same logic multiple times, we can define it once inside a function and call it whenever we need it.

In Modern Javascript, arrow function gives a shorter and cleaner syntax for the implementation of functions. Let's explore this blog to understand Arrow Function.

1. What is an Arrow Function?

In modern javascript Arrow function are introduced to write shorter and simpler code. Instead of writing a function keyword, use => in an arrow function. Arrow functions are mostly used in callback functions and array methods.

// Normal Function 

function greet(name) {
    return "Hello" + name + "!";
}
let call = greet("Piyush");
console.log(call);

// Output: 
Hello Piyush!

// Arrow Function 

const square = x => x * x{
    console.log(square(5));
}
// Output
25

Why use Arrow functions

As you can see in the examples above, both functions perform well; the difference lies in syntax. In arrow functions, simpler and shorter, more readable. Using arrow functions is also preferred in modern JavaScript practices.

2. Basic arrow function syntax

The usual syntax for an arrow function looks like this:

const functionName = (parameter) => {
    //Code to be executed
}

//Example of an Arrow function 

const square = (x) => x*x {
   console.log(square(11));
}
// Output: 
121

Arrow functions with one parameter

An Arrow function with one parameter means the parentheses in the function are optional.

// With Parentheses 
const square = (x) => {
    return x * x;
};

// Example without Parentheses
const square = x => {
    return x*x;
};

console.log(square(6));
// Output from both function is: 
36

4. Arrow function with multiple parameter

If an arrow function is with multiple parameter it means parentheses is mandatory.

const sum = (a , b) => {
    return a + b;
}
console.log(99 , 99)

//Output: 
188

5. Implicit return vs explicit return

Explicit Return

An explicit return is when you use the return keyword to clearly specify the value that the function should output. This is required in:

• Regular functions declared with the function keyword.

• Arrow functions with a "block body" (enclosed in curly braces {})

// Regular function
function add(a, b) {
  return a + b; // Explicitly returning the sum
}

// Arrow function with a block body
const subtract = (a, b) => {
  const result = a - b;
  return result; // Explicitly returning the result
};

Implicit Return

An implicit return is a shortcut available in arrow functions with a "concise body" (without curly braces {}). JavaScript automatically returns the result of the single expression that follows the arrow, without the need for the return keyword.

// Implicitly returning the sum (single expression)
const add = (a, b) => a + b;

// Implicitly returning an object literal (must be wrapped in parentheses to avoid ambiguity with a block body)
const createUser = (name, email) => ({ name, email });

6. Arrow function vs Normal function

Feature	Normal Function	Arrow Function
Syntax	Verbose; uses the function keyword.	Concise; uses the => "fat arrow".
Implicit Return	No: Requires an explicit return keyword to return values.	Yes: Can omit return and braces for single-line expressions.
Hoisting	Yes: Declarations are hoisted and can be called before they are defined.	No: Behaves like variables; cannot be accessed before initialization.
arguments Object	Yes: Has a built-in arguments object containing all passed values.	No: Does not have its own arguments; must use rest parameters.

Assignment

// 1. Square a number(normal function)
function square (num) {
    return num * num;
}
console.log(square(20)) // Result: 400

// 2. Square a number(arrow function)
const square = n => n*n;
console.log(square(10)) // Result: 100

// 3. Check even or odd
const isEvenorOdd = n => n%2 === 0 ? "even" : "odd";

// using map in array
const num = [1, 2, 3, 4, 5];
const square = numbers.map(n => n*n);

console.log(squares); // [1, 4, 9, 16, 25]