Function context

JavaScriptJunior~2 min read

What is the function context

Function context is the object referenced by the this keyword inside a function during its execution.

The context is determined at the moment the function is called, not at the moment it is declared.

Example

javascript

function showThis() {
  console.log(this);
}

showThis(); // In a regular call - context = global object

In a browser:

javascript

this === window

In Node.js:

javascript

this === undefined (in strict mode)

Context depends on the way the function is called

How we call the function	What `this` will be
Regular call `func()`	Global object (`window` or `undefined` in strict mode)
Call as a method `obj.method()`	The `obj` object
Via `new`	The newly created object
Via `call` / `apply` / `bind`	The manually specified object
In an arrow function	`this` is taken from the outer context (lexical)

1. Regular call (global context)

javascript

function test() {
  console.log(this);
}

test(); // window (or undefined in strict mode)

2. Object method

javascript

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

user.sayHi(); // "Alice"

Here this refers to the user object, because the function is called as user.sayHi().

3. Losing context

javascript

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

const hi = user.sayHi;
hi(); // undefined (this is lost)

Why:

We passed a reference to the function, not the object itself.
Calling hi() is a regular call, without the user context.

Fix:

javascript

const hi = user.sayHi.bind(user);
hi(); // "Alice"

4. Context with `new`

javascript

function User(name) {
  this.name = name;
}

const u = new User("Alice");
console.log(u.name); // "Alice"

Here this points to the newly created object (u).

5. call / apply / bind

javascript

function greet() {
  console.log(this.name);
}

const user = { name: "Tim" };

greet.call(user);  // "Tim"
greet.apply(user); // "Tim"

const boundGreet = greet.bind(user);
boundGreet();      // "Tim"

Method	What it does
`call(thisArg, arg1, arg2, …)`	calls the function with the given `this` and arguments
`apply(thisArg, [args])`	the same, but arguments are passed as an array
`bind(thisArg)`	returns a new function with a fixed `this`

6. Arrow functions - a special case

javascript

const obj = {
  name: "Alice",
  arrow: () => console.log(this.name),
  regular() {
    console.log(this.name);
  },
};

obj.arrow();   // undefined (this - outer context, not obj)
obj.regular(); // "Alice"

Important:

Arrow functions have no own this.
They "take" this from the outer lexical environment - where they were created.

Key takeaway

Situation	What `this` will be
Regular call	`window` / `undefined`
Object method	The object itself
`new`	The new instance
`call`, `apply`, `bind`	The manually specified object
Arrow function	Inherits `this` from outside

A simple analogy

Function context is "the owner of the call". Whoever calls the function becomes this.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.