Arrow Functions in JavaScript: A Simpler Way to Write Functions

WebDev Cohort 2026 · By Saurabh Prajapati · JavaScript Series

---

Why I Finally Explored Arrow Functions

Okay, real talk. When I first started learning JavaScript, I kept seeing code like const add = (a, b) => a + b everywhere — in tutorials, GitHub repos, Stack Overflow answers. And I kept wondering: "What is this weird arrow thing?"

I ignored it for a while and kept writing the old-school way. Then one day, I was reading through a modern React codebase and realized... basically every function used this syntax. I knew I had to dive in.

Spoiler: it took me about 20 minutes to "get it" and about 5 minutes to realize I'd been writing unnecessarily verbose code for weeks. Let me save you those weeks.

💡 What You'll Learn By the end of this post, you'll understand arrow function syntax, when to use implicit vs explicit return, how they compare to normal functions, and how to use them in real scenarios like array methods.

---

1. So, What IS an Arrow Function?

An arrow function is just a shorter, more modern way to write a function in JavaScript. That's honestly all it is. It was introduced in ES6 (2015) and has become the go-to style for writing functions in modern JS.

Let me show you the same function written both ways:

The Old Way (Regular Function)

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Saurabh"));  // Hello, Saurabh!

The New Way (Arrow Function)

const greet = (name) => {
  return "Hello, " + name + "!";
};

console.log(greet("Saurabh"));  // Hello, Saurabh!

Same result. Less boilerplate. Notice how we replaced the function keyword with a => symbol. That arrow is what gives the syntax its name.

Part	Regular Function	Arrow Function
Keyword	function greet() {}	const greet = () => {}
Parameters	Inside ( )	Inside ( )
Return	Needs return	Can be implicit
Stored as	Named function	Variable

---

2. The Syntax, Step by Step

Let me break this down visually. The basic pattern of an arrow function looks like this:

const functionName = (parameters) => {
  // function body
  return value;
};

Now let's walk through each variation. Arrow functions have a few shorthand tricks that make them even cleaner.

No Parameters

Use an empty pair of parentheses when there's nothing going in:

const sayHello = () => {
  return "Hello, World!";
};

console.log(sayHello());  // Hello, World!

One Parameter

This is where it gets a little neat — with exactly one parameter, you can skip the parentheses entirely:

// With parentheses (always valid)
const double = (n) => {
  return n * 2;
};

// Without parentheses (valid with ONE parameter)
const double = n => {
  return n * 2;
};

console.log(double(5));  // 10

When I first saw this, I thought it was a typo. Nope — it's completely valid JS!

Multiple Parameters

Back to parentheses when you have two or more:

const add = (a, b) => {
  return a + b;
};

console.log(add(3, 7));  // 10

---

3. The Magic: Implicit Return

Okay, this is the part that blew my mind. Arrow functions let you skip the return keyword and even the curly braces, as long as your function body is a single expression.

Explicit Return (the long form)

const square = (n) => {
  return n * n;
};

Implicit Return (the short form)

const square = (n) => n * n;

console.log(square(4));  // 16

That one-liner does the exact same thing! No curly braces, no return keyword — just the expression itself.

⚠️ Important Rule You can only use implicit return when the function body is a single expression. If you need multiple lines or statements, use curly braces and an explicit return.

A few more examples to make this really click:

// Multiply two numbers
const multiply = (a, b) => a * b;

// Check if a number is even
const isEven = n => n % 2 === 0;

// Greeting message
const greet = name => `Hello, ${name}!`;

console.log(multiply(4, 5));    // 20
console.log(isEven(6));         // true
console.log(greet("Saurabh")); // Hello, Saurabh!

---

4. Arrow Function vs Regular Function: The Key Difference

Here's where I want to keep things simple, because there's actually a deep topic here (called "this" binding) that can get complicated fast. I'll save that for a dedicated post. But for now, here's the practical difference that matters most day-to-day:

Regular Function	Arrow Function
Uses function keyword	No function keyword, uses =>
Can be hoisted	Cannot be hoisted
Has its own this	Inherits this from parent scope
Good for methods in objects	Great for callbacks & array methods
Works in older JS environments	ES6+ only

Don't worry about the this row for now. It'll make a lot more sense once you've done more object-oriented work in JS. For now, just know arrow functions are perfect for callbacks and short utility functions.

---

5. Arrow Functions in Action: map(), filter(), reduce()

This is where arrow functions really shine in everyday JavaScript. If you've ever worked with arrays, you'll love how clean this feels.

Using map() to transform an array

const numbers = [1, 2, 3, 4, 5];

// Old way
const doubled = numbers.map(function(n) {
  return n * 2;
});

// Arrow function way
const doubled = numbers.map(n => n * 2);

console.log(doubled);  // [2, 4, 6, 8, 10]

Using filter() to find specific items

const scores = [45, 72, 88, 55, 91, 63];

// Get only passing scores (>= 60)
const passing = scores.filter(score => score >= 60);

console.log(passing);  // [72, 88, 91, 63]

Chaining them together

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Get even numbers and double them
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

console.log(result);  // [4, 8, 12, 16, 20]

Honestly, once I saw how clean this looked compared to nested function expressions, I never looked back. It just reads so much more naturally.

---

Key Discoveries and "I Wish I Knew This Earlier" Moments

A few things I wish someone had told me when I was first learning this:

• Implicit return is your friend — but only for single expressions. The moment you need two lines, use curly braces and return explicitly. Don't try to squeeze complex logic into one line just to avoid writing return.

• Arrow functions don't replace all functions. In some places (like object methods or class methods), regular functions still make more sense. You'll learn when, with time.

• Returning an object with implicit return needs wrapping. This one tripped me up badly.

// This DOESN'T work (JS thinks {} is function body)
const getUser = () => { name: "Saurabh", age: 25 };  // ❌

// This DOES work (wrap in parentheses)
const getUser = () => ({ name: "Saurabh", age: 25 });  // ✅

• Arrow functions are everywhere in modern JS. React components, promise chains, event handlers, API calls — you'll see them constantly. Getting comfortable with this syntax is genuinely a skill unlock.

---

Wrapping Up: Should You Use Arrow Functions?

Short answer: yes, most of the time, for modern JavaScript.

They're cleaner, more concise, and they fit naturally with array methods and callback patterns. Once the syntax clicks, you'll find yourself defaulting to them automatically.

The longer answer is: use the right tool for the job. Regular functions still have their place, especially when you need named, hoisted functions or when working with this in object contexts. But for 80% of the everyday functions you write? Arrow functions will serve you beautifully.

🚀 What to Explore Next Now that you've got arrow functions down, explore: this keyword behavior in depth, array methods like reduce() and find(), and how arrow functions work inside React components and hooks.

Found this helpful? Share it with a fellow developer who's just getting into modern JavaScript! And if you have questions or a different approach, drop a comment — I'd genuinely love to hear how you're using arrow functions.

---

About the Author

Saurabh Prajapati (SP)

Full-stack Software Engineer at IBM India Software Lab, specializing in GenAI, React, and Modern Web Technologies. Working on Maximo — building cloud-native, enterprise-level solutions. Saurabh loves learning, building, and sharing knowledge with the developer community.

• 🐙 GitHub: prajapatisaurabh

• 💼 LinkedIn: saurabh-prajapati

• 📧 Email: saurabhprajapati120@gmail.com