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.
Top comments (0)