Arrow Functions in JavaScript: A Simpler Way to Write Functions
When you start learning JavaScript, one of the first things you learn is functions. Functions help us reuse code instead of writing the same logic again and again. But if you've written a few functions already, you may have noticed something: the syntax can feel a little long and repetitive.
To solve this, modern JavaScript introduced Arrow Functions. They allow us to write functions in a shorter, cleaner, and more readable way.
In this blog, we'll explore arrow functions step by step using very simple examples, just like a beginner experimenting in the console.
Why Arrow Functions?
Let's start with a simple function.
Suppose we want a function that adds two numbers.
Normal Function
function add(a, b) {
return a + b;
}
It works perfectly. But notice how much syntax we write:
functionparentheses
curly brackets
return
Arrow functions allow us to reduce this boilerplate.
Arrow Function Version
const add = (a, b) => {
return a + b;
};
Already shorter. And later you'll see it can become even shorter.
Basic Arrow Function Syntax
The basic structure looks like this:
const functionName = (parameters) => {
// code
};
Example:
const greet = (name) => {
console.log("Hello " + name);
};
Now if we run:
greet("Abdulla");
Output:
Hello Abdulla
Simple and clean.
Arrow Function with One Parameter
If a function has only one parameter, we can remove the parentheses.
Normal Function
function square(num) {
return num * num;
}
Arrow Function
const square = num => {
return num * num;
};
Notice something interesting:
We removed the parentheses around num.
This is optional, but many developers prefer it because it looks cleaner.
Arrow Function with Multiple Parameters
If there are two or more parameters, we must keep the parentheses.
Example:
const multiply = (a, b) => {
return a * b;
};
Testing it:
multiply(3, 4);
Output:
12
So the rule is simple:
One parameter → parentheses optional
Multiple parameters → parentheses required
Implicit Return vs Explicit Return
This is where arrow functions become really powerful.
Sometimes our function only returns a single value. In that case, we can remove the curly brackets and the return keyword.
This is called implicit return.
Explicit Return (Normal Way)
const double = (num) => {
return num * 2;
};
Implicit Return (Shorter Way)
const double = num => num * 2;
That's it.
No {}
No return
JavaScript automatically returns the result.
Testing it:
double(5);
Output:
10
When I first saw this as a beginner, it felt strange. But after some practice, it actually becomes very natural and readable.
Simple Difference: Arrow Function vs Normal Function
For beginners, the main difference you should focus on is syntax and simplicity.
| Normal Function | Arrow Function |
|---|---|
Uses function keyword |
Uses => |
| More typing required | Shorter and cleaner |
| Traditional JavaScript style | Modern JavaScript style |
Example comparison:
Normal Function
function greet(name) {
return "Hello " + name;
}
Arrow Function
const greet = name => "Hello " + name;
Both work the same.
The arrow function just looks simpler.
For now, don't worry about advanced topics like this. As a beginner, just focus on writing cleaner functions.
Using Arrow Functions with map()
Arrow functions are commonly used with array methods like map().
Suppose we have an array of numbers.
let numbers = [1, 2, 3, 4];
We want to double every number.
Using a normal function
let doubled = numbers.map(function(num) {
return num * 2;
});
Output:
[2, 4, 6, 8]
Using arrow function
let doubled = numbers.map(num => num * 2);
Much cleaner and easier to read.
This is why arrow functions are heavily used in modern JavaScript.
Final Thoughts
If you're just starting with JavaScript, arrow functions might feel a little unusual at first. But once you practice them a few times, you'll realize they make your code shorter, cleaner, and easier to read.
Most modern JavaScript code uses arrow functions, especially when working with array methods like map(), filter(), and reduce().