DEV Community

Cover image for JavaScript "this" Object
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript "this" Object


In JavaScript, objects can be used to model real-world things.

Let's model an online checkout ordering shop.

const onlineShop = {
    name: 'Bello',
    cardNumber: 234539084,
    expiration: 2_45,
    product: 'Shirt',
    price: 10
}; 
Enter fullscreen mode Exit fullscreen mode

On the other hand, actions are represented in JavaScript by functions in properties.

const onlineShop = {
  name: 'Bello',
  cardNumber: 234539084,
  expiration: 2_45,
  product: 'Shirt',
  price: 10,

  // function as a property value
  completePayment: function() {
    console.log(`${onlineShop.name} successfully purchased a 
        $${onlineShop.price} ${onlineShop.product}`
    );
  }
}; 

onlineShop.completePayment(); 
// Bello successfully purchased a $10 Shirt
Enter fullscreen mode Exit fullscreen mode

Using objects to represent entities is called object-oriented programming(OOP)

The function used as a property above is a function expression

Syntax

key: function_expression;
Enter fullscreen mode Exit fullscreen mode

What if we wanted to use arrow function, not function expression.

Syntax

key: arrow_function;
Enter fullscreen mode Exit fullscreen mode

See the example below:

const onlineShop = {
  name: 'Bello',
  cardNumber: 234539084,
  expiration: 2_45,
  product: 'Shirt',
  price: 10,

  // function as a property
  completePayment: () => {
    console.log(`${onlineShop.name} successfully purchased a 
        $${onlineShop.price} ${onlineShop.product}`
    );
  }
}; 

onlineShop.completePayment(); 
// Bello successfully purchased a $10 Shirt
Enter fullscreen mode Exit fullscreen mode


this in Methods

this is used to represent the current object in a function (function expression).

Syntax:

object.method()
Enter fullscreen mode Exit fullscreen mode

In the syntax above, this is the object, and the function in the object becomes the method when accessing a property in it.

Let object = this

this.method() // a method used on "this" object.
Enter fullscreen mode Exit fullscreen mode

A function used on an object becomes a ** method**.

To access a property value in the current object, this can be used to replace the object (eg. onlineShop).

That is, onlineShop.name and onlineShop.price is the same as this.name and this.price only if the property value we are referring to is in the current object.

const onlineShop = {
  name: 'Bello',
  cardNumber: 234539084,
  expiration: 2_45,
  product: 'Shirt',
  price: 10,

  // function as a property
  completePayment: function() {
    console.log(
       `${this.name} successfully purchased a 
       $${this.price} ${onlineShop.product}`
    );
  }
}; 

onlineShop.completePayment(); 
// Bello successfully purchased a $10 Shirt
Enter fullscreen mode Exit fullscreen mode

The easier ES6 syntax of writting a function in an object is shown below:

completePayment() {
    console.log(
       `${this.name} successfully purchased a 
       $${this.price} ${onlineShop.product}`
    );
 }
Enter fullscreen mode Exit fullscreen mode

this doesn't work in an arrow function.

const onlineShop = {
  name: "Bello",
  cardNumber: 234539084,
  expiration: 2_45,
  product: "Shirt",
  price: 10,

  // function as a property
  completePayment: () => {
    console.log(
       `${this.name} successfully purchased a 
       $${this.price} ${onlineShop.product}`
    );
  }
};

onlineShop.completePayment(); 
// TypeError: Cannot read property 'name' of undefined
Enter fullscreen mode Exit fullscreen mode

We can actually use the this keyword in an arrow function when nested in another function to take the property value of an object from its outer context. The returned value of the arrow function (notify) becomes the value of the outer function (completePayment).

See the example below:

const onlineShop = {
  name: 'Bello',
  cardNumber: 234539084,
  expiration: 2_45,
  product: 'Shirt',
  price: 10,

  // function as a property
  completePayment() {
    const notify = () => {
        console.log(`${this.name} successfully purchased a $${this.price} ${onlineShop.product}`);
    };
    notify();
  }
}; 

onlineShop.completePayment();
Enter fullscreen mode Exit fullscreen mode

Happy coding!


Buy me a Coffee


TechStack Media | Domain

  • Purchase a .com domain name as low as $9.99.
  • Purchase a .net domain name as low as $12.99.
  • Get cheaper domain names as low a $3.
  • Build a website with ease.

Top comments (0)