Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects Accessing Object Properties

Posted by Zara Sales
.a{fill-rule:evenodd;}techdegree
Zara Sales
UX Design Techdegree Student 787 Points

After changing the value for (person.name), why we see both values?????

After changing the value for (person.name), why we see both values?????

Rainbow Dash should be in both the output once we change the value.

Correct?

3 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

The variable message takes the value of person.name at the time that it is assigned. Updating the name later does not change what happened previously. The assignment had already been executed.

Zara Sales
seal-mask
.a{fill-rule:evenodd;}techdegree
Zara Sales
UX Design Techdegree Student 787 Points
Zara Sales
.a{fill-rule:evenodd;}techdegree
Zara Sales
UX Design Techdegree Student 787 Points

Does this mean 2 name objects are created?

Bryan Land
Bryan Land
10,306 Points
Bryan Land
Bryan Land
10,306 Points

No, the object is created when you declare it at the top:

var person = {
  name : 'Sarah',
  country : 'US',
  age : 35,
  treehouseStudent : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

That is the only time it is created and its just a single object. The following shows that object's name property simply being "updated" to Rainbow Dash and Sarah is overwritten:

// All I'm doing is updating the name property of the person object
person.name = 'Rainbow Dash';

Hope this helps to understand that we are just updating a single property of a single object.

Zara Sales
seal-mask
.a{fill-rule:evenodd;}techdegree
Zara Sales
UX Design Techdegree Student 787 Points
Zara Sales
.a{fill-rule:evenodd;}techdegree
Zara Sales
UX Design Techdegree Student 787 Points

I understand what you mentioned. But at the end of the video after name property is being updated why do we get

"Hello My name is Sarah"

instead of

"Hello My name is Rainbow Dash" ?

Bryan Land
Bryan Land
10,306 Points
Bryan Land
Bryan Land
10,306 Points

Ah, I see where the misunderstanding lies, and its tricky. JavaScript is dynamically typed, and changes in variables, or array properties in this case, can be edited at run-time.

In this case, the message variable is consistently being updated to contain additional markup code (HTML). At the time message is first created with this line, the person.name property is still Sarah:

var message = '<p>Hello. My name is ' + person.name + '</p>';

Then, when it is updated later in the script, more HTML code is being added to message. Here is what the message variable looks like at the end of the script:

<p>Hello. My name is Sarah<!--person.name--></p>
<p>I live in the US<!--person.country--></p>
<p>But, I wish my name was Rainbow Dash<!--person.name after update--></p>
<p>My age is now 36<!--person.age after update(35+1)--></p>
<p>I have 3<!--person.skills.length--> skills: Javascript, HTML, CSS<!--person.skills.join(', ')--></p>

Then the function is called, putting message into the webpage by element ID. Hope this clears it up.