Arrow Functions in JavaScript: A Simpler Way to Write Functions
When I first started learning JavaScript, normal functions felt completely fine. They worked, they made sense, and I used them for almost everything.
Then I came across arrow functions.
At first, they looked like just a shorter way of writing functions. And honestly, that is exactly why most beginners like them. They remove some extra syntax, make the code cleaner, and are used a lot in modern JavaScript.
In this article, I’ll explain arrow functions in a simple way with small, practical examples.
Why Do We Even Need Arrow Functions?
Before arrow functions, we mostly wrote functions like this:
function greet(name) { return "Hello, " + name; }
This is absolutely correct.
But JavaScript introduced arrow functions to make function syntax shorter and more readable in many situations.
The same function can be written like this:
const greet = (name) => { return "Hello, " + name; };
At first glance, it may not look like a huge difference. But when we start using small functions again and again, especially inside array methods like map(), arrow functions feel much cleaner.
What Are Arrow Functions?
An arrow function is a shorter way to write a function in JavaScript.
It uses the => symbol, which is why it is called an arrow function.
Basic idea:
const functionName = (parameters) => { // code };
So instead of using the function keyword, we use an arrow.
Basic Arrow Function Syntax
Let’s start with a very simple example.
Normal function
function sayHello() { return "Hello"; }
Arrow function
const sayHello = () => { return "Hello"; };
Both do the same thing.
The difference is just the syntax.
Arrow Functions With One Parameter
If an arrow function has only one parameter, we can write it like this:
const greet = name => { return "Hello, " + name; }; console.log(greet("Nawazish"));
Output:
Hello, Nawazish
Notice one small thing here:
- with one parameter, parentheses are optional
So both of these are valid:
const greet = name => { return "Hello, " + name; };
const greet = (name) => { return "Hello, " + name; };
For beginners, I think using parentheses is often clearer, but it is good to know both forms.
Arrow Functions With Multiple Parameters
If we have more than one parameter, then parentheses are required.
Normal function
function add(a, b) { return a + b; }
Arrow function
const add = (a, b) => { return a + b; }; console.log(add(10, 5));
Output:
15
This is a very common use case.
A Real-Life Example
Suppose I want a function that calculates the total price of two items.
Normal function
function totalPrice(item1, item2) { return item1 + item2; }
Arrow function
const totalPrice = (item1, item2) => { return item1 + item2; }; console.log(totalPrice(200, 150));
Output:
350
This is the kind of simple, practical use case where arrow functions feel easy and natural.
Implicit Return vs Explicit Return
This is one of the most important parts of arrow functions.
When I first learned arrow functions, this was the part that made them feel really different.
Explicit Return
In an explicit return, we use { } and write return ourselves.
const square = (num) => { return num * num; }; console.log(square(4));
Output:
16
Here, the function block is clearly written, and we explicitly return the value.
Implicit Return
If the function has only one expression, we can write it in a shorter way without { } and without return.
const square = num => num * num; console.log(square(4));
Output:
16
This is called implicit return.
JavaScript automatically returns the result of that expression.
Explicit vs Implicit Return Side by Side
const add1 = (a, b) => { return a + b; }; const add2 = (a, b) => a + b;
Both work the same way.
I usually think of it like this:
use explicit return when the function has more than one line
use implicit return when the function is short and simple
Normal Function to Arrow Function Transformation
Here’s a simple transformation:
Normal Function function multiply(a, b) { return a * b; } Arrow Function const multiply = (a, b) => { return a * b; } Short Arrow Function const multiply = (a, b) => a * b;
This is why people say arrow functions reduce boilerplate.
Basic Difference Between Arrow Function and Normal Function
At a beginner level, the main difference is this:
arrow functions are shorter
they are commonly used in modern JavaScript
they make small functions easier to write
Normal function
function greet(name) { return "Hello, " + name; }
Arrow function
const greet = (name) => { return "Hello, " + name; };
For now, that is the most important practical difference.
There are some deeper differences too, especially with this, but if you are a beginner, you do not need to go deep into that right now.
A Practical Example With Greetings
Let’s say we want to greet users by name.
Normal function
function welcomeUser(name) { return "Welcome, " + name; } console.log(welcomeUser("Aman"));
Arrow function
const welcomeUser = (name) => { return "Welcome, " + name; }; console.log(welcomeUser("Aman"));
Output:
Welcome, Aman
This is simple, readable, and close to how we use functions in real programs.
Assignment Example 1: Square of a Number
First, let’s write it as a normal function.
function square(num) { return num * num; } console.log(square(5));
Output:
25
Now let’s rewrite it as an arrow function.
const squareArrow = (num) => { return num * num; }; console.log(squareArrow(5));
We can make it even shorter:
const squareArrow = num => num * num; console.log(squareArrow(5));
Assignment Example 2: Even or Odd
Let’s create an arrow function that checks whether a number is even or odd.
const checkEvenOdd = (num) => { return num % 2 === 0 ? "Even" : "Odd"; }; console.log(checkEvenOdd(8)); console.log(checkEvenOdd(7));
Output:
Even Odd
This is a nice real-life example because checking even and odd numbers is a common beginner exercise.
Assignment Example 3: Arrow Function Inside map()
This is where arrow functions become really useful.
Suppose we have an array of numbers and want to create a new array with doubled values.
const numbers = [1, 2, 3, 4]; const doubled = numbers.map((num) => { return num * 2; }); console.log(doubled);
Output:
[2, 4, 6, 8]
And using implicit return:
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled);
This is one of the reasons arrow functions are so popular. They make small callback functions much cleaner.
Real-Life Example With Prices
Imagine I have an array of product prices and I want to add a delivery fee to each one.
const prices = [100, 200, 300]; const finalPrices = prices.map(price => price + 50); console.log(finalPrices);
Output:
[150, 250, 350]
That looks simple and practical. It also feels much more readable than writing a long function for a small task.
Arrow Function Syntax Breakdown
const add = (a, b) => a + b; | | | | variable params arrow return value
So the structure is:
variable name
parameters
arrow =>
function body or returned expression
When Should We Use Arrow Functions?
This is the simple rule I follow:
Use arrow functions when:
the function is short
the function is simple
we are writing callbacks
we want cleaner modern syntax
Examples:
inside map()
inside filter()
for short helper functions
for quick calculations
When Normal Functions Still Feel Better
Sometimes normal functions still look clearer, especially when:
the function is large
the logic has many lines
readability matters more than short syntax
So it is not about saying one is always better than the other.
It is more about using the one that keeps the code easy to understand.
Easy Way to Remember
This is how I remember it:
normal function = classic way
arrow function = shorter modern way
explicit return = use return
implicit return = JavaScript returns automatically
Final Thoughts
When I first saw arrow functions, they looked like a fancy JavaScript shortcut. But after using them in small examples, especially with array methods, they started feeling very natural.
If you are a beginner, don’t rush to memorize every syntax rule at once. First, try converting simple normal functions into arrow functions. That is the easiest way to build confidence.
Once you practice a few examples like greetings, square of a number, and map(), arrow functions start making a lot more sense.
