JS Fundamentals: The this Keyword, Part 1 (Definition & Basic Examples)

Understand JavaScript's this keyword with clear examples: what it is, default binding, implicit binding, and the most common pitfalls.

Last updated: •2 min read

🔍 What is this?

  • this is a keyword in JavaScript.
  • It is an internal object that is created automatically when a function runs.
  • The value of this changes depending on how the function is called.
  • In most cases, this refers to "the object that called the function".

📦 A basic example

var age = 15;

function getAge() {
  return this.age;
}

const people1 = {
  age: 25,
  getAge: getAge
};

const people2 = {
  age: 18,
  getAge: getAge
};

console.log(people1.getAge()); // 25 ✅
console.log(people2.getAge()); // 18 ✅
console.log(getAge());         // 15 (or undefined) ❗

When you call people1.getAge(), this is people1.

When you call getAge() directly, this is window (in a browser) or global (in Node.js on the server).

So the last line returns window.age, which is 15. In "use strict" mode, however, it becomes undefined.

If a function is not called through any object (there is no obj. in front of it), this points to window by default. This is called Default Binding.

What is window in the browser?

window is the browser's global object. It holds:

  • document
  • localStorage
  • console
  • ...and other global APIs

🎯 Worked exercises

var foo = function() {
  this.count++;
};

foo.count = 0;

for( var i = 0; i < 5; i++ ) {
  foo();
}

console.log(foo.count)

this.count++ operates on window.count, not on foo.count, so the result is still 0.

var bar = function() {
  console.log( this.a );
};

var foo = function() {
  var a = 123;
  this.bar();
};

foo();

This prints undefined. Inside foo, this is window, so this.bar() calls window.bar(). Inside bar, this is again window, and window.a is not defined.

var foo = 'foo';
var obj = {
  foo: 'foo in Object'
};

var sayFoo = function() {
  console.log( this.foo );
};

obj.sayFoo = sayFoo;

obj.sayFoo();   // foo in Object
sayFoo();       // foo

🧭 this in nested scopes

var a = 1

var obj = {
  a: 2,
  fn1: function(){
    console.log(this.a); // 2 ✅

    var fn2 = function(){
      var a = 3
      console.log(this.a); // 1 ❗
    };

    fn2();
  }
};

obj.fn1()

fn2 is called directly, so this points to window and it prints 1.

🎯 How to tell what this is, quickly

✅ Check whether the call has a . in front of it:

  • obj.fn() → this = obj (implicit binding)
  • fn() → this = window (default binding)

📚 The 5 ways this gets bound

TypeOfficial name (Binding Type)Binding ruleExample
1️⃣ DefaultDefault BindingCalled directly → this = window / globalsayHi()
2️⃣ ImplicitImplicit BindingCalled on an object → this = that objectobj.sayHi()
3️⃣ ExplicitExplicit Bindingcall / apply / bind set this explicitlysayHi.call(obj)
4️⃣ newNew BindingInside a constructor → this is the newly created objectnew Person()
5️⃣ ArrowLexical BindingAn arrow function is permanently bound to the scope where it was defined() => this.name

✅ Summary

The value of this is not fixed. It is decided by how the function is called.

The two cases people get wrong most often are default binding and implicit binding, and this article has covered both.

To predict this, ask yourself one question: who is calling this function?

🔜 Coming up next

How to use call / apply / bind (explicit binding)

How the new keyword changes this

Why arrow functions don't have their own this

Comments