JavaScript Arrow Functions Explained for Beginners

What is an arrow function in JavaScript? An arrow function is a shorter way to write a function. Instead of the word function, you use a small arrow made of an equals sign and a greater-than sign (=>). This guide explains arrow functions for beginners, step by step, with small examples you can copy and run.

You do not need any experience. We define every new word the first time we use it. If you are new to functions, read our guide to JavaScript functions first, then come back here.

What is a function? A quick reminder

A function is a block of code with a name that you can run whenever you want. You give it some input, it does some work, and it can give back a result. Here is a normal function that adds two numbers.

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

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

Line 1 creates a function called add. The words a and b are parameters, which are names for the input values. Line 2 uses return to send back the answer. Line 5 calls the function (runs it) with 2 and 3 and prints 5.

Your first arrow function

Here is the same function written as an arrow function. We store it in a variable, which is a named box that holds a value.

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

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

const add creates a variable named add. The part (a, b) lists the parameters. The arrow => says 'here comes the body'. The curly braces hold the code to run. The result is the same as before: 5.

Make it shorter: the implicit return

If your function only has one line that returns a value, you can drop the curly braces and the word return. JavaScript returns the value for you. This is called an implicit return (a return you do not have to write).

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

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

Everything after the arrow is the value that comes back. This one line does exactly what the four-line version did. It is the main reason people love arrow functions.

Arrow functions with one parameter

When there is only one parameter, you can leave out the round brackets.

const double = n => n * 2;

console.log(double(4)); // 8

Here n is the only parameter, so no brackets are needed. The function multiplies n by 2 and returns it. If you have zero parameters, you must write empty brackets: () => 'Hello'.

Normal function vs arrow function

Where arrow functions shine: array methods

Arrow functions are most useful when you pass a small function into another function. Array methods like map and filter do this all the time. An array is a list of values.

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

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

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

map runs the arrow function on every item and builds a new list from the results. filter keeps only the items where the arrow function returns true. The symbol % gives the remainder after division, so n % 2 === 0 means 'n is even'. Without arrow functions, this would take many more lines.

Arrow functions in event listeners

You will also see arrow functions when you react to clicks on a web page. An event listener is code that waits for something to happen, like a button click.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

The first line finds the button on the page. addEventListener takes two things: the event name ('click') and a function to run. The arrow function has no parameters, so we write (). It runs each time the button is clicked.

Returning an object: a common mistake

An object is a group of named values, written with curly braces. If you try to return an object with an implicit return, JavaScript thinks the curly braces are the function body. Wrap the object in round brackets to fix it.

// Wrong: returns undefined
const bad = () => { name: 'Sam' };

// Right: wrap the object in ( )
const good = () => ({ name: 'Sam' });

console.log(good()); // { name: 'Sam' }

In bad, the braces are read as a code block, so nothing is returned. In good, the round brackets tell JavaScript 'this is a value, not a block'.

When should you NOT use an arrow function?

Arrow functions handle the word this differently from normal functions. The word this refers to the object that owns the code. Arrow functions do not get their own this. For beginners, a simple rule works well:

• Use arrow functions for short helpers and for callbacks (functions you pass into other functions).
• Use a normal function when you write a method inside an object and need this to point to that object.
• If you are unsure, a normal function is always safe.

Quick practice

1. Rewrite function square(x) { return x * x; } as an arrow function.
2. Use map with an arrow function to turn [1, 2, 3] into [10, 20, 30].
3. Use filter to keep only numbers bigger than 10 from [5, 12, 8, 20].

Answers: 1) const square = x => x * x; 2) [1, 2, 3].map(n => n * 10); 3) [5, 12, 8, 20].filter(n => n > 10).