Arrow Functions in JavaScript: A Simpler Way to Write Functions

When you start writing JavaScript programs, one thing becomes very obvious pretty quickly. You end up writing a lot of functions. Some functions are small helper functions, some perform simple calculations, some transform data inside arrays, some are used inside methods like map() or filter().

And after writing a few programs, you might notice something interesting, many of these functions look very similar.

For example, imagine we write a simple function to add two numbers.

function add(a, b) {
  return a + b;
}

There’s absolutely nothing wrong with this code. This is a perfectly valid and very common way to write a function in JavaScript. But if you look closely, there’s quite a bit of syntax around a very small piece of logic.

We have the function keyword, parentheses, curly braces, and the return statement all just to add two numbers.
Because functions are used so frequently in JavaScript, the language introduced a shorter and cleaner way to write them. That’s where arrow functions come in.

Arrow functions are simply a more concise way to write functions, especially when the function is small & straightforward. They reduce some of the extra syntax and make the code feel lighter and easier to read.

Let’s understand how they work.

---

What Are Arrow Functions?

An arrow function is just another way to define a function in JavaScript. Instead of using the function keyword, arrow function use a special arrow symbol: =>

Now let's take the same add function and write it using an arrow function.

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

If you compare this code with the original function, you will notice that the logic hasn't changed at all, it still takes two parameters, it still returns the sum. The only thing that changed is how the function is written. That arrow => is what gives arrow function their name.

It's a small change in syntax, but once you start using arrow function regularly, they can make your code feel much cleaner.

---

Understanding the Basic Arrow Function Syntax

Before moving further let's slow down & look carefully at the structure of an arrow function

const greet = () => {
  console.log("Hello!");
};

Let's break it down

const greet = () => { ... }

• const greet - this variable will store the function

• () - these are the function parameters

• => - this is the arrow syntax that defines the function

• {} - this is the body of the function where the code runs

In other words, we are storing a function inside a variable which is very similar to a function expression.

Now when we want to run the function we can simply call it:

greet(); // Hello

So arrow functions don’t change what functions do. They simply change how we write them.

---

Converting a Normal Function to an Arrow Function

A good way to understand arrow functions is by converting a normal function step by step.

function multiply(a, b) {
  return a * b;
}

Now let’s convert this function into an arrow function. First, we have to remove the function keyword. Then we store the function in a variable. Finally, we add the arrow syntax.

const multiply = (a, b) => {
  return a * b;
};

That's it...
The function still multiplies two numbers, logic stays exactly the same, But the syntax becomes slightly shorter. This pattern appears everywhere in modern JavaScript code.

---

Arrow Functions with One Parameter

Arrow functions also give us some small shortcuts.

For example, if a function has only one parameter, the parentheses around the parameter are optional. Let’s look at a normal function first.

function square(num) {
  return num * num;
}

Now re-write it as an arrow function.

const square = num => {
  return num * num;
};

Have you noticed what changed. Because the function only has one parameter (num), we removed the parentheses. This is optional, but developers often do it because it makes small functions look even cleaner.

---

Arrow Functions with Multiple Parameters

When a function has more than one parameter the parentheses are required.

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

If we tried removing the parentheses like this:

const add = a, b => { }

JavaScript wouldn’t understand the syntax.

So a simple rule to remember is:

• One parameter => parentheses optional

• Multiple parameters => parentheses required

---

Implicit Return vs Explicit Return

Now this is one of the most interesting features of arrow functions. Look at this code.

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

Here we are using something called an explicit return. We are explicitly writing the return keyword inside the function body. But arrow functions allow us to write an even shorter version when the function only returns a single expression.
This is called an implicit return.

const add = (a, b) => a + b;

Notice what disappeared here no curly braces, no return keyword. JavaScript automatically returns the result of the expression.

So,

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

can be simplified to:

(a, b) => a + b

this shortcut only works when the function body contains a single expression. If our function has multiple lines of logic, it’s better to use curly braces & an explicit return.

---

Arrow Functions vs Normal Functions

At this point you might be wondering something. Are arrow functions just a shorter way to write functions?
For the most part, yes.

Let’s compare them quickly.

Normal function:

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

Arrow function:

const greet = name => "Hello " + name;

Arrow functions generally require less syntax, look cleaner for small functions, & are widely used in modern JavaScript.

Normal functions are still useful, especially when functions become larger or more complex.

when you learn about the this keyword, you’ll see deeper differences between the two. But for now, the main goal is simply to understand the syntax and readability.

---

Why Arrow Functions Became So Popular

One of the biggest reasons arrow functions became popular is how well they work with arrays and modern JavaScript methods.

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

const doubled = numbers.map(num => num * 2);

console.log(doubled);

[2, 4, 6, 8]

It simply takes a number & returns the number multiplied by two. Imagine writing a full normal function every time inside methods like map() or filter(). Arrow functions make these patterns much shorter & easier to read.

That’s why you’ll see them used frequently with methods like:

• map()

• filter()

• reduce()

---

Assignment Practice

Let’s try a few small exercises to practice.

1. Write a normal function to calculate the square of a number

function square(num) {
  return num * num;
}

2. Rewrite the same function using an arrow function

const square = num => num * num;

3. Create an arrow function that checks whether a number is even

const isEven = num => num % 2 === 0;

console.log(isEven(4)); // true

4. Use an arrow function inside map()

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

const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9, 16]

---

Final Understanding

Arrow functions didn’t really change what functions can do. Functions still take inputs, run logic, and return results.
What arrow functions changed is how we write them. They remove some extra syntax, make small functions easier to read, & fit naturally with modern JavaScript patterns.

Once you start using them regularly, you’ll notice something.

Your functions become shorter & cleaner. And small pieces of logic become much easier to express.

In other words, arrow functions don’t just save characters. They help make your JavaScript more readable and expressive.