Trying to Understand this JavaScript For Loop with Ternary Operator

Question

var res = '\n', i, j;
for (i = 1; i <= 7; i++) {                
    for (j = 1; j <= 15; j++) {
        res += (i * j) % 8 ? ' ' : '*';
    }
    res += '\n';
}
alert(res);

(Copy / Pasted from Object-Oriented JavaScript - Third Edition, Ved Antani, Stoyan Stefanov)

Trying to understand this loop. I understand what's happening but not why.

res += (i * j) % 8 ? ' ' : '*';

I'm reading the ternary operator as follows.

boolean expression: (i * j) % 8
execute if true: concatenate space with res
execute if false: concatenate asterisk with res

On the first iteration, when it comes to the inner loop, it only outputs '*', when the modulo is 0, all other times it outputs ' '.

Why does it do this?

Also, don't understand the first line. What is the following doing?

var res = '\n', i, j;

What is the purpose of assigning the variable res to 3 values.

In the console it works fine without this line.

This is a an exact copy / paste from a book. Object-Oriented JavaScript - Third Edition, Ved Antani, Stoyan Stefanov — , Nov 03 '17 at 09:50
`(i * j) % 8` isn't a boolean expression, it's a ([remainder](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_())) mathematical operation. — evolutionxbox, Nov 03 '17 at 10:14

score 1 · Accepted Answer · answered Nov 03 '17 at 09:50

1

var res = '\n', i, j;

These are three vars, written down in a confusing way:

var res = '\n'; // newline
var i;
var j;

In one line:

var i, j, res = '\n';

The script runs OK. I replaced the space with a dash, this is the result:

-------*-------
---*---*---*---
-------*-------
-*-*-*-*-*-*-*-
-------*-------
---*---*---*---
-------*-------

If i=1, j=i, then i*j%8 is not 0, thus true, which results in a dash. First line, you see seven dashes, then a *, etc.

answered Nov 03 '17 at 09:50

SPRBRN

2,406
4
35
48

So, if the result of a modulo operation is 0, then it is equal of false? – Doej2017 Nov 03 '17 at 10:13
If modulo = 0, the result is false, it displays *. Test at http://www.webtoolkitonline.com/javascript-tester.html – SPRBRN Nov 03 '17 at 10:15
1

@Doej2017 `0` is a falsy value. [Learn more about truthy/falsy values here](https://stackoverflow.com/questions/35642809/understanding-javascript-truthy-and-falsy) – evolutionxbox Nov 03 '17 at 10:16

score 0 · Answer 2 · answered Nov 03 '17 at 09:55

It's running all the multiplications from 1*1 to 1*14 all the way to 6*1 to 6*14. As you already pointed out only if the modulo of said multiplication is zero it's adding a * to the res string. In the range of 1 to 14 the only time this is true is for 8.

You could add something to your inner block to visualize and aid you with understanding. An example would be:

console.log("i:", i, " j:", j, " multiplication:", i*j, "mod8:", (i*j)%8)

As a complete example this would look like this:

var res = '\n', i, j;
for (i = 1; i <= 7; i++) {                
    for (j = 1; j <= 15; j++) {
        res += (i * j) % 8 ? ' ' : '*';
        console.log("i:", i, " j:", j, " multiplication:", i*j, "mod8:", (i*j)%8)
    }
    res += '\n';
}
alert(res);

Trying to Understand this JavaScript For Loop with Ternary Operator

2 Answers2