Search for a command to run...
Say goodbye to boilerplate code! Learn how to write cleaner, more readable JavaScript using the modern arrow function syntax.
No comments yet. Be the first to comment.
These are the assignments or knowledge dumps I decide to write for the "Chai aur Code's web Dev Cohort 2026"
Learn how to process complex nested arrays, master modern built-in methods, and ace the classic array-flattening interview question.
RAG helps LLMs answer questions using your own data, but it doesn't guarantee correct answers. Here's how the pipeline works and where it commonly breaks down.
Imagine asking an AI, "Write a blog," versus "Act as an SEO expert and write a 1,000-word blog on AI safety formatted in markdown." The difference in the resulting output is night and day. A prompt is
Spotify and Apple Music make it incredibly easy to showcase your live listening habits on your website. YouTube Music? Not so much. After doing some setup you can do an API call and fetch your account
Arthur C. Clarke's famous third law: "Any sufficiently advanced technology is indistinguishable from magic" perfectly captures how the pace of human innovation works. From carrying supercomputers in o
Why HTTP is amnesiac, the difference between transport and state, and how to choose the right auth strategy for your Node.js app.
If you have been writing JavaScript for a little while, you are probably very familiar with the traditional function keyword. It is the workhorse of the language, allowing you to bundle logic into reusable blocks.
But as you start writing more complex applications, you will notice that typing out function() { return ... } over and over again can feel a bit repetitive. It adds unnecessary "boilerplate" (filler code) to your files.
In 2015, JavaScript introduced a massive update known as ES6, and with it came one of the most popular features in modern web development: The Arrow Function.
Arrow functions provide a shorter, cleaner, and more elegant way to write functions. If you want to write modern JavaScript that is easy to read, mastering arrow functions is a must.
Here is everything you need to know to start using them today.
An arrow function is simply a more compact alternative to a traditional function expression. It allows you to drop the function keyword entirely and instead use a "fat arrow" (=>) to separate the function's inputs (parameters) from its internal logic.
Let’s look at a visual breakdown of how a traditional function transforms into an arrow function.
[ NORMAL FUNCTION ]
const greet = function(name) {
return "Hello " + name;
};
↓↓↓ (Remove 'function', add '=>') ↓↓↓
[ ARROW FUNCTION ]
const greet = (name) => {
return "Hello " + name;
};
By making this small change, your code instantly looks more streamlined. But the syntax improvements don't stop there.
Arrow functions adapt beautifully depending on how many inputs (parameters) you need to pass to them.
If your function requires two or more parameters, you must wrap them in parentheses (), just like a normal function.
// Adding two numbers together
const add = (a, b) => {
return a + b;
};
console.log(add(5, 10)); // Output: 15
If your function only requires exactly one parameter, JavaScript allows you to drop the parentheses completely. This makes your code even cleaner!
// Squaring a number
const square = num => {
return num * num;
};
console.log(square(4)); // Output: 16
If your function requires no inputs at all, you must use an empty set of parentheses () to indicate that it is still a function.
const sayHi = () => {
console.log("Hi there!");
};
sayHi(); // Output: Hi there!
The absolute best feature of arrow functions is how they handle returning data. Depending on how you format your function, you can skip writing the return keyword entirely.
If you wrap your function's logic in curly braces {}, you are creating a "block body." When you use curly braces, you must explicitly tell JavaScript to return the value using the return keyword.
// Explicit Return
const isEven = num => {
return num % 2 === 0;
};
If your function only consists of a single line of logic, you can delete the curly braces entirely. When you remove the curly braces, JavaScript automatically assumes you want to return the result of that single line. You do not need to write return!
// Implicit Return - clean, beautiful, one line!
const isEven = num => num % 2 === 0;
console.log(isEven(4)); // Output: true
console.log(isEven(7)); // Output: false
(args) => { return expression; }
[ CONCISE BODY ] -> Implicit 'return' (Automatic)
(args) => expression;
You might be wondering, "Is saving a few keystrokes really that big of a deal?"
It becomes a huge deal when you start working with array methods like .map(), .filter(), or .forEach(). These methods often require you to pass a small, throwaway function inside of them.
Let's look at how we would double an array of numbers using a normal function, and then using an arrow function.
The Old Way (Normal Function):
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
return num * 2;
});
The Modern Way (Arrow Function with Implicit Return):
const numbers = [1, 2, 3, 4];
// One line, super readable!
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]
This is where arrow functions truly elevate your code. It reads almost like plain English: "Map through these numbers, and for each num, return num times 2."
While arrow functions look great, they are not a 100% replacement for traditional functions.
The most important difference right now is simply their structure: Arrow functions are always anonymous. You cannot declare them like a standard function; they must always be assigned to a variable (using const or let), or passed directly into another function (like we did with .map()).
Note: There is also a deeper, more advanced difference regarding how arrow functions treat the this keyword, which makes them perfect for certain situations in Object-Oriented Programming and React, but we will explore that in a future lesson!
Arrow functions are a staple of modern JavaScript. By adopting them, your code becomes leaner and much more readable.
Use => instead of the function keyword.
Drop the parentheses () if you only have exactly one parameter.
Drop the curly braces {} and the return keyword for beautiful, one-line implicit returns.
Use them inside methods like .map() to keep your data transformations clean.
Start converting your old function() blocks into arrow functions today. Once you get used to the syntax, you will never want to go back!