Arrow Functions in JavaScript

Modern JavaScript introduced arrow functions to make writing functions shorter and cleaner. They reduce unnecessary syntax and help developers write more readable code.

Arrow functions are commonly used in modern JavaScript, especially when working with arrays, callbacks, and functional programming patterns.

---

Why Arrow Functions?

Sometimes normal functions require extra boilerplate code.

Example using a normal function:

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

The same function written with an arrow function:

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

The arrow syntax removes the need for the function keyword and makes the code more compact.

---

Basic Arrow Function Syntax

The general syntax of an arrow function looks like this:

const functionName = (parameters) => {
  // code
};

Example:

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

greet();

Output:

Hello!

---

Arrow Functions with One Parameter

If an arrow function has only one parameter, the parentheses are optional.

Example:

Normal function:

function square(num) {
  return num * num;
}

Arrow function:

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

Both functions do the same thing.

---

Arrow Functions with Multiple Parameters

When there are multiple parameters, parentheses are required.

Example:

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

console.log(multiply(3, 4));

Output:

12

---

Implicit Return vs Explicit Return

Arrow functions support two styles of returning values.

Explicit Return

This works just like normal functions.

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

You explicitly write the return keyword.

---

Implicit Return

If the function body has only one expression, you can remove the braces {} and the return keyword.

Example:

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

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

Output:

8

This is called an implicit return because JavaScript automatically returns the result.

---

Arrow Function Example with Greetings

Normal function:

function greet(name) {
  return "Hello " + name;
}

Arrow function:

const greet = name => "Hello " + name;

console.log(greet("Alice"));

Output:

Hello Alice

---

Basic Difference Between Arrow Functions and Normal Functions

Feature	Normal Function	Arrow Function
Syntax	Uses function keyword	Uses =>
Code length	More verbose	Shorter and cleaner
Modern usage	Older style	Preferred in modern JS
Return behavior	Always explicit	Can be implicit

Arrow functions are widely used in modern JavaScript because they reduce boilerplate code and improve readability.

---

Arrow Functions with map()

Arrow functions are often used with array methods like map().

Example:

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Using arrow functions makes this code short and easy to read.

---

Assignment

Questions

1. Write a normal function that calculates the square of a number.

2. Rewrite the same function using an arrow function.

3. Create an arrow function that returns whether a number is even or odd.

4. Use an arrow function inside map() on an array.

---

Answers

1. Normal Function to Calculate Square

function square(num) {
  return num * num;
}

console.log(square(5));

Output:

25

---

2. Arrow Function Version

const square = num => num * num;

console.log(square(5));

Output:

25

---

3. Arrow Function to Check Even or Odd

const checkEvenOdd = num => {
  if (num % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

console.log(checkEvenOdd(6));
console.log(checkEvenOdd(7));

Output:

Even
Odd

---

4. Arrow Function with map()

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

let squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers);

Output:

[1, 4, 9, 16]

---

Conclusion

Arrow functions provide a shorter and more modern way to write functions in JavaScript. They improve readability, reduce unnecessary syntax, and work especially well with array methods like map() and filter().

As you continue learning JavaScript, you will frequently see arrow functions used in modern codebases.