JavaScript For loop backdoor?

Question

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
    text += cars[i] + "<br>";
    i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

The tricky thing is here:

for (;cars[i];) {
    text += cars[i] + "<br>";
    i++;
}

From: tryjs_loop_for_cars in w3schools

Isn't the statement 2 of For-loop used to be evaluated and terminate the loop if it's false? Isn't statement 2 of Boolean type? How could it be used like a For/In loop?

I need help, who knows the legacy of this or the things behind this? Is this supposed to be a backdoor feature?

I have eyes, I know this exists now, don't tell me this just exists, but how it works?

Please refrain from using words like WTF on stack overflow... — Koby Douek, Apr 26 '17 at 04:17
You need to understand [_truthy_](https://developer.mozilla.org/en/docs/Glossary/Truthy) and [_falsy_](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) in javascript — Suraj Rao, Apr 26 '17 at 04:21
Wow, that makes perfect sense, suraj. I guess it's rather a useful legacy that JavaScript have _truthy_ and _falsy_, but it does make the language less mission-critical, though. — Wenk Hsueh, Apr 26 '17 at 04:34

score 5 · Accepted Answer · answered Apr 26 '17 at 04:19

5

This is weird, certainly, but there is nothing magic happening. In a normal for loop:

for (/*some intialization*/; /*some check, which if falsy, exits the loop*/, /* Something that happens at the end of each loop*/) {
    //do stuff
}

So in the code you have posted:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (/*no init*/;cars[i];/*is in the loop instead*/) {
    text += cars[i] + "<br>";
    i++; // this would generally be the third expression in the loop parens
}

Once i becomes 4, cars[i] will return undefined, which is falsy and the loop will exit.

answered Apr 26 '17 at 04:19

Alexander Nied

12,804
4
25
45

1

cars[0] is "BMW" which is truthy and evaluates to true – Suraj Rao Apr 26 '17 at 04:24
1

Yes, this is true-- please see the very relevant comment from @suraj on your question-- while it may not be the boolean `true`, it is "truthy", which is a thing in Javascript. The automatic type conversion in Javascript can be unnerving if you're not used to it, but if dealt with carefully it can allow you to do some clever stuff. – Alexander Nied Apr 26 '17 at 04:25

score 2 · Answer 2 · edited May 23 '17 at 10:31

This works because when the loop gets to cars[4] it will evaluate to undefined because index 4 is beyond the last element in the array. Since undefined is considered falsey, the loop terminates.

Try running this:

if(undefined) {
    console.log('this will never execute');
}
else {
    console.log('this will always execute');
}

I wouldn't necessarily consider this a good coding practice but it does work. I think a better approach would be

for(var i = 0; i < cars.length; i++) {
}

Old school, but that's how for loops are intended to work.

Here a pretty extensive article on javascript's concepts of truthy and falsey. Probably a good idea to get familiar with the ideas because many devs write code dependent on those details (like the one you came across).

score 1 · Answer 3 · answered Apr 26 '17 at 06:42

Isn't the statement 2 of For-loop used to be evaluated and terminate the loop if it's false? - YES

You can find more detail about for statement here:

for ([initialExpression]; [condition]; [incrementExpression])
  statement

The condition expression is evaluated. If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates. If the condition expression is omitted entirely, the condition is assumed to be true.

Example: if any item in array has a falsy value item the loop is stop

var cars = ["BMW", '', "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
    console.log(cars[i]);
    i++;
}

Isn't statement 2 ([condition]) boolean type? - YES

When you put a condition expression it means Boolean([condition]) Example:

condition = Boolean('');
console.log(condition);

Hope that helps :)

Justin Reeves · Answer 4 · 2017-04-26T04:45:23.537

0

https://dorey.github.io/JavaScript-Equality-Table/

Look at the table under the if () tab and see how if (false) and `if (undefined)' both evaluate the same. When your index goes out of bounds, it returns undefined which is conditionally false.

edited Apr 26 '17 at 04:45

answered Apr 26 '17 at 04:39

Justin Reeves

1,148
10
24

JavaScript For loop backdoor?

4 Answers4