Arrow Functions in JavaScript: A Simpler Way to Write Functions

Hello cohort! ☕
In modern JavaScript (ES6+), one of the biggest quality-of-life improvements is arrow functions. They let you write shorter, cleaner functions with less boilerplate — perfect when you're using map(), filter(), callbacks, or just simple helpers.

Today we'll cover everything a beginner needs:

• What arrow functions are

• Basic syntax

• Single & multiple parameters

• Implicit vs explicit return

• Basic differences from normal functions

All with super simple examples. Let's make your code look modern and readable!

What Are Arrow Functions?

Arrow functions (introduced in ES6 / 2015) are a concise way to write function expressions. They use the => ("fat arrow") symbol instead of the function keyword.

They reduce typing, make code cleaner, and are super common in modern JS — especially inside array methods like map() and forEach().

Basic Arrow Function Syntax

Traditional function:

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

Arrow function version:

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

Even shorter — no function, no curly braces (if single expression), no return needed!

Try this in console:

const greet = () => "Hello, Cohort!";
console.log(greet());  // Hello, Cohort!

Arrow Functions with One Parameter

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

Traditional:

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

Arrow:

const square = num => num * num;

Console test:

console.log(square(5));   // 25
console.log(square(10));  // 100

Super clean!

Arrow Functions with Multiple Parameters

For two or more parameters, parentheses are required.

const multiply = (x, y) => x * y;

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

With more logic (need curly braces + explicit return):

const power = (base, exp) => {
  return base ** exp;
};

console.log(power(2, 5));  // 32

Implicit Return vs Explicit Return

Implicit return (magic!): If no curly braces {} and just one expression, JS automatically returns the result. No return keyword needed.

Implicit (short & sweet):

const double = n => n * 2;          // implicit return
const isEven = num => num % 2 === 0;

Explicit (when you need more lines or clarity):

const doubleExplicit = n => {
  console.log("Doubling:", n);
  return n * 2;                    // must write return
};

Rule of thumb: Use implicit for simple one-liners (most common). Use explicit when you have multiple statements.

Basic Difference Between Arrow Functions and Normal Functions

For now (beginner level), just remember:
Arrow functions = great for short, non-method functions (like inside map, setTimeout, etc.).
We'll cover this in detail later — don't worry about it yet!

Quick conversion examples:

Normal → Arrow:

// Normal
function sayHi(name) {
  return "Hi " + name + "!";
}

// Arrow (implicit)
const sayHi = name => "Hi " + name + "!";

// Even better with template literal
const sayHi = name => `Hi ${name}!`;

Mini Assignment – Practice in Console!

1. Write a normal function to calculate the square of a number.

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

2. Rewrite it as an arrow function (try both implicit & explicit).

3. Create an arrow function isEven that returns true if a number is even, false otherwise.

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

4. Use an arrow function inside map():

   const numbers = [1, 2, 3, 4];
   const doubled = numbers.map(num => num * 2);
   console.log(doubled);  // [2, 4, 6, 8]
   

Run these in your browser console and share your results in the cohort group!

Visual Ideas (Diagram Suggestions)

1. Normal function → Arrow function transformation

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

   • Arrow: const add = (a, b) => a + b;

   • Show crossed-out parts: function keyword, curly braces, return

2. Arrow function syntax breakdown

   • (parameters) → optional () for 1 param

   • => → the fat arrow!

   • { body } or just expression for implicit return

3. Implicit vs Explicit return

   • Short arrow: x => x * 2 → auto returns

   • Long: (x) => { return x * 2; } → manual return

Arrow functions make your code feel modern and less noisy — practice them daily and they'll become second nature!

Happy coding, cohort! 🚀
Which arrow function style do you like best — implicit one-liners or explicit?

Drop a comment! 😄