Arrow Functions in JavaScript: A Simpler Way to Write Functions

When people first start learning JavaScript, functions often look a little bulky. You write the function keyword, give the function a name, add parentheses, then curly brackets, and finally a return statement. It works perfectly fine, but sometimes it feels like a lot of ceremony for doing something very small. For simple tasks like adding numbers or greeting someone, the traditional function syntax can feel slightly verbose.

Modern JavaScript introduced arrow functions to reduce this boilerplate and make functions shorter and easier to read. They are widely used in real projects today, especially when working with arrays, callbacks, and functional programming patterns. Once you start seeing them in codebases, you realize how frequently they appear in everyday JavaScript development.

In this article we will understand what arrow functions are, how their syntax works, how implicit return works, and how they differ from normal functions. The goal here is not to dive into complex theory but to build a clear beginner level understanding with simple and practical examples. Let us start by seeing why arrow functions exist in the first place.

How arrow functions reduce boilerplate

Consider a simple function that adds two numbers.

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

console.log(add(4, 6));

Output

10

This is completely valid and you will still see this style everywhere. But for a very small operation like addition, writing the function keyword and the return statement every time can feel slightly repetitive.

Arrow functions allow us to write the same logic in a shorter and cleaner way.

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

console.log(add(4, 6));

Output

10

The arrow symbol replaces the function keyword and makes the intent clearer. Once you get used to reading this syntax, it becomes very natural and easy to follow.

Now let us understand the syntax step by step.

Basic arrow function syntax

The general structure of an arrow function looks like this.

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

Here is a simple example that greets a user.

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

console.log(greet("Gaurang"));

Output

Hello Gaurang

We store the function inside a variable using const, then write the parameters inside parentheses, followed by the arrow symbol and the function body. The logic inside the curly brackets works just like a normal function.

This syntax becomes even simpler when the function has only one parameter.

Arrow functions with one parameter

If a function has only one parameter, JavaScript allows us to remove the parentheses around it. This makes the function even more compact.

Example

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

console.log(square(5));

Output

25

The function receives a number and returns its square. Removing the parentheses makes the code slightly shorter while still keeping it easy to read. Many developers prefer this style for very small helper functions.

Arrow functions with multiple parameters

If the function has more than one parameter, parentheses are required.

Example

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

console.log(multiply(3, 4));

Output

12

Here we are multiplying two numbers. The structure remains almost identical to a normal function, except the function keyword is replaced by the arrow syntax.

Now let us look at one of the most useful features of arrow functions.

Implicit return vs explicit return

In normal functions, we always write the return keyword to send a value back.

Example

function subtract(a, b) {
  return a - b;
}

console.log(subtract(9, 4));

Output

5

Arrow functions introduce something called implicit return. If the function body contains only a single expression, JavaScript can automatically return that value without writing the return keyword.

Example

const subtract = (a, b) => a - b;

console.log(subtract(9, 4));

Output

5

Notice that we removed the curly braces and the return keyword. The expression automatically becomes the returned value.

This is called implicit return.

If we keep curly braces, then we must write return. That is known as explicit return.

Example with explicit return

const divide = (a, b) => {
  return a / b;
};

console.log(divide(20, 4));

Output

5

Example with implicit return

const divide = (a, b) => a / b;

console.log(divide(20, 4));

Output

5

Both approaches work perfectly fine. Developers usually choose based on readability and how complex the function body is.

Difference between arrow function and normal function

For a beginner, the most visible difference is the syntax.

Normal function

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

console.log(sayHello("Riya"));

Output

Hello Riya

Arrow function

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

console.log(sayHello("Riya"));

Output

Hello Riya

The arrow function version is shorter and is often preferred in modern JavaScript codebases. Both approaches behave the same for simple tasks like greetings or small math operations.

There are deeper differences involving how the keyword this behaves inside functions, but that topic is better explored later once you are comfortable with basic functions.

For now, the key takeaway is that arrow functions provide a cleaner and more modern way to write functions.

Arrow functions with arrays

Arrow functions are extremely useful when working with arrays. They make callback functions shorter and easier to read.

Let us look at a simple example using map.

const numbers = [2, 4, 6, 8];

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

console.log(doubled);

Output

[4, 8, 12, 16]

The arrow function takes each number from the array and multiplies it by two. Because the function body is small, implicit return keeps the code clean and easy to understand.

This is one of the situations where arrow functions really shine.

Assignment idea

If you want to practice what you learned, try the following small exercises.

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

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

console.log(findSquare(7));

Output

49

Now rewrite the same function using an arrow function.

const findSquare = num => num * num;

console.log(findSquare(7));

Output

49

Next, create an arrow function that checks whether a number is even or odd.

const checkEvenOdd = num => {
  if (num % 2 === 0) {
    return "Even";
  }
  return "Odd";
};

console.log(checkEvenOdd(10));
console.log(checkEvenOdd(7));

Output

Even
Odd

Finally, use an arrow function inside map.

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

const squares = values.map(n => n * n);

console.log(squares);

Output

[1, 4, 9, 16]

These small exercises help build confidence with arrow functions and show how naturally they fit into modern JavaScript code.

Final thoughts

Arrow functions are one of the most commonly used features in modern JavaScript. They help reduce unnecessary syntax and make functions easier to read, especially when writing short pieces of logic.

For beginners, the most important things to remember are the basic syntax, when parentheses are optional, and how implicit return works. Once you become comfortable with these ideas, you will start noticing arrow functions everywhere in real world JavaScript projects.

Learning them early helps you write code that looks clean, modern, and easier for other developers to understand.