Arrow Functions in JavaScript: Write Cleaner, Modern Code

As you get comfortable with JavaScript functions, you will quickly come across a shorter, more modern way to write them — arrow functions. They were introduced in ES6 and have become a staple of modern JavaScript. Once you get used to the syntax, you will find yourself reaching for them constantly.

What Is an Arrow Function?

An arrow function is a compact way to write a function. It does the same job as a regular function but with less code and a cleaner look.

Let's start with a normal function and transform it step by step.

Normal function:

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

Arrow function:

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

Same result. Less ceremony. Notice the function keyword is gone, replaced by a => arrow between the parameters and the body.

Syntax Breakdown

const functionName = (parameters) => {
           |                      |
  //    variable               arrow sign
  // stores the function          
  // function body                                     
  return value;
};

The arrow => is read as "goes to" or simply "arrow". Everything to its left is the input, everything to the right is what happens.

Arrow Function with No Parameters

When there are no parameters, use an empty pair of parentheses.

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

console.log(sayHello()); // "Hello, world!"

Arrow Function with One Parameter

When there is exactly one parameter, you can drop the parentheses entirely.

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

// Without parentheses — also valid and more common
const double = n => {
  return n * 2;
};

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

Both versions work. Most developers drop the parentheses for single parameters to keep things short.

Arrow Function with Multiple Parameters

When there are two or more parameters, the parentheses are required.

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

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

console.log(add(3, 7));      // 10
console.log(multiply(4, 5)); // 20

Implicit Return vs Explicit Return

This is where arrow functions really shine. When your function body is a single expression, you can skip the curly braces and the return keyword entirely. JavaScript will return the value automatically.

This is called an implicit return.

Explicit return (with curly braces and return keyword):

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

Implicit return (one liner — no braces, no return):

const square = n => n * n;

Same output. The second version is cleaner, shorter, and reads almost like a mathematical definition.

More examples of implicit return:

const greet    = name => "Hello, " + name + "!";
const isAdult  = age  => age >= 18;
const addThree = n    => n + 3;

console.log(greet("Alice"));  // "Hello, Alice!"
console.log(isAdult(20));     // true
console.log(addThree(7));     // 10

One rule: implicit return only works when the function body is a single expression. The moment you need multiple lines or a variable inside the function, you need curly braces and an explicit return.

// Needs explicit return — multiple steps inside
const describeNumber = n => {
  let type = n % 2 === 0 ? "even" : "odd";
  return n + " is " + type;
};

console.log(describeNumber(7)); // "7 is odd"

Normal Function vs Arrow Function

One important note: arrow functions handle this differently from normal functions. That is a topic worth its own article, so we will leave it for later. For now, focus on syntax and usage.

Arrow Functions in the Real World

Arrow functions are especially popular as callbacks — functions passed into other functions. Here is how they look with map(), one of JavaScript's most used array methods.

With a normal function:

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

let doubled = numbers.map(function(n) {
  return n * 2;
});

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

With an arrow function:

let doubled = numbers.map(n => n * 2);

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

Same result, one line. This is where arrow functions make a real difference to readability.

Normal to Arrow: Step-by-Step Transformation

//Step 1 — Start with a normal function:
function add(a, b) {
  return a + b;
}

//Step 2 — Remove the function keyword, add arrow after parameters:
const add = (a, b) => {
  return a + b;
}

//Step 3 — It's a single expression, so use implicit return:
const add = (a, b) => a + b;

Practice Assignment

Work through these to practice what you have learned:

1. Write a normal function that calculates the square of a number:

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

console.log(square(6)); // 36

2. Rewrite it as an arrow function:

const square = n => n * n;

console.log(square(6)); // 36

3. Create an arrow function that returns whether a number is even or odd:

const checkNumber = n => n % 2 === 0 ? "even" : "odd";

console.log(checkNumber(4)); // "even"
console.log(checkNumber(7)); // "odd"

4. Use an arrow function inside map() on an array:

let scores = [45, 78, 92, 60, 55];

let passed = scores.map(score => score >= 60 ? "Pass" : "Fail");

console.log(passed); // ["Fail", "Pass", "Pass", "Pass", "Fail"]

Quick Recap

• Arrow functions are a shorter, cleaner syntax for writing functions in JavaScript

• Use => instead of the function keyword

• No parameters → () required, one parameter → parentheses optional, multiple → required

• Implicit return lets you skip {} and return for single-expression functions

• Arrow functions are ideal for callbacks and short operations like those in map(), filter(), and forEach()

• Arrow functions are not hoisted — unlike function declarations, they must be defined before use

Arrow functions are one of the most visible features of modern JavaScript. Once they feel natural, your code will look cleaner, run the same, and be much easier to read at a glance.

Happy coding! 🚀

If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: LinkedIn | GitHub | X (Twitter)