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

Posted by Charlotte Zhang
Charlotte Zhang
4,425 Points

Is the "html +=" part crucial? Why do it this way?

Ok, so I did it in Dave's way, and it works, but I am a little confused about what he put inside the braces, why "html +="? can someone interpret this for me? I also tried another way, I put this " html = "<div>" + i + "</div>"; document.write(html); " inside the braces, which I think is easier to understand (at least for me) and it works. Is there a reason that we should go with += instead of just =?

2 Answers

Ryan S
Ryan S
27,276 Points

Hi Charlotte,

It would be helpful if you could link to the video you are working on so I could provide an answer in context, but I'll try to give you a general explanation.

The difference between the assignment operator (=) and the addition assignment operator (+=) is that the former simply stores a brand new value into the variable, while the latter adds to the value that was already in the variable.

Using the addition assignment operator (+=) like Dave does in the JS courses is extremely useful for building long complicated strings of html, one piece at a time.

The regular equal sign will also allow you to build long complicated strings of html, but you'd have to do it in one shot.

For example, let's say I want to output some html that ultimately looks like this:

<div>
  <h1>Treehouse</h1>
  <p>Here is a paragraph</p>
</div>

If you wanted to build this as a string in JavaScript, you could do it with the assignment operator in one line:

var html = "<div><h1>Treehouse</h1><p>Here is a paragraph</p></div>";

Thats not too bad, but imagine you had a bunch of other variables mixed in, maybe some classes and id's, and you need to concatenate them all together. It could get messy pretty fast.

But using addition assignment, it makes the code way more readable and clean:

var html = "<div>";

html += "<h1>Treehouse</h1>";
html += "<p>Here is a paragraph</p>";
html += "</div>";

Here we just keep adding a bit more to the original value of the variable, and it eventually contains the complete string of html that we wanted. Notice that we did need to use the regular assignment operator to start the variable off.

If Dave was using addition assignment in the video but you did not, it is very likely that your html variable does not contain the entire string. I'm not sure what the entire string looks like, but it could be that it is inside some container divs or something that isn't immediately noticeable without CSS, so it only appears to work the same.

Hope this clears things up.

Charlotte Zhang
Charlotte Zhang
4,425 Points

i understand the difference between += and =, and this question is about the example Dave made in this (https://teamtreehouse.com/library/for-loops-2) video. I just want to know if we have to use += for this project, or can we also just use just =.

Ryan S
Ryan S
27,276 Points

You can't substitute += with = without refactoring the code. If you do put in =, then the code as Dave has written it will not work as intended.

I suspect that the reason your code works is because you have placed document.write(html) inside the for loop, while Dave did not.

For example, here are two different ways of accomplishing the task in the video:

// Method Shown in the Video (+=)
var html = '';

for ( var i = 1; i <= 10; i += 1 ) {
  html += '<div>' + i + '<div>';
}
document.write(html);  // Outside loop


// Method using =
var html = '';

for ( var i = 1; i <= 10; i += 1 ) {
  html = '<div>' + i + '<div>';
  document.write(html);  // Inside loop
}

If you want to use =, then you will need to make sure that document.write() is inside the for loop so it prints each time "html" is assigned a new value.

Otherwise, if you simply substitute = in Dave's method, it will overwrite the "html" variable every pass of the loop, and when it finally prints after the loop is done, you will only display the last value of "i", which will be 10 in this case.

Either way works, but it's not simply a matter of choosing between += or =. It is more about choosing between two different solutions to the problem, each one requiring the use of either += or =.

Charlotte Zhang
Charlotte Zhang
4,425 Points
Charlotte Zhang
Charlotte Zhang
4,425 Points

Ryan S Yes, i did put that inside the loop.