Arrow Functions In JavaScript

An arrow function in JavaScript offers a neat and modern approach to writing function expressions, using the => ("fat arrow") syntax. Introduced in ES6 (ECMAScript 2015), it helps create shorter and more readable code, especially for simple, one-liner functions and callbacks. Unlike traditional functions, arrow functions don't have their own this context. Instead, they inherit the this value from the surrounding scope where they're defined.

First, how are arrow functions different from traditional functions?

Traditional Function Example

function add(a, b) {
  return a + b;
}

Arrow Function Example

const add = (a, b) => {
  return a + b;
};

/*If the function contains only one expression, you can remove the curly braces and the return keyword.*/

const multiply = (a, b) => a + b; //This is also called as a single line arrow function

Arrow Function Syntax

General Syntax of Arrow Function.

const functionName = (parameters) => {
  // function body
};

explanation of Every Part of Arrow function syntax
const (or let or var): Declares a variable to hold the function expression.

• functionName: The name of the variable the function is assigned to.

• (parameters): The inputs to the function.

• =>: The arrow that separates the parameters from the function body.

• { ... }: The function body, where the code runs. A return statement is needed here to return a value

Visual Representation of Arrow Function

const functionName = (parameters) => expression;

      │              │            │
      │              │            └── Code to execute / return value
      │              └────────────── Input parameters
      └───────────────────────────── Variable storing the function

Arrow Function with Single parameter

In a single-parameter arrow function, if there is only one parameter, then parentheses are optional.

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

console.log(double(3)); //6

If there are no arguments, parentheses remain empty, but they must be included:

let sayHi = () => alert("Hello!");

sayHi();

Arrow functions can be used in the same way as Function Expressions.

For instance, to dynamically create a function:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Arrow Function With Multiple parameter

The basic syntax for an arrow function with multiple parameters is as follows:

const functionName = (param1, param2, ...) => {
  // function body (multiple statements)
  return result;
};

Examples

• Addition: A function that takes two numbers and returns their sum.

  javascript

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

Multi-line line Arrow Function

The arrow function we saw earlier was very simple. They just took arguments from the left side of => and then evaluated and returned the right side of the expression with them. Sometimes, when we need a more complex function with multiple expressions and conditions, we enclose them in curly braces {}. The major difference with curly braces is that they require a return statement, just like regular functions do.

Like this.

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

Implicit Return vs Explicit Return

1. Explicit Return

In an explicit return, you clearly use the return keyword to send a value back from the function. This is commonly used in traditional functions and in arrow functions with multiple lines.

Example

const add = (a, b) => {
  return a + b;
};

console.log(add(5, 3)); // 8

Here in The above example.

The function body use {} . The value is returned using the return keyword.

2. Implicit Return.

In an implicit return, the value is automatically returned without writing the return keyword. It is also known as a single-line arrow function.

Example.

const add = (a, b) => a + b;

console.log(add(5, 3)); //8

Here, there are no curly braces {}. JavaScript automatically returns the result of a + b.

Example with Array Method.

Explicit Return

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => {
  return num * 2;
});

Implicit Return

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

Key Differences b/w Implicit and Explicit Return.

Simple Rule:

• Use explicit return when your function has multiple lines of code.

• Use implicit return when your function has one simple expression.

Quick Memory Trick

{ }  → Need return → Explicit Return

No { } → No return → Implicit Return

• “Now it’s your turn: try converting your old functions to arrow functions and see how much cleaner your code becomes!”

• Or: “Arrow functions are a small change with a big impact on readability—start using them today.”

Happy Coding !!