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

Greg Schudel
Greg Schudel
4,090 Points

Several how, when and why questions on the for in loop

I'm really concerned about not being able to do the follow three objectives for the Javascript basics course. I can do the quizzes fine. It's just there is something I feel like I'm missing when asked to perform the "challenges" and it's driving me crazy and makes me feel like I don't understand Javascript as much as I thought I might initially.

With every challenge, I'm given I'm sure about what I need to do, but I'm still confused on HOW and WHEN to do it. The challenges are given imply I 'should' know how to write the code to solve it, but after looking at how the code links together, I find myself still not sure how I "should know" this code syntax and interweaving of arguments and variables. Am I missing something or should I review the challenges on my own again? Am I just thinking too much? I just don't want to double back as I move forward to other Javascript content.

Please see below for my questions on the Build an Object Challenge.

/*why can't this variable just be empty, why the ' ' needed after it? The other challenges didn't a variable with quotations on it, why?*/
var message = '';
var student;

/* is there a short hand for this?*/
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}


/*how does he know when he needs to use a for loop versus a function? Couldn't I use a function to get similar results?*/

for (var i = 0; i < students.length; i++ ){

    student = students[i];

    /*why is he using an additional assignment operator instead of just an equal sign?*/
    message += '<h2><b>Student:</b> ' + student.name + '</h2>';
    message += '<h2>Student: ' + student.track + '</h2>';
    message += '<h2>Student: ' + student.achievements + '</h2>';
    message += '<h2>Student: ' + student.points + '</h2>';

};


/*why aren't we using a function like the one was used in the previous array challenge?
Is this because his solution uses less code. If I've learned anything about coding, you must be minimal with your code, yet EFFICIENT.

function buildList(arr){
  /*this starts the ol tag*/
  var listHTML = '<ol>';

    /*this for loop runs through the array*/
      for (var i = 0; i < arr.length; i +=1) {

          /*this loop starts and ends the li tags with the dynamically stored data from the user's submission and then stores it in listHTML variable*/
          listHTML += '<li>' + arr[i] + '</li>';

      }  

  /*this ends the ol tag*/
  listHTML += '</ol>';
  return listHTML;

}

*/


print(message);

1 Answer

andren
andren
28,558 Points

Why can't this variable just be empty, why the ' ' needed after it? The other challenges didn't a variable with quotations on it, why?

Because it needs to be defined as a string, if it is left empty it starts out as being undefined. I'll come back to why it needs to be declared a string in the answer for the fourth question.

Is there a short hand for this?

For creating a named function? Not that I know of. For anonymous function there are arrow functions which use a slight shorter syntax, but those also function slightly differently in some situations. And are therefore technically not just a shorthand.

How does he know when he needs to use a for loop versus a function? Couldn't I use a function to get similar results?

A loop is needed when you need to have code run many times in a row. A function is only run once when called. So if you wanted some set of code to be run 10 times you would have to call it 10 times if you used a function without any kind of looping. And that also requires that you know the exact number of times you want to run the code. With a loop you can have it run a dynamic number of times.

In the example above for example the loop will run the same number of times as there are items in the students array. Which means that if the students array is changed at some later time to include more or less students it won't break the code in this file, which would not be the case if you manually ran it by calling a function multiple times.

Why is he using an additional assignment operator instead of just an equal sign?

Because the = operator and the += operator does different things. The = operator sets the variable to whatever value you supply, completely replacing what was previously in the variable. The += operator adds the contents on the right to the variable, meaning that the existing content remains with the new content added at the end. It is a shorthand for setting the variable equal to itself plus some other thing.

The use of this operator is also why the message variable had to be declared as a string earlier in the code, when the += operator is used to add a string to a variable the variable the string is added to has to be a string as well, if it isn't it will be converted to one.

When you convert a variable that is undefined to a string you end up with a string that actually contains the text "undefined", so if the message variable was not defined as a string from the start it would have ended up with that text at the start when content was added to it later due to the undefined to string conversion that would have taken place.

This is not a problem when the equals operator is used due to the fact that then you are actually setting the variable to a value, rather than just adding a value to it.

Why aren't we using a function like the one was used in the previous array challenge? Is this because his solution uses less code. If I've learned anything about coding, you must be minimal with your code, yet EFFICIENT.

I can't comment to much on this question since Its been a while since I've gone though this course and therefore don't really remember what functions where used earlier.

This starts the ol tag

Correct.

This for loop runs through the array

Correct.

This loop starts and ends the li tags with the dynamically stored data from the user's submission and then stores it in listHTML variable

Correct.

This ends the ol tag

Correct.

If you have any further questions or need some clarification on some of my answers feel free to respond to this answer, I'll try to answer anything I can.

Greg Schudel
Greg Schudel
4,090 Points

Thanks for the insight.

But should I go over the array and loop "challenge" videos since I am in the end of the course of that Javascript beginners class and review them since I'm so confused about syntax?