JavaScript Arrow Functions

Arrow functions are a shorter way to write functions in modern JavaScript. They make your code cleaner and easier to read.

1. What are arrow functions?

Arrow functions are just functions with a shorter syntax using =>.

Normal function:

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

Arrow function version:

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

2. Basic arrow function syntax

General Pattern

const functionName = (parameters) => {
  return result;
};

Example:

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

3. Arrow functions with one parameter

If there is one parameter, you can skip the parentheses.

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

// Arrow function
const squareArrow = num => {
  return num * num;
};

console.log(squareArrow(4)); // 16

Both square and squareArrow do the same thing.

4. Arrow functions with multiple parameters

With 2 or more parameters, you must keep the parentheses.

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

console.log(multiply(3, 5)); // 15

5. Implicit return vs explicit return

Explicit return (with return and curly braces)

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

You use return and curly braces {}.

Implicit return (no return, no curly braces)

When the function body is just one expression, you can skip return and {}:

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

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

• This is implicit return: the expression a + b is returned automatically.

Another example:

const isPositive = num => num > 0;

console.log(isPositive(5));  // true
console.log(isPositive(-3)); // false

Use implicit return for very short, simple functions.

6. Arrow functions vs normal functions (basic difference)

For beginners, remember these simple points:

• Syntax:

  • Normal: function name(...) { ... }

  • Arrow: const name = (...) => { ... }

• Use case:

  • Arrow functions are often used for short functions, callbacks, and with array methods like map, filter, forEach.

• this behavior (advanced):

  • Arrow functions handle this differently, but as a beginner, you can skip this for now.

For now, focus on syntax and readability, not this.

7. Using arrow functions with map()

Arrow functions shine when used with array methods.

Normal function with map:

let nums = [1, 2, 3];

let doubled = nums.map(function (num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6]

Arrow function version:

let nums = [1, 2, 3];

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

console.log(doubled); // [2, 4, 6]

• Cleaner

• Easier to read

• Very common in modern JavaScript

8. Visual / diagram ideas (for your article)

You can imagine (or draw) something like:

• Normal → Arrow transformation

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

• Arrow syntax breakdown

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

  • const add → function name

  • (a, b) → parameters

  • => → “arrow”

  • a + b → returned expression (implicit return)

9. Practice assignment (do this in console)

1. Normal function → square

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

console.log(square(5));

1. Rewrite it using an arrow function

const squareArrow = num => num * num;

console.log(squareArrow(5));

1. Arrow function to check even/odd

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

console.log(isEven(4));
console.log(isEven(7));

1. Use an arrow function inside map()

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

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

console.log(doubled);

Final thoughts

• Start from normal functions, then convert them to arrow functions.

• Use arrow functions for short, clear logic, especially with arrays.

• Keep examples simple: math, greetings, checks (even/odd).
  Once this feels natural, you’ll be writing modern JavaScript without thinking about it.

Happy learning!