JavaScript Objects - The this Keyword

By Hemanta Sundaray on 2022-05-03

Learn about JavaScript object methods in my blog post here.

Objects are collections of related data and functionality. We store that functionality in methods on our objects

Our apple object below has a method named leadership().

const apple = {
  industry: "Consumer Electronics",
  ceo: "Tim Cook",
  leadership() {
    console.log(`${ceo} is the CEO of Apple.`)
  },
}

console.log(apple.leadership())
// ReferenceError: ceo is not defined

Notice that calling the leadership() method on the Apple objects returns a ReferenceError.

Why?

That’s because inside the scope of the leadership() method, we don’t automatically have access to the ceo property of the Apple object.

Here’s where the this keyword comes to the rescue. If we change the leadership() method to use this, the leadership() method works.

const apple = {
  industry: "Consumer Electronics",
  ceo: "Tim Cook",
  leadership() {
    console.log(`${this.ceo} is the CEO of Apple.`)
  },
}

console.log(apple.leadership())
// Tim Cook is the CEO of Apple.

The this keyword references the calling object which provides access to the calling object’s properties. In the example above, the calling object is apple and by using this, we are accessing the apple object itself, and then the ceo property of apple by using property dot notation.

Join the Newsletter