Setter in javascript

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

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

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?

– 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.

– Zohir Salak
Nov 24 '18 at 17:04

add a comment |

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

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

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?

– 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.

– Zohir Salak
Nov 24 '18 at 17:04

add a comment |

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

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

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

    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"

    // }

    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"

    // }

javascript setter

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

edited Nov 24 '18 at 16:57

Álvaro González

106k30187277

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

asked Nov 24 '18 at 16:18

Shashank Vinayak

385

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?

– 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.

– Zohir Salak
Nov 24 '18 at 17:04

add a comment |

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?

– 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.

– Zohir Salak
Nov 24 '18 at 17:04

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?

– 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.

– Zohir Salak
Nov 24 '18 at 17:04

add a comment |

2 Answers
2

active

oldest

votes

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.

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

add a comment |

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.

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460060%2fsetter-in-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

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

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)

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.

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

add a comment |

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

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

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)

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.

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

add a comment |

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

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

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)

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.

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

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

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

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)

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.

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

answered Nov 24 '18 at 17:22

Dinesh Pandiyan

2,6511927

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

add a comment |

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

Good walk through of why it is happening

– charlietfl
Nov 24 '18 at 17:33

add a comment |

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.

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

add a comment |

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.

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

add a comment |

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.

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

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.

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

edited Nov 24 '18 at 16:59

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

answered Nov 24 '18 at 16:28

Bhojendra Rauniyar

51.7k2079128

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

add a comment |

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

ah, had something on mind. just got it and updated. thanks.

– Bhojendra Rauniyar
Nov 24 '18 at 16:59

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg