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}`
);
}
thisdoesn'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
.comdomain name as low as $9.99. - Purchase a
.netdomain name as low as $12.99. - Get cheaper domain names as low a $3.
- Build a website with ease.
Top comments (0)