Arrow Functions in JavaScript (Beginner Friendly)

Arrow functions were introduced in ECMAScript 6 (ES6) to provide a shorter and cleaner way to write functions. Instead of using the function keyword, arrow functions use =>.

Normal Function vs Arrow Function

Normal Function:

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

Arrow Function:

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

Much cleaner! ✨

---

Single Parameter

When there's only one parameter, you can skip the parentheses:

const square = num => num * num;

square(5); // 25

---

Multiple Parameters

For two or more parameters, wrap them in parentheses:

const multiply = (a, b) => a * b;

---

Implicit Return

Instead of writing:

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

You can write:

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

💡 When the function body is a single expression, drop the curly braces and return keyword — the value is returned implicitly.

---

Even or Odd Example

Arrow functions shine in short, expressive one-liners:

const isEven = num => num % 2 === 0;

isEven(4); // true
isEven(7); // false

---

Arrow Functions with map()

Arrow functions are especially powerful with array methods like map(), filter(), and reduce():

const numbers = [1, 2, 3, 4];

const squares = numbers.map(num => num * num);

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

---

Final Thought

Arrow functions make JavaScript cleaner, more readable, and more modern. They are widely used in frameworks like React and are an essential skill for every web developer.

---

Found this helpful? Drop a 🦄 or ❤️ and follow for more beginner-friendly JavaScript tips!