Why doesn't the setter method body get called when using Javascript class syntax?

Question

 class Person{
    
      constructor(name,age){
        this.name = name;
        this.age = age;
      }
      get getName(){
        return this.name;
      }
      set setName(name){
        if (typeof name === 'number'){
          this.name = name;
        }else{
          this.name = 'joesy';
        }
      }
    
    }
    const p1 = new Person('jack',9);
    console.log(`${p1.name}`);
    p1.name = 11;
    console.log(`${p1.name}`);

I want to be able to check that the parameter passed into the set method is a number and not a string, but it seems that no matter how I write the if statement inside setName(), calling p1.name = value will always set value to x.

The method names for your setter and getter functions represent the actual property names of the objects. You're setting the `name` property, but the setter will only be called if you set the `setName` property. — Pointy, Mar 07 '22 at 22:11
You cannot have a simple "name" property and also setters and getters; it's one or the other. — Pointy, Mar 07 '22 at 22:11
`p1.name`, `p1.getName` and `p1.setName` are three different properties in your code. — Bergi, Mar 07 '22 at 22:15
[This link](https://stackoverflow.com/questions/10592753/how-to-define-setter-getter-on-prototype) will be helpfull, I think — Anar Ahmad, Mar 07 '22 at 22:16
FM is always good - read it first - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get — Alexei Levenkov, Mar 07 '22 at 22:18
Also, JavaScript getters and setters are rather peculiar in that the variable name stays the same; in Java you'd do something like `getName`, but in JS it's `get name`. — code, Mar 07 '22 at 22:24
@code There is nothing peculiar about that; Java simply technically doesn't offer getters and setters. These exist only **by convention** in Java. — connexo, Mar 07 '22 at 22:53
@connexo that's the peculiar part. In most languages you manually create getters and setters, and conventionally prepend `get` to the variable name; this is where JavaScript defers. — code, Mar 07 '22 at 23:09
@code I see nothing peculiar in that. You could work with the very same conventions in Javascript as well (which you'd do e.g. if you want to allow access to private properties), but it also offers a technical solution as an integral part of the language itself, instead of just a convention. — connexo, Mar 07 '22 at 23:13

connexo · Accepted Answer · 2022-03-07T23:02:28.567

Javascript objects can have two different types of properties:

data properties and
accessor properties (getter/setter).

Data properties simply store values assigned to them (if they are writable) and return these stored values when read.

Accessor properties do not store values at all. Instead they work as functions that are executed whenever read access (getter) or write access/assignment to the property (setter) happens.

Here's a basic example:

class Person {
  constructor(firstName, lastName) {
    // data properties
    this.firstName = firstName;
    this.lastName = lastName;    
  }
  
  // accessor property
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  set fullName(name) {
    let [firstName, lastName] = name.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;  
  }
}


const p1 = new Person('John', 'Doe');
const p2 = new Person();
p2.fullName = 'Christine Smith';

console.log(p1.firstName, p1.lastName, p1.fullName);
console.log(p2.firstName, p2.lastName, p2.fullName);

Why doesn't the setter method body get called when using Javascript class syntax?

1 Answers1