TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at more features that can be used within our TypeScript code.
Working with Objects
JavaScript objects are collections of properties, each of which has a name and value.
For instance, we can write:
let person = {
firstName: "jane",
lastName: "smith"
};
We have a person object that have firstName and lastName properties.
Then we can access the properties by using the dot notation as follows:
const firstName = person.firstName;
Adding, Changing, and Deleting Object Properties
We can add properties to an object dynamically.
They can also be updated and removed on the fly.
To add a property to an object, we can write:
person.age = 20;
Given that we have the persons object, we can add a property to by using the dot notation and assigning a value to it.
Likewise, we can change it by using the same dot notation as we did above.
Deleting object properties can be done with the delete operator.
For instance, we can use the delete operator as follows:
delete person.age;
Then the age property will be removed from the person object.
Guarding Against Undefined Objects and Properties
We got to check our code against undefined object properties.
To do that, we can use the || operator.
For instance, we can write:
let price = apple.price || 0;
to see if the apple.price is undefined . If it is, then we set 0 to price.
Otherwise, we set apple.price to price .
This also works with null .
Using the Spread and Rest Operators on Objects
The spread operator can also be used with objects.
For instance, we can write:
let person = {
firstName: "jane",
lastName: "smith"
};
Then we can make a shallow clone of an object by using the spread operator.
For instance, we can write:
let clone = { ...person };
All the own properties will be copied over.
We can also add additional properties to the cloned object by writing:
let clone = { ...person, gender: 'female' };
We can also replace an existing property with new ones in the cloned object.
If we have the person object, we can create a clone of it and replace a property of the clone by writing:
let person = {
firstName: "jane",
lastName: "smith"
};
let clone = { ...person, firstName: "may" };
Now we replaced 'jane' with 'may' in the clone object while keeping the person object as-is.
We can also use the spread operator on the left side to assign properties to variables.
The spread operator will have an object that doesn’t have variables assigned to them in an object.
For instance, we can write:
let { firstName, ...props } = person;
This will assign the value of person.firstName to firstName and the remaining properties will be assigned to props .
Therefore, props will have { lastName: “smith” } as its value.
Getters and Setters
Objects can have getters and setters.
To define them, we use the get and set keywords to define getters and setters respectively.
For instance, we can write:
let person = {
firstName: "jane",
lastName: "smith",
get name() {
return `${this.firstName} ${this.lastName}`;
},
};
to define a getter called name . Then we can access the getter’s return value by writing:
const name = person.name;
To define a setter, we can use the set keyword to let us set the value the way we want.
For instance, we can write:
let person = {
firstName: "jane",
lastName: "smith",
_age: 20,
get name() {
return `${this.firstName} ${this.lastName}`;
},
set age(age) {
this._age = age;
}
};
We can then set age by running:
person.age = 26
Which will make person._age have the value 26.
Conclusion
JavaScript objects are just a collections of key-value pairs.
We can use getters and setters to let us get and set the values of an object.
Also, we can clone an object with the spread operator and assign values to variables.
Finally, we can add, update, and delete properties from objects dynamically.
