JavaScript returning numeric value instead of string(s) after sorting array

Question

I am working on an exercise where I prompt the user for a list of names, store the list of names in an array, sort the array in ascending order, and print the list of names (one per line). When I do so, I see a numeric value displayed instead of one name per line. Why is this happening?

var namesArray = [];

do {
  var names = prompt("Enter a name: ");
  namesArray.push(names);
} while (names != "")

namesArray.sort();

for (var name in namesArray) {
  document.write(name);
}

Answer 1

When you use this construct:

for (var name in namesArray) {

the value of name will be the index in the array (the property name). If you want the actual value in the array, you have to use that property name/index to get the value:

document.write(namesArray[name]);

---

Of course, you really should not iterate arrays that way in the first place because that iterates all the enumerable properties of the array object (potentially including non array elements) as you can see in this example. Instead, you should use a traditional for loop as in this code example that follows:

    var namesArray = [];

    do {
        var names = prompt("Enter a name: ");
        namesArray.push(names);
    } while (names != "")

    namesArray.sort();

    for (var i = 0; i < namesArray.length; i++) {
        document.write(namesArray[i]);
    }

---

Other options for iterating the array:

namesArray.forEach(function(value) {
    document.write(value)
});

Or, in ES6, you can use the for/of syntax which does actually work how you were trying to use for/in:

for (let value of namesArray) {
    document.write(value);
}

---

You also may want to understand that using document.write() after the document has already been parsed and loaded will cause the browser to clear the current document and start a new one. I don't know the larger context this code fits in, but that could cause you problems.

Answer 2

First, in a for..in loop, here name represents the keys and not the values in your array (you should use namesArray[name])

Also there is another important thing to note. An array is not recommended to be looped through using for..in and if so, you should do it like this:

for (var key in array) {
    if (array.hasOwnProperty(key)) {
        // then do stuff with array[key]
    }
}

The usual preferred ways to loop through an array are the following:

A plain for loop

for (var i = 0, l = array.length; i < l; i++) {
    // array[i]
}

Or a higher order function with Array.prototype.forEach (IE9+ if you need compat with IE)

array.forEach(function (item) {
    // do something with the item
});