Arrow Functions in JavaScript for Beginners
Software Developer passionate about building scalable backend systems and real-world products. I write about what I learn while working with different aspects of the systems and thier designs, focusing on clarity, performance, and practical engineering.
If you have started learning modern JavaScript, you have probably seen code like this:
const add = (a, b) => a + b;
At first, it may look a little strange.
Where is the function keyword?
Why is there an arrow =>?
And why does this style look so short?
That is exactly what arrow functions are for.
Arrow functions are a shorter and cleaner way to write functions in JavaScript. They help reduce boilerplate and are very commonly used in modern JavaScript, especially in React and other modern codebases.
In this blog, we will learn:
what arrow functions are
basic arrow function syntax
arrow functions with one parameter
arrow functions with multiple parameters
implicit return vs explicit return
the basic difference between arrow functions and normal functions
We will keep the examples very simple and beginner-friendly.
Let’s begin.
What are arrow functions?
Arrow functions are a shorter syntax for writing functions in JavaScript.
They let us write the same logic with less code.
For example, look at this normal function:
function greet(name) {
return "Hello, " + name;
}
Now look at the same function written as an arrow function:
const greet = (name) => {
return "Hello, " + name;
};
Both do the same job.
The arrow function version is more compact and is widely used in modern JavaScript.
Why arrow functions are useful
One of the main reasons arrow functions are popular is that they reduce boilerplate.
Let us compare.
Normal function
function add(a, b) {
return a + b;
}
Arrow function
const add = (a, b) => {
return a + b;
};
Both functions work the same way, but arrow functions often look shorter and cleaner.
This becomes even more useful when writing small functions.
Basic arrow function syntax
Here is the basic syntax of an arrow function:
const functionName = (parameters) => {
return value;
};
Let us break it down:
conststores the function in a variablefunctionNameis the name of the function(parameters)are the input values=>is the arrow{}contains the function bodyreturnsends back the result
Example
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(2, 3));
Output
6
Arrow function syntax breakdown
const multiply = (a, b) => {
return a * b;
};
Visual breakdown
const multiply = (a, b) => {
| | |
| | └── arrow
| └──────── parameters
└──────────────────── function name
Another simple view
const greet = (name) => {
return "Hello " + name;
};
greet → function name
name → parameter
=> → arrow function symbol
return → sends value back
Arrow functions with one parameter
If an arrow function has only one parameter, you can write it with or without parentheses.
With parentheses
const square = (num) => {
return num * num;
};
console.log(square(4));
Without parentheses
const square = num => {
return num * num;
};
console.log(square(4));
Output
16
Both are valid.
For beginners, using parentheses is often easier to read at first.
Example with greeting
const greet = name => {
return "Hello, " + name;
};
console.log(greet("Yogayata"));
Output
Hello, Yogayata
Arrow functions with multiple parameters
If there are multiple parameters, parentheses are required.
Example
const add = (a, b) => {
return a + b;
};
console.log(add(5, 3));
Output
8
Another example
const introduce = (firstName, lastName) => {
return "Hello, " + firstName + " " + lastName;
};
console.log(introduce("Yogayata", "Verma"));
Output
Hello, Yogayata Verma
Converting normal functions into arrow functions
This is one of the easiest ways to understand arrow functions.
Let us convert some normal functions into arrow functions step by step.
Example 1: Addition
Normal function
function add(a, b) {
return a + b;
}
Arrow function
const add = (a, b) => {
return a + b;
};
Example 2: Greeting
Normal function
function greet(name) {
return "Hello, " + name;
}
Arrow function
const greet = (name) => {
return "Hello, " + name;
};
Example 3: Square of a number
Normal function
function square(num) {
return num * num;
}
Arrow function
const square = (num) => {
return num * num;
};
Normal function to arrow function transformation
Normal function:
function add(a, b) {
return a + b;
}
Arrow function:
const add = (a, b) => {
return a + b;
};
What changed?
1. Removed the "function" keyword
2. Added "=" after the function name
3. Added "=>" before the function body
4. Kept the same logic
Another quick transformation
function greet(name) {
return "Hello, " + name;
}
↓ becomes ↓
const greet = (name) => {
return "Hello, " + name;
};
Explicit return in arrow functions
An explicit return means you write the return keyword yourself.
Example
const subtract = (a, b) => {
return a - b;
};
console.log(subtract(10, 4));
Output
6
In this example:
curly braces are used
returnis written clearlythis is called explicit return
This style is useful when the function body has more than one line or when you want the logic to be very clear.
Implicit return in arrow functions
If an arrow function has only one expression, you can skip:
the curly braces
the
returnkeyword
JavaScript will automatically return the result.
This is called implicit return.
Example
const subtract = (a, b) => a - b;
console.log(subtract(10, 4));
Output
6
This is the shorter version of the previous example.
Compare both
Explicit return
const multiply = (a, b) => {
return a * b;
};
Implicit return
const multiply = (a, b) => a * b;
Both work the same way.
Explicit return vs implicit return
Let us understand this clearly.
Explicit return
Use curly braces and write return.
const greet = (name) => {
return "Hello, " + name;
};
Implicit return
No curly braces and no return.
const greet = (name) => "Hello, " + name;
Important rule
If you use curly braces {}, you usually need to write return.
If you remove the curly braces, JavaScript can return the value automatically.
Simple comparison
Explicit return:
(param) => {
return value;
}
Implicit return:
(param) => value
Example with math
const double1 = (num) => {
return num * 2;
};
const double2 = (num) => num * 2;
console.log(double1(5));
console.log(double2(5));
Output
10
10
When to use implicit return
Implicit return is great for very small functions.
Good example
const square = num => num * num;
This is short and readable.
Another good example
const sayHi = name => "Hi " + name;
But if the function becomes longer, explicit return is often clearer.
Better with explicit return
const checkNumber = (num) => {
if (num > 0) {
return "Positive";
}
return "Not positive";
};
So for beginners:
use implicit return for small one-line functions
use explicit return for longer logic
Basic difference between arrow function and normal function
For beginners, the most important difference is syntax.
Normal function
function add(a, b) {
return a + b;
}
Arrow function
const add = (a, b) => a + b;
Arrow functions are shorter and look more modern.
They are very common in modern JavaScript code.
Simple comparison table
| Normal Function | Arrow Function |
|---|---|
Uses function keyword |
Uses => |
| More boilerplate | Shorter syntax |
| Good for traditional style | Common in modern JS |
Keep this simple for now
There are deeper differences too, especially related to this, but you do not need to go deep into that right now.
At the beginner level, focus on:
syntax
readability
writing small functions cleanly
Using arrow functions with map()
Arrow functions are often used inside array methods like map().
Example
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled);
Output
[2, 4, 6, 8]
This is a very common modern JavaScript pattern.
Compare with normal function
Using normal function
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled);
Using arrow function
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled);
The arrow function version is shorter and easier to read once you get used to it.
More simple examples
Example 1: Double a number
const double = num => num * 2;
console.log(double(6));
Output
12
Example 2: Add two numbers
const add = (a, b) => a + b;
console.log(add(3, 7));
Output
10
Example 3: Greet someone
const greet = name => "Hello, " + name;
console.log(greet("Aman"));
Output
Hello, Aman
Example 4: Check even or odd
const checkEvenOdd = num => {
if (num % 2 === 0) {
return "Even";
}
return "Odd";
};
console.log(checkEvenOdd(8));
console.log(checkEvenOdd(5));
Output
Even
Odd
Practice in browser console
The best way to understand arrow functions is to try them yourself.
Open your browser console and test these:
const square = num => num * num;
console.log(square(5));
const greet = name => "Hello " + name;
console.log(greet("Riya"));
const add = (a, b) => a + b;
console.log(add(2, 8));
Try changing the values and see what happens.
That is the fastest way to get comfortable.
Mini assignment
Now it is your turn.
Step 1: Write a normal function to calculate square of a number
Example idea:
function square(num) {
return num * num;
}
Step 2: Rewrite it using an arrow function
Example idea:
const square = num => num * num;
Step 3: Create an arrow function that returns whether a number is even or odd
Example idea:
const checkEvenOdd = num => {
if (num % 2 === 0) {
return "Even";
}
return "Odd";
};
Step 4: Use an arrow function inside map() on an array
Example idea:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled);
Full practice solution
function squareNormal(num) {
return num * num;
}
const squareArrow = num => num * num;
const checkEvenOdd = num => {
if (num % 2 === 0) {
return "Even";
}
return "Odd";
};
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(squareNormal(4));
console.log(squareArrow(4));
console.log(checkEvenOdd(7));
console.log(doubled);
Quick recap
Let us quickly revise.
Arrow functions are:
a shorter way to write functions
cleaner for small functions
common in modern JavaScript
One parameter
const greet = name => "Hello " + name;
Multiple parameters
const add = (a, b) => a + b;
Explicit return
const square = (num) => {
return num * num;
};
Implicit return
const square = num => num * num;
Final thoughts
Arrow functions are one of the most useful features in modern JavaScript.
At first, the syntax may look unusual, but after practicing a few examples, it starts feeling natural.
A good approach is:
start with normal functions
convert them into arrow functions
practice one-parameter and two-parameter examples
learn implicit return with very small functions
use arrow functions inside
map()
Do not worry about advanced topics yet.
First become comfortable with the syntax and readability.
Once that becomes easy, arrow functions will become a natural part of your JavaScript style.
Quick challenge
Try converting these normal functions into arrow functions on your own:
function greet(name) {
return "Hello " + name;
}
function multiply(a, b) {
return a * b;
}
Then try writing:
an arrow function for division
an arrow function for checking if a number is positive
an arrow function inside
map()to add5to every number in an array
Practice them in your console before checking any solution.
Conclusion
Arrow functions help make JavaScript cleaner, shorter, and more modern.
They are especially useful for small functions, simple logic, and array methods like map().
Keep practicing with very small examples like:
square of a number
greeting a name
adding two values
checking even or odd
That is the best way to build confidence.