Debashis Das

Posted on Mar 3

Arrow Functions in JavaScript: A Simpler Way to Write Functions

#javascript #tutorial #webdev #beginners

JavaScript has evolved a lot.

if you compare old-school JS with modern JS, one thing becomes very clear:

We write less code today to achieve the same result.

And one of the bioggest reasons behind that is arrow functions.

Let's break this down in a clean, simple, and practicle way.

1️⃣ What Are Arrow Functions?

Arrow functions were introduced in ES6 (ECMAScript 2015).

Before ES6, we used the traditional function keyword to create functions. It worked fine — but it was often verbose.

Arrow functions give us a shorter and cleaner way to write functions.

Think of them as a more modern, minimal version of regular functions.

2️⃣ How Arrow Functions Reduce Boilerplate

Let’s start with something very basic.

Traditional Function

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

now the same thing an arrow function:

const greet = (name) => {
    return "Hello " + name 
}

This is less typing , Cleaner look, and modern style.

now lets go even further (you will understand how in a moment ⤵ ).

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

That it One line. fully readable.This is why arrow function becomes so popular.

3️⃣ Basic Arrow Function Syntax

The general structure looks like this:

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

Breakdown:

(parameters)  =>  { body }
     ↑             ↑
  input        what it does

The => symbol is what makes it an arrow function.

4️⃣ Arrow Function with One Parameter

If there is only one parameter, parentheses are optional.

Normal Function

function square(num) {
    return num * num
}

Arrow Function

const square = num => {
    num * num
}

cleaner already, right?

5️⃣ Arrow Function with Multiple Parameters

If there are multiple parameters, then parentheses are required.

Normal Function

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

Arrow Function

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

simple rule:

One parameter -> parentheses optional
Multiple parameters -> parentheses required

6️⃣ Implicit Return vs Explicit Return

This is where arrow functions become powerful.

Explicit Return

When you use curly braces {} , you must use return keyword.

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

Implicit Return

If the function has only one expression, you can remove:

Curly braces
return keyword

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

That's called an Implicit return.

▶ If you see no {} --- the value is return automatically.

lets see Another example:

const sayHi = name => "Hi " + name;

No return

Still works perfectly and this is what makes small functions extremely readable.

7️⃣ Basic Difference: Arrow Function vs Normal Function

We won’t go deep into advanced concepts. Just the practical differences:

Normal Function Arrow Function Uses function keyword Uses => More verbose Short and clean Traditional style Modern JS style Has its own this Doesn’t have its own this

For now, focus on readability and simplicity.

Arrow functions are mostly used for:

Small helper functions
Callbacks
Functional programming patterns

✨ Assignment Practice

Let’s apply what we learned.

✅ 1. Normal Function: Square of a Number

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

✅ 2. Rewrite Using Arrow Function

const square = num => num * num;

✅ 3. Arrow Function: Even or Odd

const checkEvenOdd = num => 
    num % 2 === 0 ? "Even" : "Odd";

Short. Clean. Powerful.

✅ 4. Use Arrow Function Inside map()

Let’s say we have an array:

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

using a normal function:

const doubled = numbers.map(function (num) {
    return num * 2
})

Now using arrow function:

const doubled = numbers.map(num => num * 2)

This is where arrow functions shine.

Less clutter. More focus on logic.

🔄 Diagram: Normal Function → Arrow Function

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

            ↓

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

            ↓

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

Step-by-step simplification.

🧠 Arrow Function Syntax Breakdown

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

const      → variable
greet      → function name
name       → parameter
=>         → arrow operator
"Hello..." → returned value (implicit)

💡 Final Thoughts

Arrow functions are not just about writing less code.

They are about:

Clarity
Readability
Expressing intent quickly
Writing modern JavaScript

when your function is small and simple, arrow function make your code feel elegant.

And once you start using them regularly, going back to the old style will feel... too heavy. Modern JavaScript is not about writing more code.

It's about writing smarter.

DEV Community