DEV Community

loading...
Cover image for JavaScript "this" Object

JavaScript "this" Object

bello profile image Bello Updated on ・3 min read


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

Happy coding!


Buy me a Coffee


TechStack | 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.

Discussion (0)

pic
Editor guide