Arrow Functions in JavaScript: A Simpler Way to Write Functions

In the JavaScript arrow function is a modern way to write function .

What Are Arrow Functions?

Simple Definition:

Arrow functions = A shorter, cleaner way to write functions using => .

Normal Function:

function greet() {
  console.log("Hello!");
}

greet(); // Output: "Hello!"

Same Thing with Arrow Function:

const greet = () => {
  console.log("Hello!");
};

greet(); // Output: "Hello!"

Notice the => ? That arrow make it an "arrow function"! 🎯

Visual Breakdown:

Simple Arrow Function

const sayHello = () => {
  console.log("Hello from arrow function!");
};

sayHello(); // Output: "Hello from arrow function!"

Arrow Function with Return

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(5, 4)); // Output: 20

Arrow Functions with One Parameter

You can skip parentheses if only one parameter need to pass

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

const square = x => {
  return x * x;
};

One Parameter

const double = x => {
  return x * 2;
};

console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

Arrow Functions with Multiple Parameters

Always use parentheses when two or more than two parameter available .

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

const greet = (firstName, lastName) => {
  return "Hello " + firstName + " " + lastName;
};

Implicit Return vs Explicit Return

Implicit return = Return WITHOUT writing the return keyword

It only works when your function body is ONE LINE!

Explicit Return (Normal Way):

const add = (a, b) => {
  return a + b;  // You write 'return'
};

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

Implicit Return :

const add = (a, b) => a + b; // No 'return' needed!

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

Key Difference: Normal Function vs Arrow Function

I hope this blog help you ! Happy Coding 👨‍💻