Understanding how the JS engine is looping through to get the index of an array element

Question

I wrote a function to output the names and real-life indexes of people waiting in a line.

var line = ["Sarah", "Mike", "Bob"];

function currentLine(line) {
  if (line.length === 0) {
    document.write(`The line is currently empty.`);
  } else {

    var array = [];
    for (var i = 0; i < line.length; i++) {
      array.push(` ${line.indexOf(line[i+1])}. ${line[i]}`);
    }
    document.write(`The line is currently:` + array);
  }
}

currentLine(line);

When I run the function, the output is:

The line is currently: 1. Sarah, 2. Mike, -1. Bob

How is the JavaScript engine interpreting the loop? How is Bob -1? Last time I checked 2 + 1 = 3.

I want to fix this myself but I'm trying to understand what is going on in this seemingly straight forward loop.

score 2 · Accepted Answer · answered Sep 04 '16 at 03:56

The answer is right in your analysis:

How is Bob -1? Last time I checked 2 + 1 = 3

On the third iteration of the loop, i = 2. This line executes with i = 2:

line.indexOf(line[i+1])

So what does this say? It says get me the element at position (i + 1), which is position 3, or the forth element. There is no forth element, so line[i+1] is undefined.

Pass that to the indexOf call and what you are saying is, find me the position of undefined in the line array. line contains 'Sarah', 'Mike', and 'Bob'. It does not contain undefined.

I made a small change to the array.push line and it works correctly now:

var line = ["Sarah", "Mike", "Bob"];

function currentLine(line) {
  if (line.length === 0) {
    document.write(`The line is currently empty.`);
  } else {

    var array = [];
    for (var i = 0; i < line.length; i++) {
      array.push(` ${i+1}. ${line[i]}`);
    }
    document.write(`The line is currently:` + array);
  }
}

currentLine(line);

Thank you so much @Brandon. Computational thinking is a head trip for a newbie. It makes sense when explained so well. Much appreciated. — tea, Sep 04 '16 at 04:08

score 1 · Answer 2 · answered Sep 04 '16 at 03:56

The problem with ${line.indexOf(line[i+1])} is that on the last iteration, where i is 2, it checks for line[3]. That doesn't exist so it spit's out a -1, as that is the return value of indexOf if something doesn't exist. Just go with this:

array.push(` ${i+1}. ${line[i]}`);

This just prints i + 1, instead of looking for index.

var line = ["Sarah", "Mike", "Bob"];

function currentLine(line) {
  if (line.length === 0) {
    document.write(`The line is currently empty.`);
  } else {
    var array = [];
    for (var i = 0; i < line.length; i++) {
      console.log(line.indexOf(line[i+1])); //On last iteration, it's -1 because it's not found in the array!
      array.push(` ${i+1}. ${line[i]}`);
    }
    document.write(`The line is currently:` + array);
  }
}

currentLine(line);

score 0 · Answer 3 · answered Sep 04 '16 at 03:53

I fixed the loop. I overcomplicated the indexing:

${line.indexOf(line[i+1])}

which should be:

${[i+1]} - is that legitimate syntax?

Also, if anyone could shed light on what my incorrect code was doing and how JS was iterating, I would greatly appreciate it.

Understanding how the JS engine is looping through to get the index of an array element

3 Answers3