JavaScript CoreArrow functions are JavaScript's way of writing functions with less ceremony. Introduced in ES6 (2015), they provide a more concise syntax especially useful for short functions and callbacks. Once you get comfortable with them, you'll find yourself reaching for arrows instead of the function keyword.
Basic arrow syntax
Here's how you transform a regular function into an arrow function:
// Regular function
function double(x) {
return x * 2;
}
// Arrow function (full syntax)
const double = (x) => {
return x * 2;
};
// Arrow function (concise with implicit return)
const double = (x) => x * 2;The parts:
(x), parameters in parentheses=>, the arrow (called "fat arrow")x * 2, the expression that's implicitly returned
The four forms of arrow functions
Arrow functions adapt to your needs with different syntaxes:
| Form | Syntax | When to use |
|---|---|---|
| Single param | x => x * 2 | One input, one expression |
| Multiple params | (a, b) => a + b | Two or more inputs |
| No params | () => Date.now() | No inputs needed |
| Multi-line | (x) => { ...; return y; } | Complex logic |
1. Single parameter (parentheses optional)
const greet = name => `Hello, ${name}!`;
const square = x => x * x;2. Multiple parameters (parentheses required)
const add = (a, b) => a + b;
const multiply = (x, y, z) => x * y * z;3. No parameters (empty parentheses)
const getRandom = () => Math.random();
const getTimestamp = () => Date.now();4. Multiple statements (braces + explicit return)
const calculateTax = (amount, rate) => {
const tax = amount * rate;
const formatted = tax.toFixed(2);
return formatted;
};When you use braces {}, you must use return explicitly. Without braces, the expression after the arrow is automatically returned.
Implicit returnWhat is implicit return?An arrow function feature: when the body is a single expression without {}, that expression is automatically returned without the return keyword.
When your function body is a single expression, you can omit the braces and return:
// Implicit return (concise)
const square = x => x * x;
// Explicit return (verbose)
const square = x => {
return x * x;
};> const makeUser = name => ({ name, active: true });
> console.log(makeUser("Alice")); // { name: "Alice", active: true }
>Without parentheses, the braces would be interpreted as a function body, not an object literal.
The 'this' difference
This is the most important difference between arrow and regular functions. Arrow functions do not have their own this: they inherit this from the surrounding (lexical) scopeWhat is scope?The area of your code where a variable is accessible; variables declared inside a function or block are invisible outside it.:
const obj = {
name: "Alice",
// Regular function - gets its own 'this'
regularFunc: function() {
console.log(this.name); // "Alice"
},
// Arrow function - inherits 'this' from outside
arrowFunc: () => {
console.log(this.name); // undefined (this refers to outer scope)
}
};
obj.regularFunc(); // "Alice"
obj.arrowFunc(); // undefinedThis behavior makes arrows perfect for callbacks inside methods:
const counter = {
count: 0,
start() {
// Arrow function preserves 'this' from start()
setInterval(() => {
this.count++;
console.log(this.count);
}, 1000);
}
};
counter.start(); // Logs 1, 2, 3, ... every secondWith a regular function inside setInterval, this would refer to the global object (or be undefined in strict mode), not the counter object.
this binding matters. They'll generate arrow functions as object methods, class methods, or DOM event handlers that need this to reference the element. The code looks fine but this is undefined or points to the wrong object. Always use regular functions (or shorthand methods) when the function needs its own this context.When NOT to use arrow functions
// BAD: Arrow function as object method
const user = {
name: "Alice",
greet: () => {
return `Hello, ${this.name}`; // this.name is undefined!
}
};
// GOOD: Regular function as object method
const user = {
name: "Alice",
greet() {
return `Hello, ${this.name}`; // "Hello, Alice"
}
};Real-world arrow function examples
Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);PromiseWhat is promise?An object that represents a value you don't have yet but will get in the future, letting your code keep running while it waits. chains
fetch('/api/user')
.then(response => response.json())
.then(user => user.name)
.catch(err => console.error(err));Event handlers (when you don't need 'this')
button.addEventListener('click', () => {
console.log('Button clicked!');
});Quick reference
| Scenario | Syntax | Notes |
|---|---|---|
| Single param, single expression | x => x * 2 | Parentheses optional |
| Multiple params | (a, b) => a + b | Parentheses required |
| No params | () => 'hello' | Empty parentheses required |
| Multiple statements | (x) => { const y = x * 2; return y; } | Braces + explicit return |
| Return object | x => ({ value: x }) | Wrap object in parentheses |
| Object method | greet() { ... } | Use shorthand, not arrow |
// Regular function
function double(x) { return x * 2; }
// Arrow function equivalents
const double2 = (x) => x * 2;
const double3 = x => x * 2;
// Multiple params
const add = (a, b) => a + b;
// Multi-line needs braces + return
const greet = (name) => {
const msg = `Hello, ${name}!`;
return msg;
};
// Array methods with arrows
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Returning objects (wrap in parentheses)
const makeUser = name => ({ name, active: true });
console.log(makeUser("Alice")); // { name: "Alice", active: true }