Last updated on September 8, 2022
In JavaScript, we can create functions with get and set keywords which allow us to get or change the data within an object. For getters and setters, we can use the keyword get and set
Let’s suppose we have a person object that has two properties.
let person = {
first_name: "John",
last_name: "Robbert"
}
In the above example, we have an object of a person’s first name and last name. So if we collect the full name of the person that will be Jhon Robbert
. Below example will be getting the full name of the person object,
console.log(person.first_name +" "+person.last_name);
// Output : John Robbert
In the above example we have accessed both properties with a dot property accessor and then concatenated them. Since both properties are in the console.log()
function, it simply prints John Robbert
in the browser console. But this is not a recommended way or a poor approach. Let’s do it in a modern way.
We need to create a function with get keyword which should provide the full name within the object.
let person = {
first_name: "John",
last_name: "Robbert",
get fullName() {
return `${this.first_name} ${this.last_name}`;
}
};
If we access fullName
function from person object in the console, below code will help us.
console.log(person.fullName);
//output : John Robbert
In the above object, we have a function fullName
with get keyword. In the function, we have concatenated both properties through template literals. This function would return the object’s first_name
and last_name
properties together.
But we cannot set the object property value like the code below, because the get keyword is attached to the function.
person.fullName = "John Smith";
For the setter, we need to attach the set keyword with the function so we will be able to set a value to the object property.
let person = {
first_name: "John",
last_name: "Robbert",
get fullName() {
return `${this.first_name} ${this.last_name}`;
},
set fullName(value) {
const userName = value.split(" ");
this.first_name = userName[0];
this.last_name = userName[1];
}
};
In the above example, we duplicated the function fullName
with a set keyword. It has a parameter for a person’s name. In the first line, we have a split function that converts the provided name John Smith
into the array and then we assign the array to the userName
variable.
Now, the fullName
function simply sets both properties from the array through this keyword which refers to the same object properties. Next, we can use it, so let’s add the code below and run it.
person.fullName = "John Smith";
console.log(person.fullName);
// Output : John Smith
The above code would print John Smith in the console because we set the person object value through the setter function fullName
. If you access the fullName
property without setting any name then JavaScript would execute the getter function which is also fullName
.
In this article, we have learned to use accessors (getter and setter) in JavaScript. If you would like to learn more about Javascript, checkout our JavaScript page.