Menu Log in
Dark mode
Dark code
HTML CSS
JavaScript Object Accessors
❮ Previous Next ❯
JavaScript Accessors (Getters and
Setters)
ECMAScript 5 (ES5 2009) introduced Getter and Setters.
Getters and setters allow you to define Object Accessors (Computed Properties).
JavaScript Getter (The get Keyword)
This example uses a lang property to get the value of the language property.
Example
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return [Link];
}
};
// Display data from the object using a getter:
[Link]("demo").innerHTML = [Link];
Try it Yourself »
JavaScript Setter (The set Keyword)
This example uses a lang property to set the value of the language property.
Example
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
[Link] = lang;
}
};
// Set an object property using a setter:
[Link] = "en";
// Display data from the object:
[Link]("demo").innerHTML = [Link];
Try it Yourself »
JavaScript Function or Getter?
What is the differences between these two examples?
Example 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return [Link] + " " + [Link];
}
};
// Display data from the object using a method:
[Link]("demo").innerHTML = [Link]();
Try it Yourself »
Example 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return [Link] + " " + [Link];
}
};
// Display data from the object using a getter:
[Link]("demo").innerHTML = [Link];
Try it Yourself »
Example 1 access fullName as a function: [Link]().
Example 2 access fullName as a property: [Link].
The second example provides a simpler syntax.
Data Quality
JavaScript can secure better data quality when using getters and setters.
Using the lang property, in this example, returns the value of the language
property in upper case:
Example
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return [Link]();
}
};
// Display data from the object using a getter:
[Link]("demo").innerHTML = [Link];
Try it Yourself »
Using the lang property, in this example, stores an upper case value in the
language property:
Example
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
[Link] = [Link]();
}
};
// Set an object property using a setter:
[Link] = "en";
// Display data from the object:
[Link]("demo").innerHTML = [Link];
Try it Yourself »
Why Using Getters and Setters?
It gives simpler syntax
It allows equal syntax for properties and methods
It can secure better data quality
It is useful for doing things behind-the-scenes
[Link]()
The [Link]() method can also be used to add Getters and
Setters:
A Counter Example
// Define object
const obj = {counter : 0};
// Define setters and getters
[Link](obj, "reset", {
get : function () {[Link] = 0;}
});
[Link](obj, "increment", {
get : function () {[Link]++;}
});
[Link](obj, "decrement", {
get : function () {[Link]--;}
});
[Link](obj, "add", {
set : function (value) {[Link] += value;}
});
[Link](obj, "subtract", {
set : function (value) {[Link] -= value;}
});
// Play with the counter:
[Link];
[Link] = 5;
[Link] = 1;
[Link];
[Link];
Try it Yourself »
❮ Previous Next ❯
COLOR PICKER
Get certified
by completing
a JavaScript
course today!
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Get started
Report Error
Spaces
Upgrade
Newsletter
Get Certified
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
[Link] Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by [Link].