Arrow Functions
Concise function syntax and how arrow functions handle `this`
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
is a shorter syntax for writing functions introduced in ES6.
// Traditional function
function add(a, b) { return a + b; }
// Arrow function
const add = (a, b) => a + b;Shorthand rules:
- Single parameter → parentheses optional:
x => x * 2 - Single expression body → curly braces and
returnoptional:x => x * 2 - Multiple statements → need braces and explicit
return
The critical difference: `this` binding
Regular functions define their own this — it depends on how the function is called.
Arrow functions do not define their own this. They inherit this from the surrounding scope (). This makes them ideal for callbacks inside class methods:
class Timer {
constructor() { this.count = 0; }
start() {
setInterval(() => {
this.count++; // 'this' is the Timer instance — works!
}, 1000);
}
}If start used a regular function callback, this would be undefined (or window in sloppy mode).
Examples
Syntax variants
Single param, multiple params, multi-line body
const double = x => x * 2;
const add = (a, b) => a + b;
const greet = name => {
const msg = `Hello, ${name}!`;
return msg;
};
console.log(double(5)); // 10
console.log(add(3, 4)); // 7
console.log(greet('Ana')); // Hello, Ana!Arrow vs regular function in a callback
Arrow functions are ideal for array callbacks
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]How well did you understand this?
Next in JavaScript Core
Array Methods