Arrow Functions in JavaScript: A Simpler Way to Write Functions

In the previous article, we learned about functions and how they help us make our code reusable and organized.

But did you know that JavaScript provides another way to write functions? And the reason why JavaScript introduced this new way is quite interesting.

When developers started writing larger applications, they often had to create many small functions. Writing these functions using the traditional syntax sometimes felt a little long and repetitive.

For example, consider this simple function:

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

This works perfectly fine. But for small functions like this, the syntax can feel a bit verbose.

So JavaScript introduced a shorter and cleaner way to write functions. These are called arrow functions. Arrow functions provide a simpler syntax for writing functions, making code shorter and often easier to read.

In this article, we will explore:

• What arrow functions are

• How their syntax works

• How they differ from normal functions

• And how they are commonly used in modern JavaScript

Let’s start by understanding what arrow functions actually are.

---

What are Arrow Functions?

Arrow functions are a shorter and more concise way to write functions in JavaScript.

They were introduced in ES6 (ECMAScript 2015) to simplify function syntax. Instead of using the function keyword, arrow functions use a special symbol called the arrow operator:

=>

To understand this better, let’s compare a normal function with an arrow function.

Normal Function

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

Arrow Function

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

Both functions perform the same task. The difference is mainly in the syntax.

---

Basic Arrow Function Syntax

Now that we know what arrow functions are, let’s look at their basic syntax.

The general structure of an arrow function looks like this:

const functionName = (parameters) => {
  // code to execute
};

Let’s understand the different parts of this syntax.

• const functionName → the variable that stores the function

• (parameters) → the inputs that the function receives

• => → the arrow operator that defines the function

• { } → the body of the function where the code runs

To see this in action, let’s create a simple arrow function that adds two numbers.

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

Now we can call this function like any other function.

console.log(add(5, 3));

Output:

8

Noticed something? Even though the syntax looks different from a normal function, the idea remains the same:

• the function receives inputs

• it performs some operation

• and it returns a result

Arrow functions simply provide a shorter and cleaner syntax for writing functions. But do they only reduce the syntax? No, there is something that makes Arrow Functions widely used in modern JavaScript. We'll discuss this later in this article.

---

Arrow Function with One Parameter

Sometimes a function only needs one input value. In such cases, arrow functions allow us to write the syntax even more concisely.

Let’s first look at a normal function.

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

This function takes a number as input and returns its square. Now let’s rewrite the same function using an arrow function.

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

So far, the syntax is already shorter because we removed the function keyword. But arrow functions allow one more simplification.

When a function has only one parameter, the parentheses are optional.

So we can write the same function like this:

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

As you can see, the code becomes slightly cleaner and shorter.

Let's test it.

console.log(square(5));

Output:

25

This small rule helps make arrow functions more concise when working with single parameters. Now you will have a question: What if we have multiple parameters? Let us see that case too.

---

Arrow Function with Multiple Parameters

In the previous section, we saw that when an arrow function has only one parameter, the parentheses around it can be omitted.

But when a function has multiple parameters, the parentheses are required. Unfortunately, the parentheses cannot be removed in this case.

Let's see an example.

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

This function takes two numbers as inputs and returns their sum. Now let’s rewrite the same function using an arrow function.

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

Here, (a, b) represents the two parameters of the function.

Notice that the parentheses cannot be removed in this case. If we try to write it like this:

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

JavaScript will throw a Syntax Error.

So the rule is simple:

• One parameter → parentheses optional

• Multiple parameters → parentheses required

Now let’s look at one of the most useful feature of arrow functions.

---

Implicit Return vs Explicit Return

So far, the arrow functions we have written looked like this:

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

Here we are explicitly using the return keyword to return the result. This is called an explicit return.

However, arrow functions provide an even shorter way to write functions when the body contains only a single expression. And all developers love this feature.

Let’s rewrite the same function using that feature.

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

Notice what changed here:

• The curly braces { } are removed

• The return keyword is removed

Yet the function still returns the result.

This happens because arrow functions automatically return the value of the expression when the function body is written without curly braces. This behavior is called an implicit return.

Note: When there is only one parameter, the parentheses around it can also be removed.

So the rule becomes very simple:

• With { } → you must use return

• Without { } → the value is returned automatically

Let us test it out.

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

console.log(square(7));

Output:

49

This amazing feature makes arrow functions very useful for small functions, where we want the code to stay short and readable.

---

Basic Difference Between Arrow Function and Normal Function

So far, we have seen how arrow functions make our code much shorter and cleaner. But how exactly are they different from normal functions?

Let’s compare them with a simple example.

Normal Function

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

Arrow Function

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

Both functions perform the same task. They take two numbers as input and return their sum. The main difference is in the syntax.

Arrow functions remove the need for the function keyword and often allow us to write the function in a more concise way.

Key Differences

Feature	Normal Function	Arrow Function
Syntax	Uses the function keyword	Uses the => arrow operator
Length	Usually longer	Shorter and more concise
return keyword	Usually required	Can be omitted using implicit return

In modern JavaScript, arrow functions are commonly used for small and simple functions, especially when writing cleaner and more readable code.

However, normal functions are still widely used and remain an important part of JavaScript.

---

Practice Time

Now that we understand how arrow functions work, let’s try a few small exercises to reinforce the concept.

1. Square of a Number

First, let’s write a normal function that calculates the square of a number.

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

Now let’s rewrite the same logic using an arrow function.

const square = n => n * n;

Let’s test it.

console.log(square(5));

Output:

25

Notice how the arrow function version is shorter and cleaner, while still performing the same task.

2. Check Whether a Number is Even or Odd

Let’s create an arrow function that checks whether a number is even.

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

Now test it.

console.log(isEven(4));
console.log(isEven(7));

Output:

true
false

I want you to try these examples by changing their values and check the output. And notice how arrow functions makes our code much short and clean.

---

Wrapping Up

In this article, we explored arrow functions, a modern and concise way to write functions in JavaScript.

We started by understanding what arrow functions are and why they were introduced to make function syntax shorter and cleaner. Then we looked at the basic syntax of arrow functions and saw how they can be written with one parameter or multiple parameters.

We also learned an important feature of arrow functions: implicit return, which allows us to return values without explicitly writing the return keyword when the function body contains a single expression.

Finally, we practiced writing a few simple arrow functions to see how they work in real examples.

---

What's Next?

Now that we know how to write functions using arrow functions, you might be wondering where they are actually used in real programs.

Arrow functions become especially powerful when working with collections of data. For example, imagine having a list of numbers and performing the same operation on every element.

In JavaScript, we usually store such collections inside something called an array.

Arrays allow us to work with multiple values together, and when combined with arrow functions, they make our code very expressive and concise.

But what exactly are arrays, and how do they work in JavaScript?

That’s exactly what we’ll explore in the next article.

---

⬅ Previous Article: Functions in JavaScript

➡ Next Article: Arrays in JavaScript