3

Why is person1's 'name' property is 'undefined' while person2's 'name' property has a value?

    const person1 = {
        set name(newName) {
            console.log(newName)
        }
    }
    
    const person2 = {}
    Object.assign(person2, person1)
    
    person1.name = 'x'  
    // logs "x"
    
    person2.name = 'z' 
    // doesnt log anything
    
    console.log("Person1", person1)
    // "Person1" Object {
    //   name: undefined
    // }
    
    console.log("Person2", person2)
    // "Person2" Object {
    //   name: "z"
    // }

Link to CodePen: https://codepen.io/anon/pen/ZmoMzj?editors=1112

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
Shashank Vinayak
  • 163
  • 1
  • 6
  • 1
    Your setter has to actually set something to store the value. Then you have no getter for `name`. `Object.assign()` makes shallow copy so the setter is gone in person2. What are you trying to do? – charlietfl Nov 24 '18 at 16:35
  • Possible duplicate of [Javascript getters and setters for dummies?](https://stackoverflow.com/questions/812961/javascript-getters-and-setters-for-dummies) – Ferdinando Nov 24 '18 at 16:39
  • `Why is person1's 'name' property is 'undefined' while person2's 'name' property has a value?` simply because your setters isn't doing anything just logging in the value, and `Object.assign()` do invoke getters and setters it doesn't create new ones. – Rainbow Nov 24 '18 at 17:04

2 Answers2

3

What you're observing is the result of the default behaviour of Object.assign().

1. person1's 'name' property is 'undefined'

If the property is not defined in the object and only a setter is defined, any attempt to access the property directly will return undefined. You should either define the property name in person1 or it's getter to access it as person1.name.

That is why when you log person1, name is undefined.

person1.name is returning undefined because person1 only has a setter and no getter

2. person2's 'name' property has a value

When these two lines are executed,

const person2 = {}
Object.assign(person2, person1)

getters and setters are not copied in Object.assign() but they are invoked and new properties are created in the process. Since set name(newName) doesn't have an equivalent getter or the property name in person1, the name property in person2 is assigned undefined during Object.assign(). So this will be your person2 at the end of Object.assign()

person2 = { name: undefined };

without any getter or setter.

And, when you invoke this line

person2.name = 'z'

the name property is assigned the value z.

person2.name is returning the value because person2 doesn't have a getter or setter and just returns the assigned value.

Dinesh Pandiyan
  • 5,814
  • 2
  • 30
  • 49
0

As in the example demonstrated in the docs, it states that:

Note that name is not defined and any attempts to access it will result in undefined.

name is used in the preceding quote to state property setter name as in your example.

So, you have define the getter to return it's result. And I suggest you to follow the example provided on docs itself.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231