← Back to Roadmap

this Keyword

Medium

In plain terms

this refers to the execution context. In methods, this is the object. In functions, it depends on how called (default: global/undefined in strict). Arrow functions inherit this from outer scope.

What you need to know

  • •Context-dependent
  • •Methods: this = object
  • •Arrow: lexical this

Try it yourself

Copy the code below and run it in your browser console or a code editor:

const obj = {
  name: 'Alice',
  getName() {
    return this.name;  // this = obj
  }
};
obj.getName();  // "Alice"

function fn() {
  console.log(this);  // window or undefined
}
const arrow = () => console.log(this);  // lexically bound

Why this matters

"What is this?" and "How do you fix this in callbacks?" are extremely common. You may be asked to fix a lost this or explain call/apply/bind.

How it connects

this is set by how a function is called (method, constructor, call/apply/bind). Arrow functions do not have their own this (lexical). Connects to call/apply/bind and to class methods and event handlers.

Interview focus

Be ready to explain these; they come up often in JS interviews.

  • ▸this is determined by call site: method call (obj.fn) vs standalone call (fn()).
  • ▸Arrow functions: no own this; they inherit from enclosing scope. Use in callbacks to keep this.
  • ▸Fix lost this: arrow function, .bind(this), or that = this.

Learn more

Dive deeper with these trusted resources:

MDNjavascript.infoTutorialsPointW3Schools