JavaScript "this" Object
Tags: javascript, node, codenewbie, tutorial
Published: 2021-02-09 20:40:01

{% youtube rrBo2gfvyOs %}

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

Let's model an online checkout ordering shop.

```js
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.

```js
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:

```js
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
```
---
<a href="https://www.whogohost.com/host/aff.php?aff=7390&page=hosting" target="_blank"><img src="https://www.whogohost.com/images/affiliates/unlimited-hosting-728-x-90.png" /></a>

---
### *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`

```js
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.

```js
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:

```js
completePayment() {
    console.log(
       `${this.name} successfully purchased a 
       $${this.price} ${onlineShop.product}`
    );
 }
```

> `this` doesn't work in an arrow function.

```js
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:

```js
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!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

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

<a href="https://domain.mno8.net/c/2653712/848391/9560" target="_top" id="848391"><img src="//a.impactradius-go.com/display-ad/9560-848391" border="0" alt="" width="300" height="250"/></a><img height="0" width="0" src="https://imp.pxf.io/i/2653712/848391/9560" style="position:absolute;visibility:hidden;" border="0" />