Arrow Functions in JavaScript: A Simpler Way to Write Functions
When we first learn functions in JavaScript, we write them the traditional way. It works perfectly fine. But as we start reading more modern JavaScript code, we keep seeing this shorter, cleaner syntax everywhere. That is the arrow function, and once we understand it, we will wonder how we ever lived without it.
The Normal Function
Before we get into arrow functions, let's look at how we write a regular function so we have something to compare against.
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Gurjeet")); // Hello, Gurjeet
This works perfectly. But arrow functions let us write the same thing with much less code.
Basic Arrow Function Syntax
Here is the same greet function written as an arrow function:
const greet = (name) => {
return "Hello, " + name;
};
console.log(greet("Gurjeet")); // Hello, Gurjeet
The function keyword is gone. Instead, we have the parameters in parentheses, followed by => which is the arrow, and then the function body inside curly braces. That => is why these are called arrow functions.
Let's put both side by side so the difference is easy to see:
// Normal function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => {
return a + b;
};
Same result, just written differently. The arrow function version is shorter and in modern JavaScript codebases, this is the style we will see most often.
Arrow Function with One Parameter
When our arrow function has only one parameter, we can remove the parentheses around it. This makes it even shorter.
// With parentheses — works fine
const double = (num) => {
return num * 2;
};
// Without parentheses — also fine when there's only one parameter
const double = num => {
return num * 2;
};
console.log(double(5)); // 10
Both versions work. It is just a matter of preference, though most developers skip the parentheses when there is only one parameter.
Arrow Function with Multiple Parameters
When there are two or more parameters, the parentheses are required.
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(4, 3)); // 12
No shortcut here. Multiple parameters always need the parentheses.
Implicit Return
This is where arrow functions get really interesting. When our function body has just a single return statement, we can remove the curly braces and the return keyword entirely. JavaScript will return the value automatically. This is called an implicit return.
// With explicit return
const square = (num) => {
return num * num;
};
// With implicit return — same result, much shorter
const square = num => num * num;
console.log(square(4)); // 16
The moment we remove the curly braces, JavaScript assumes we want to return whatever is on that line. No need to type return at all.
Here is another example to make it clear:
const greet = name => "Hello, " + name;
console.log(greet("Gurjeet")); // Hello, Gurjeet
One line. Clean and readable. This is the style we will see constantly in real JavaScript projects.
Normal Function vs Arrow Function
Here is a side by side comparison showing how the same function evolves from a normal function all the way to a clean arrow function with implicit return:
// Step 1: Normal function
function square(num) {
return num * num;
}
// Step 2: Arrow function with explicit return
const square = (num) => {
return num * num;
};
// Step 3: Arrow function with implicit return
const square = num => num * num;
console.log(square(6)); // 36
All three do exactly the same thing. As we get more comfortable with JavaScript, we will naturally move towards the shorter versions.
Arrow Functions Inside map()
One place where arrow functions really shine is inside array methods like map() and filter(). Remember from the last post how we wrote map() with a regular function?
// With normal function
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(num) {
return num * 2;
});
With an arrow function, the same thing becomes:
// With arrow function
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
One line. Same result. This is why arrow functions are so popular in modern JavaScript, they pair beautifully with array methods and make our code much easier to read.
