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 The Build an Object Challenge, Part 2 Solution

MONICA BUI
MONICA BUI
3,526 Points
Posted by MONICA BUI
MONICA BUI
3,526 Points

I need further explanation on how += works

for (var i = 0; i < studentRecords.length; i++) {
    for (var key in studentRecords[i]) {
        html += "<h1> Name: " + studentRecords[i].studentName + "</h1>";
        html += "<h2> Track: " + studentRecords[i].track + "</h2>";
        html += "<h2> Achivements: " + studentRecords[i].achievements + "</h2>";
        html += "<h2> Points: " + studentRecords[i].points + "</h2>";
        break; 
// break out of the for..in loop otherwise each student date set will be repeated 4 times 
// it repeated 4 times because I wrote html+= 4 times 
//because I didn't use the variable key inside the for..in loop
//  putting for..in loop in side a for loop is redundant in this case
    } 
}

print(html);

Would anyone please explain to me why when I put the for..in loop inside a for loop and wrote "html+=" 4 times, each student data set (each object in side the array) will be repeated 4 time when I call the function? Thank a lot!

2 Answers

Niclas Valentiner
Niclas Valentiner
8,947 Points
Niclas Valentiner
Niclas Valentiner
8,947 Points

While Marcus Parsons' answer covers what happens and how the for in loop is unnecessary, I felt that explaining the += operator is also important in this case.

+= is basically concatenation. It takes the variable on the left side, adds the variable on the right side and saves it back into the left side variable.

var a = "Fish";
var b = " is tasty.";

a += b;
a = a + b;

//Both of the above does the exact same thing
//In either case a now holds the value of "Fish is tasty."
Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Monica,

The reason why your code repeats 4 times is not because of the += operation going on with the "html" variable. It is because of your inner for in loop that loops over each key present in your "studentRecords" object. Since there are 4 keys per each object inside of "studentRecords", it is duplicating the information 4 times, one loop for each key, because that is how the for in loop works.

So, the easiest solution is to just delete the for in loop you have (the 2nd for loop). There's no need for it to exist because your first for loop is iterating over each object already. You need to also delete the break command, as well; otherwise, your loop won't function properly.

for (var i = 0; i < studentRecords.length; i++) {
        html += "<h1> Name: " + studentRecords[i].studentName + "</h1>";
        html += "<h2> Track: " + studentRecords[i].track + "</h2>";
        html += "<h2> Achivements: " + studentRecords[i].achievements + "</h2>";
        html += "<h2> Points: " + studentRecords[i].points + "</h2>";
}

print(html);