JavaScript Object Accessors
JavaScript Accessors (Getters and Setters)
ECMAScript 5, also known as ES5 in 2009, brought in Getter and Setters.
Getters and setters help you create Computed Properties for Objects.
JavaScript Getter (The get Keyword)
This illustration employs a lang attribute to getthe value associated with the language attribute.
JavaScript Setter (The set Keyword)
This sample demonstrates using a lang attribute to set a value to the language property.
JavaScript Function or Getter?
What makes these two examples different from each other?
Example 1: To get the full name, use the function like this - person.fullName().
Example 2: Retrieve the full name as a property using person.fullName.
The second example has a more straightforward way of writing.
Data Quality
JavaScript helps improve the quality of data by using getters and setters.
With the lang property in this example, the result is the uppercase version of the language property.
By utilizing the lang property in this instance, an uppercase value is stored in the language property.
Why Using Getters and Setters?
- It provides an easier way to write code.
- It permits using the same syntax for both properties and methods.
- It can improve the quality of data.
- It comes in handy for handling tasks in the background.
Object.defineProperty()
You can use the Object.defineProperty() method to add Getters and Setters.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters are like tools that help you fetch and adjust the characteristics of an object using special functions.</p>
<p>This example uses a "lang" attribute to fetch the language property's value.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters are like tools that help you fetch and adjust the characteristics of an object using special functions.</p>
<p>This example uses a "lang" attribute to fetch the language property's value.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "NO",
set lang(value) {
this.language = value;
}
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>Data stored within an object can be retrieved using a property that acts like a function.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>Object data can be accessed using a getter.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters help you access and change properties using methods.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters help you access and modify properties using methods.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Perfect for creating counters:</p>
<p id="demo"></p>
<script>
// Define an object
const obj = {
counter: 0
};
// Define Setters and Getters
Object.defineProperty(obj, "reset", {
get: function() {
this.counter = 0;
}
});
Object.defineProperty(obj, "increment", {
get: function() {
this.counter++;
}
});
Object.defineProperty(obj, "decrement", {
get: function() {
this.counter--;
}
});
Object.defineProperty(obj, "add", {
set: function(value) {
this.counter += value;
}
});
Object.defineProperty(obj, "subtract", {
set: function(value) {
this.counter -= value;
}
});
// Play with counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery