Arrow Functions in JavaScript: A Simpler Way to Write Functions

If you've been learning JavaScript for a while, you already know that functions are everywhere.

We use them to: calculate values, handle button clicks, process arrays and organize logic

A typical function in JavaScript looks like this:

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

It works perfectly.

But as JavaScript evolved, developers realized something:

Writing functions repeatedly required a lot of boilerplate code.

To solve this, modern JavaScript introduced Arrow Functions.

Arrow functions allow us to write the same logic with less code and better readability.

Let's understand them step by step.

What Are Arrow Functions?

Arrow functions are a shorter syntax for writing functions in JavaScript.

They were introduced in ES6 (ECMAScript 2015).

Instead of writing the traditional function keyword, we use an arrow (=>).

Normal Function

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

Arrow Function

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

Same result.

Less typing.

More modern style.

Basic Arrow Function Syntax

The general structure of an arrow function looks like this:

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

Example:

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

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

Output:

Hello Santosh

Notice two things:

1: No function keyword
2: Arrow => connects parameters to function body

Arrow Function with One Parameter

If the function has only one parameter, you can remove the parentheses.

Normal Version

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

Arrow Version

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

JavaScript allows this shorthand because there is no confusion with only one parameter.

But many developers still keep parentheses for readability.

Arrow Function with Multiple Parameters

When a function has two or more parameters, parentheses are required.

Example:

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

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

Output:

12

Without parentheses, JavaScript wouldn't know where parameters start and end.

Implicit Return vs Explicit Return

This is where arrow functions become really powerful.

Normally, functions use the return keyword.

Explicit Return

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

But if the function has only one line, JavaScript allows implicit return.

Implicit Return

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

No return keyword required.

No curly braces.

Yet it still returns the value.

Example:

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

Output:

8

This style is extremely common in modern JavaScript codebases.

Another Simple Example

Normal Function

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

Arrow Function

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

Clean, Short and Readable.

Using Arrow Functions with Arrays

Arrow functions are especially useful when working with array methods.

Let's say we want to double every number in an array.

Without Arrow Function

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

With Arrow Function

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Arrow functions make this code much easier to read.

This is why modern JavaScript heavily uses them.

Basic Difference Between Arrow Function and Normal Function

For beginners, the most important differences are:

Normal Function	Arrow Function
Uses function keyword	Uses => arrow
More verbose	Shorter syntax
Common in older JS	Common in modern JS
Requires return	Can use implicit return

Example comparison:

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

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

Same logic with Cleaner syntax.

When Should You Use Arrow Functions?

Arrow functions are great for:

✔ Short utility functions
✔ Array methods (map, filter, reduce)
✔ Simple calculations
✔ Cleaner modern code

But for beginners, the most important rule is:

Use arrow functions when you want concise and readable code.

Assignment Time

Try these exercises yourself. Do it yourself and see the magic of learning.

1: Normal Function → Arrow Function

Write a normal function that calculates square:

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

Convert it into an arrow function.

2: Even or Odd Checker

Create an arrow function that checks if a number is even.

Expected output:

true  → even
false → odd

Hint:

const isEven = ?

3: Use Arrow Function with map()

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

Create a new array where every number becomes its square using map() and arrow functions.

Final Thoughts

Arrow functions are one of the most widely used features in modern JavaScript.

They help us:

• write less code

• improve readability

• work better with array methods

• follow modern JavaScript practices

When you start using them regularly, you'll notice that your JavaScript code becomes cleaner and easier to understand.

And that is exactly what good programming is about.

JavaScript becomes easier when you try things yourself.

Thank you for reading this article.

If you found this helpful, feel free to connect with me on LinkedIn and follow my journey as I continue sharing JavaScript and frontend concepts (more blogs).