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 Arrays Loop Through Arrays Loop Through an Array

Tabish Kazi
Tabish Kazi
5,951 Points
Posted by Tabish Kazi
Tabish Kazi
5,951 Points

Why do we have to use an empty string while declaring the variable 'items' first?

On line 11,

Why did we have to declare the variable 'items' first and store an empty string value inside it; and then on line 13 add to that string?

i.e. 

let items = ''; 
 items += "<li>${arr[i]}</li>";

Instead, why cannot I do this:

let items;

items = "<li>${arr[i]}</li>";

1 Answer

Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,662 Points

Hi Tabish Kazi,

Without looking at the video, I can tell you that in the specific example given, the second code example would lead to the same result as the first code example.

The real difference lies in the operator used.

In the first example you use the plus-equal operator which reads the current value of the variable and adds the value to the right of the operator to it, then stores the new value to the variable.

In the second example, the value to the right of the assignment operator is stored in the variable with no preference to what is already stored in the variable.

The thing is though, in order for the plus-equal operator to work, the value of the variable can’t be null or undefined.

So say you were looping through a series of properties and you wanted to dynamically create an HTML list item for each valid property without knowing how many list items would need to be created in advance. Well you know you’re going to wrap all this HTML within a string (and later set the innerHtml of some element to be equal to this string). And so you want to continually build upon this HTML string for however long the for loop runs. And so you decide to use the plus-equal operator to add to this string, but if the variable you’re adding to isn’t already a string, then the JS interpreter wouldn’t be able to add the first list item to it (a string of html defined declaratively). The program/code would crash. This is because the interpreter wouldn’t know how to add an undefined value and a string together (just as the interpreter wouldn’t know how to add something like a string and an integer together).

So you initialize the variable as an empty string so that the interpreter knows that the variable is indeed a string, and as such, can be concatenated with other strings.

I’m thinking that maybe I’ve over explained a bit, but I hope that makes sense. Let me know if it doesn’t.

Tabish Kazi
Tabish Kazi
5,951 Points
Tabish Kazi
Tabish Kazi
5,951 Points

Hi Brandon,

Thank you for your detailed explanation, for it helped me clear the concept for why a variable cannot be left undefined. The thing that is still unclear to me, however is that if I use this -

const playlist = [
  "Kettering",
  "Wilder Mind",
  "For Marlon",
  "Only Love",
  "Only Love",
  "Halocene",
  "Mr. Brightside",
  "This Modern Love",
  "Wilder Mind",
];

function html(arr) {
  let content = "";
  for (let i = 0; i < arr.length; i++) {
    content += `<li>${arr[i]}</li>`;
  }
  return content;
}

document.querySelector(`main`).innerHTML = `
  <ol>
    ${html(playlist)}
  </ol>
`;

my programs dynamically displays my playlist (slightly off the topic, the songs mentioned here are really amazing.) However, if I use this - 

const playlist = [
  "Kettering",
  "Wilder Mind",
  "For Marlon",
  "Only Love",
  "Only Love",
  "Halocene",
  "Mr. Brightside",
  "This Modern Love",
  "Wilder Mind",
];

function html(arr) {
  let content;
  for (let i = 0; i < arr.length; i++) {
    content = `<li>${arr[i]}</li>`;
  }
  return content;
}

document.querySelector(`main`).innerHTML = `
  <ol>
    ${html(playlist)}
  </ol>
`;

the programs outputs the last value; and I cannot understand the reason for it. It would be really helpful if you can help me with this.

Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,662 Points

Hi Tabish Kazi,

I’m regards to your second comment, the reason the second version only shows the final list item is because without the plus-equal operator (+=) you’re replacing each list item with the next list item. You’re not concatenating them together.

So at some point, the content variable is equal to each song title in the array, but because your code says “set the content variable to be equal to a list item for the current iteration’s song title” as opposed to “set the content variable to be equal to itself plus the current iteration’s song title”, in the second code example the content variable holds only a list item for the last song title when it reaches the conclusion of the for loop, which is then what it output to the DOM.

Tabish Kazi
Tabish Kazi
5,951 Points
Tabish Kazi
Tabish Kazi
5,951 Points

Thank you. My mistake is now quite clear to me. :)