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
}; 

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

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;

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

Syntax

key: arrow_function;

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

---

---

this in Methods

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

Syntax:

object.method()

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.

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

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}`
    );
 }

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

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();

Happy coding!

---

---

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.