Navigate
Search topics, hooks, and fundamentals
Arrow functions freeze the shape forever — they capture this from where they're defined, not where they're called. No surprises.
The defining feature of arrow functions: they don't create their own this. They inherit it from the enclosing scope — and it can never be changed:
const team = {
name: "Avengers",
members: ["Tony", "Steve", "Natasha"],
listMembers() {
// 'this' is team (method call)
this.members.forEach((member) => {
// Arrow inherits 'this' from listMembers
console.log(member + " is in " + this.name);
});
},
};
team.listMembers();
// "Tony is in Avengers"
// "Steve is in Avengers"
// "Natasha is in Avengers"Compare with a regular function, which creates its own this and loses the object context:
const team = {
name: "Avengers",
members: ["Tony", "Steve", "Natasha"],
listMembers() {
this.members.forEach(function (member) {
// Regular function creates its own 'this' → window/undefined
console.log(member + " is in " + this.name); // undefined!
});
},
};See how the same scenario produces different results depending on the function type:
thisArrow functions have several shorthand forms that make callbacks cleaner:
// Full body
const add = (a, b) => {
return a + b;
};
// Implicit return (single expression)
const add = (a, b) => a + b;
// Single parameter — parens optional
const double = x => x * 2;
// No parameters — parens required
const greet = () => "hello";
// Returning an object literal — wrap in parens
const makeUser = (name) => ({ name, role: "user" });Beyond lexical this, arrow functions have other differences from regular functions. Explore each:
call, apply, and bind cannot change an arrow's thisarguments object — use rest parameters insteadthis