Javascript code execution sequence

Question

    function User(firstName,EmailId){
          this.name = firstName;
          this.email = EmailId;
          this.quizScores = [];
          this.currentScore = 0;
    }
    User.prototype = {
          constructor : User,
          saveScore:function (scoreToAdd)  {
             this.quizScores.push(scoreToAdd)
          },
          showNameAndScores:function ()  {
             var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No Scores Yet";
             return this.name + " Scores: " + scores;
          },
          changeEmail:function (newEmail)  {
             this.email = newEmail;
             return "New Email Saved: " + this.email;
          }
    }

    secondUser = new User("Peter", "[email protected]");
    console.log('secondUser',secondUser);
    secondUser.changeEmail("[email protected]");
    secondUser.saveScore(18);
    secondUser.showNameAndScores();

On my console I see output as

currentScore:0
email:"[email protected]"
name:"Peter"
quizScores:[18]

Now in my above code I have created object and then immediate printed on console then I have called prototype methods still it print values updated by prototype methods.why it happens?

Before expand this object

After Expand this object

Sergio Tulentsev · Accepted Answer · 2018-03-21 12:22:24Z

1

why it happens?

console.log, when passed an object, prints a "live" object, a reference to it (at least in chrome and firefox). If you later update that object and only then expand the object in the console, you'll see the updated values. To get the current state of the object, you could print the properties individually, for example:

 console.log(secondUser.email)

Another possibility is printing a deep copy of an object, not the object itself.

edited Mar 21, 2018 at 12:22

answered Mar 21, 2018 at 10:06

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gitaram Kanawade Over a year ago

Thanks Sergio.Its helpful

Sergio Tulentsev Over a year ago

@GitaramKanawade: JFYI, you're expected to accept helpful answers. (the green checkmark on the left)

Sergio Tulentsev Over a year ago

@GitaramKanawade: you should also go through your past questions and upvote/accept where appropriate.

Collectives™ on Stack Overflow

Javascript code execution sequence

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related