Getters and setters in objects feel like real properties but it's not real properties but a computed property.
First, Let me tell what a getter in the object is.
Consider this object John
,
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
};
So this is a good old object with properties firstName
, lastname
, baseSalary
, and allowance
.
What if we need another property called grossSalary
which is the total of baseSalary
and allowance
in the object John
, but without defining an actual property on the John
object.
So that we can get the value of grossSalary
by calling John.grossSalary
.
Here, we can use the concept of a getter in an object.
To make a getter in the object you need to use the get
keyword followed by the property name that we can call in the object.
let's make a getter called grossSalary
.
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
// getter grossSalary
// this returns baseSalary + allowance
get grossSalary() {
return this.baseSalary + this.allowance;
},
};
Now if you try to call John.grossSalary
it returns the value by adding the baseSalary
property and allowance
property.
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
// getter grossSalary
// this returns baseSalary + allowance
get grossSalary() {
return this.baseSalary + this.allowance;
},
};
// get grossSalary
// just like calling a regular property
console.log(John.grossSalary);
This is why it is also called as computed properties. Because the grossSalary
is not a property but a computed property of baseSalary
property and allowance
property.
Yeah! 🚀 We made a Getter.
Now, let's understand what a setter in an object is.
Just from the word itself, it means it's used to set a property value.
To make a setter in an object you need to use the set
keyword followed by the property name that we can call in the object.
Let's define a setter called fullName
.
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
// getter grossSalary
// this returns baseSalary + allowance
get grossSalary() {
return this.baseSalary + this.allowance;
},
// setter fullName
// this sets the value for both the firstName and lastName property
set fullName(fullName) {
// we are splitting the fullname by space
// split method returns an array
const namesArr = fullName.split(" ");
this.firstName = namesArr[0];
this.lastName = namesArr[1];
},
};
We have defined a setter called fullName
which sets the value for firstName
and lastName
properties by splitting up the full name value by a space " "
.
So lets set a value for fullName
property.
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
// getter grossSalary
// this returns baseSalary + allowance
get grossSalary() {
return this.baseSalary + this.allowance;
},
// setter fullName
// this sets the value for both the firstName and lastName property
set fullName(fullName) {
// we are splitting the fullname by space
// split method returns an array
const namesArr = fullName.split(" ");
this.firstName = namesArr[0];
this.lastName = namesArr[1];
},
};
// lets set value for fullName
// which actually sets value for firstName and lastName property
John.fullName = "Lily Rose";
// see the contents of John object
console.log(John);
Now if you look into the contents of John
object you can see that the firstName
and lastName
properties values are changed.
A bit of quick advice to you is that if you are making a setter it's better to make a getter for it.
Let's make a getter for fullName
property.
// John Object
const John = {
firstName: "John",
lastname: "Doe",
baseSalary: 23000,
allowance: 3000,
// getter grossSalary
// this returns baseSalary + allowance
get grossSalary() {
return this.baseSalary + this.allowance;
},
// setter fullName
// this sets the value for both the firstName and lastName property
set fullName(fullName) {
// we are splitting the fullname by space
// split method returns an array
const namesArr = fullName.split(" ");
this.firstName = namesArr[0];
this.lastName = namesArr[1];
},
// getter fullName
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
};
// lets set value for fullName
// which actually sets value for firstName and lastName property
John.fullName = "Lily Rose";
console.log(John.fullName);