Why use getters and setters in JavaScript?

by

A difference between using a getter or setter and using a standard function is that getters/setters are automatically invoked on assignment. So it looks just like a normal property but behind the scenes you can have extra logic (or checks) to be run just before or after the assignment.

So if you decide to add this kind of extra logic to one of the existing object properties that is already being referenced, you can convert it to getter/setter style without altering the rest of the code that has access to that property.

Edit: Here is an example for an extra logic, this class counts how many times its name is read:

class MyClass {
  constructor() {
    this.refCount = 0;
    this._name="the class";
  }

  get name() {
    this.refCount++;
    console.log(`name is read ${this.refCount} times.`);
    return this._name;
  }
}

const myClass = new MyClass();

let maxMessages = 5;
const t = setInterval(() => {
  console.log(`name: ${myClass.name}`);
  
  if (--maxMessages < 1) {
    console.log('done');
    clearInterval(t);
  }
}, 1000);

More Related Contents:

  1. Is it possible to implement dynamic getters/setters in JavaScript?
  2. Override a setter, and the getter must also be overridden
  3. Determine if a JavaScript property has a getter or setter defined?
  4. Does normal javascript works on node – webkit or not? [closed]
  5. How to find content of a specific cell with row and column index?
  6. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  7. Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
  8. endsWith in JavaScript
  9. How to save an image to localStorage and display it on the next page?
  10. Event handlers inside a Javascript loop – need a closure?
  11. phantomjs not waiting for “full” page load
  12. How to add line breaks to an HTML textarea
  13. How can I get the selected text in a textarea? [duplicate]
  14. Get the position of a div/span tag
  15. Password REGEX with min 6 chars, at least one letter and one number and may contain special characters
  16. THREE.js : 2xMeshes using same vector as position
  17. Order of hoisting in JavaScript
  18. TinyMCE Paste As Plain Text
  19. How do I clear all options in a dropdown box?
  20. Is NaN equal to NaN?
  21. Javascript Object push() function
  22. How to set default browser window size in Protractor/WebdriverJS
  23. How to include javascript on client side of node.js?
  24. jQuery key code for command key
  25. When is the ‘javascript:’ prefix valid syntax?
  26. Bootstrap’s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
  27. javascript/jquery – add debounce to a button
  28. Three.js multiple materials on object loaded via OBJMTLLoader
  29. Compare two Arrays with Objects and create new array with unmatched objects
  30. JavaScript hoisting explanation

Leave a Comment