Why dose creating var message = ''; remove undefined?

Question

When I started first completed the challenge my code was like this

var message;

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;
};


for (var i = 0; i < students.length; i += 1) {
  var student = students[i];
  message += '<h2> Student: ' + student.name + '</h2>';
  message += '<p> Track: ' + student.track + '</p>';
  message += '<p> Achievements: ' + student.achievements + '</p>';
  message += '<p> points: ' + student.points + '</p>';
};



print(message);

Then I would get a undefined as the first html text printed. I then looked back on the older code and saw the code from "array quiz challange" where we build this function

function buildList(arr) {
  var listHTML = '<ol>'
  for (var i = 0; i < arr.length; i++) {
    listHTML += '<li>' + arr[i] + '</li>';
  };
  listHTML += '</ol>'
  return listHTML;
}

Then I added a <div> to wrap my massage. That removed the undefined, but instead I now had a extra html element. Saw that in the solution video Dave just added

var message = '';

My question is why dose it return undefined first if there isn't a string in message before the for loop?

Answer 1 · 2015-03-14T00:25:31Z

March 14, 2015 12:25am

Hi adam åslund,

The reasoning behind this is very simple, whenever you create a new variable in JavaScript and don't assign it a data value it automatically references undefined as it's value because that is what the ECMAScript specification says to do with in this type of situation, however when we assign a String data value it now references an object that contains valid information for code further down to work with.

So in the case of your above code message += would fail if an empty string wasn't assigned first, whereas if we assign that empty string the compound operator += will simply append one string to another.

Hope that helps.

Welcome to the Treehouse Community

Looking to learn something new?

adam åslund

adam åslund

Why dose creating var message = ''; remove undefined?

1 Answer

Chris Shaw

Chris Shaw