LinkedIn Hook

You call obj.greet() and see "Rakibul".

You call company.department.getName() and get "Engineering" — not "TechCorp".

Why? Because this in JavaScript is not decided by where a function is written. It's decided by who sits to the LEFT of the dot when it's called.

This one rule — implicit binding — is the foundation every other this rule builds on. Miss it, and the rest of the binding world (call, apply, bind, new, arrow) will feel like magic instead of logic.

In this lesson you'll learn what this actually is, why it defaults to undefined in strict mode, and the nested-object trap that eats candidates alive in interviews.

Read the full lesson -> [link]

#JavaScript #InterviewPrep #ThisKeyword #ImplicitBinding #Frontend #CodingInterview #WebDevelopment

Implicit Binding thumbnail

What You'll Learn

What this actually is and how it behaves in the global scope and in strict mode
The "left of the dot" rule that determines implicit binding
Why only the immediate parent matters in nested object chains like a.b.c.fn()

What is `this`? — The Foundation

Before we dive into the four binding rules, let's understand what this actually is.

this is a special keyword that exists inside every function. It's a reference to an object — but which object depends entirely on how the function is called, not where it's defined.

`this` in the Global Scope

// In a browser (non-strict mode)
console.log(this); // Window object

// In Node.js (module scope)
console.log(this); // {} (module.exports)

// In strict mode
"use strict";
function showThis() {
  console.log(this); // undefined
}
showThis();

The default rule: When a function is called with no binding at all (plain function call), this defaults to the global object (window in browsers). In strict mode, it defaults to undefined.

This is sometimes called the "Default Binding" — and it's the fallback when none of the other rules apply.

Implicit Binding — The Dot Rule

Think of this like a name tag at a conference. When you walk up to a booth (call a method on an object), your name tag shows that booth's name. The booth you're standing at determines your identity — not the booth that originally printed your tag.

The rule is simple: When a function is called with a dot (.) before it, the object to the LEFT of the dot becomes this.

Basic Implicit Binding

const person = {
  name: "Rakibul",
  greet: function() {
    console.log("Hello, I'm " + this.name);
  }
};

person.greet(); // "Hello, I'm Rakibul"
// 'person' is to the left of the dot, so this = person

Implicit Binding with Multiple Objects

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

const obj1 = { name: "Rakibul", sayName };
const obj2 = { name: "Karim", sayName };

obj1.sayName(); // "Rakibul" — this = obj1
obj2.sayName(); // "Karim"   — this = obj2

Nested Objects — Only the Immediate Parent Matters

This is a common interview trap. When you have nested objects, only the immediate (closest) object matters — not the outermost one.

const company = {
  name: "TechCorp",
  department: {
    name: "Engineering",
    getName: function() {
      return this.name;
    }
  }
};

console.log(company.department.getName()); // "Engineering" (NOT "TechCorp")
// The immediate object before .getName() is 'department'

Another Nested Example

const outer = {
  value: 10,
  inner: {
    value: 20,
    getValue: function() {
      return this.value;
    }
  }
};

console.log(outer.inner.getValue()); // 20
// this = outer.inner, NOT outer

Implicit Binding visual 1

Common Mistakes

Assuming this is fixed at the moment the function is defined — in reality, implicit binding is decided fresh at each call site, based on the dot.
In nested chains like a.b.c.fn(), thinking this refers to a (the outermost) — it actually refers to c, the immediate parent to the left of the dot.
Forgetting that an object literal does NOT create a scope — so a function defined inside {} does not automatically bind this to that object; only the dot at the call site does.

Interview Questions

Q: What does this refer to in the global scope?

In a browser's non-strict mode, this at the top level refers to the global object (window). In Node.js module scope, this is module.exports (an empty object {}). Inside a plain function in strict mode, this is undefined.

Q: What is this in strict mode when called as a plain function?

undefined. Strict mode disables default binding to the global object, so a plain function call leaves this as undefined.

Q: What is implicit binding? Give the dot notation rule.

Implicit binding occurs when a function is called as a method on an object using dot notation. The object to the left of the dot becomes the this context. For example, obj.fn() sets this to obj inside fn.

Q: In a.b.c.fn(), what is this inside fn?

this is c — the immediate object that owns the method call. Only the last object before the method matters, not any parent in the chain.

Quick Reference — Cheat Sheet

IMPLICIT BINDING — QUICK MAP

The Rule:
  obj.fn()          -> this = obj  (left of the dot)

Multiple owners:
  a.b.c.fn()        -> this = c    (immediate parent only)

No dot at all:
  fn()              -> default binding
                       - non-strict: this = window / global
                       - strict    : this = undefined

Global scope this:
  browser (non-strict) -> window
  Node.js module       -> {} (module.exports)
  strict mode function -> undefined

Trap:
  Defining a fn inside an object literal does NOT bind this.
  Only the CALL SITE with a dot binds it.

Previous: Error Handling in Async Code Next: Explicit Binding -> call, apply, bind

This is Lesson 4.1 of the JavaScript Interview Prep Course — 14 chapters, 87 lessons.

Implicit Binding