javascriptpropertiesduplicatesecmascript-5use-strict

JavaScript: duplicate property name and getter/setter an error in ES5?


JS noob here: If a getter/setter with a particular name is used that is the same as a property's name that takes on a value, and in code that is in strict mode, will an error occur in ES5? Ex (where yes, I know I am not properly using the getter and setter below in regards to their purpose):

    "use strict"; //assume is first line in script or function
    let obj = {
      p: 5,
      get p() {
        console.log("in getter");
      },
      set p(v) {
        console.log("in setter: ", v);
      }
    };

I ask here for a few reasons:

    //Ex 1:
    let obj = {
      get p() {
        console.log("in getter");
        return 6;
      },
      p: 5,
    };
    console.log(obj.p); //prints 5

    //Ex 2:
    let obj2 = {
      get p() {
        console.log("in getter");
        return 6;
      },
      p: 5,
      set p(v) {
        console.log("in setter: ", v);
      }
    };
    console.log(obj2.p); //prints undefined

Solution

  • In JS, you cant really have a get/set and a data property with the same naming convention. They pretty much occupy the same slot on an object.

    In ES5 and strict mode, if you define a data property and then define a getter/setter with the same name, or vice versa, you will overwrite the previous. This is exactly what's happening in your examples.

    Here is the correct usage with use strict:

    "use strict"; 
    let obj = {
      _p: 5,  //use a different internal property to store the value
      get p() {
        console.log("in getter");
        return this._p;
      },
      set p(v) {
        console.log("in setter: ", v);
        this._p = v;
      }
    };
    console.log(obj.p);  //logs "in getter", then 5
    obj.p = 10;  //logs "in setter: 10"
    console.log(obj.p);  //logs "in getter", then 10
    

    In regards to your second example, the get is defined first and then returns a const value 6. Then you define a data property p which will overwrite the get. Finally the set which will overwrite the data property. As a result, the getter is gone and trying to access obj2.p will be undefined.