Understanding how the JS engine is looping through to get the index of an array element
<p>I wrote a function to output the names and real-life indexes of people waiting in a line.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; line.length; i++) {
      array.push(` ${line.indexOf(line[i+1])}. ${line[i]}`);
    }
    document.write(`The line is currently:` + array);
  }
}

currentLine(line);</code></pre>
</div>
</div>
</p>

<p>When I run the function, the output is:</p>

<p><code>The line is currently: 1. Sarah, 2. Mike, -1. Bob</code></p>

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

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