How does the var x and var lineY code work? [duplicate]

Question

I have this processing.js code made on khan academy:

background(255, 255, 247);
stroke(173, 222, 237);

for (var i = 0; i < 20; i++) {
    
    var lineY = 20 + (i * 20);
    line(0, lineY, 400, lineY);
    
}

for (var j = 0; j < 20; j++) {
    
    var x = 20 + (j * 20);
    line(x, 0, x, 400);

}

What does the

var lineY = 20 + (i * 20);

code do? And what does the

var x = 20 + (j * 20);

code do?

Im a beginner

Answer 1

Each one declares (tells javascript to create) a variable (a word), and initializes the value (sets the initial value) to whatever is on the other side of the = sign.

var lineY = 20 + (i * 20);
line(0, lineY, 400, lineY);

is equivalent to

line(0, 20 + (i * 20), 400, 20 + (i * 20));

however, using a variable makes it so you don't have to do the same calculation again (and makes code more readable).

Answer 2

var lineY = 20 + (i * 20);

This means that the variable called lineY will be equal to 20 plus the value of i times 20. So if i is 1, then lineY will equal 40.

The variables i and j will be values of 20 or less, based on the maximum value in the for loop.