We Keep Coding

Can someone explain this simple concept of a JavaScript loop?

Considering this code:
var x = 3;
var i = 0;
while (i < 3) {
x += 1;
i += 1;
}
println(x);
Why would the output be 6? Can someone break it down for me?
I understand that x will continue adding 1 to it's value, but why does the i<3 limit it to 6?

The answer will be 6 because your initial value of X is 3.
You have only 3 iterations in your while loop.
i = 0 => x +1 = 4
i = 1 => x + 1 = 5
i = 2 => x + 1 = 6
i = 3 => exit loop

I will explain it step by step
while loop will take values, while i is smaller than 3 right.
X starts as 3 and i starts as 0.
While checks if i < 3. (it is 0 for now )
(x+=1 means x = x + 1 (same for i ))
i was 0, so while loop will start working.
x will become 4 and i will become 1.
second run: i is 1 still lower than 3 so while loop will keep working.
x will become 5 and i will become 2
i is still lower than 3 so while loop will keep working
x will become 6 and i will become 3
now i is equal to 3 so no longer lower than 3. While loop will stop working and you will get the outputs.
But if console.log (x) was in the while loop. You will get all the x results.
The output would be:
4
5
6
So, if your question is why am I getting only 6 as an output? It is because your function comes after the while loop.

Before entering into the loop: x=3, i=0 (i is less than 3, so the condition is true)
After the first step: x=4, i=1 (i is less than 3, so the condition is true)
After the second step: x=5, i=2 (i is less than 3, so the condition is true)
After the third step: x=6, i=3 (i is not less than 3, so the condition is false)
Because the condition is false, it is exited from the loop and the value of x is printed in the output.
Also, println() is not defined in JavaScript. We can use console.log().

The code of
var x = 3;
var i = 0;
while (i < 3) {
x += 1;
i += 1;
}
increments x and i repeatedly. Initially, i is 0, which is important, as its incrementation's result determines whether the loop should continue. Since the loop criteria is that i < 3 is (still) true, starting from 0 and adding 1 to the value of i, your loop's block will be executed 3 times (it's executed for i=0, then it's executed for i=1 and then it's executed for i=2 and finally, for i=3 it's not executed, because the condition of i < 3 is no longer true when i=3).
Since the loop block is executed 3 times and both i and x is incremented by 1 at each execution, their value increases by the same value during the process. Since i was increased by 1 a total of three times, its value was changed from 0 to 3 (0 + 1 + 1 + 1 = 3). Since the initial value of x was 3, it changed from 3 to 6 (3 + 1 + 1 + 1 = 6).

What does it mean by "second += arr[i][arr.length-i-1]"

I been practicing my algorithm solving skill by solving HackerRank problems. However, one of the problems is giving me a difficult time to understand. It is about calculating absolute difference between sum of diagonals in a square matrix "arr".
If the square matrix is like this:
1 2 3
4 5 6
5 2 4
and the solution is like this:
1st diagonal = 1 + 5 + 4 = 10
2nd diagonal = 3 + 5 + 5 = 13
difference = |10 - 13| = 3 <-- This should appear!
So, I came up with this solution:
function diagonalDifference(arr) {
let first = 0;
let second = 0;
let diff = 0;
for(let i = 0; i < arr.length; i++){
first += arr[i][i];
second += arr[i][arr.length-i-1]
}
diff = first - second;
return Math.abs(diff);
}
However, I figure out all other parts except the "second += arr[i][arr.length-i-1]" part.
I don't understand what [arr.length-i-1] is doing. Help me understand this.

When i starts at 0, arr.length - i - 1 starts at the last index in the array and iterates backwards towards the beginning. So, for example, if there are 4 elements, it'll access index [3], then [2], then [1], then [0].
For this problem, the array of arrays is square. arr[i][arr.length - i - 1] will result in arr[0][2], then arr[1][1], then arr[2][0] - which is the diagonal from the top right to the bottom left (which the problem is asking you to calculate).
If there were 5 subarrays, the indicies iterated over would be arr[0][4], arr[1][3], arr[2][2], arr[3][1], arr[4][0]. And so on.

P5 - load data from a matrix

I'm attempting to create a game with the p5.play.js library and I've run into some problems. I want the GUI of the game to comprise x amount of squares (sprites) on board, pulled from a text file sitting in an assets folder. They have to be sprites because I want to interact with them with mouse events and other sprites. The text file is currently an 8 x 8 matrix, but I want to use any sized matrix - from 8 x8 to 24 x 24.
I've used the splitTokens function to convert each line of 8 into 8 separate strings...so far, so good! However, the conditional logic that I have used isn't interpreting the 1, 2 and 3's contained in the text file into red, green and blue. I'm not sure whether I should convert the string to an integer - I've tried that, but it didn't work...funny that!
I've only been coding for 2 months, so I'm pushing the envelope of my limited knowledge!
My code thus far:
let fileContent;
let tiles;
let spr;
function preload(){
fileContent = loadStrings('assets/game.txt');
}
function setup() {
createCanvas(500, 500);
gui = new Array(fileContent.length);
for (let i = 0; i < gui.length; i++) {
let tiles = splitTokens(fileContent[i]);
console.log(tiles);
for (let j = 0; j < gui.length; j++) {
for (let k = 0; k < gui.length; k++) {
spr = createSprite(j * 50 + 75, k * 50 + 75, 50, 50);
if (tiles[i] == "1") {
spr.shapeColor = color('red');
}
if (tiles[i] == "2") {
spr.shapeColor = color('green');
}
if (tiles[i] == "3") {
spr.shapeColor = color('blue');
}
}
}
}
}
function draw() {
background(0);
drawSprites()
}
I'm not sure where to upload any external assets here, so the current text file is as follows:
1 2 3 2 1 3 1 2
2 3 1 1 2 1 3 1
2 3 1 2 2 1 3 1
1 3 1 1 2 1 3 1
2 3 1 1 2 1 3 1
1 2 1 1 2 2 3 1
2 3 2 3 2 1 3 1
2 1 2 2 2 1 3 1
As you can see from the code, it resides in an "assets" folder.

You are triply nesting here when not necessary on a 2d matrix. Rather than iterating 64 times, you are instead iterating 512 times (with the incorrect index as well on tiles[i], changing it to the nested iterators also "works"). However I suggest you remove the j loop and rename the outer i to j. I tried to recreate based on the info you gave here, with the change in mind.

How would I fix my approach to this Manhattan Skyline/Stone Wall and where did I go wrong? Javascript

I just came across this problem and thought I would give it a try, but now I'm stuck and need help if possible.
The problem I keep facing is my return is usually off by 1 or 2 but I can't figure out why not. I have traced my code back but still can't figure it out
The problem :
You are to write a program to assist an architect in drawing the skyline of a city. Building are rectangular in shape, the height of each building is represented by an element in a given array.
The above skyline above is represented like
[1,3,2,1,2,1,5,3,3,4,2]
SO FAR HERE IS WHAT I AM WORKING WITH:
const skyline =(H)=> {
let stack = [];
let count = 0;
let height = 0;
const addBlock = (value) => {
if (value > height) {
stack.push(value - height);
height = value;
count += 1;
}
}
const pop = (value) => {
while (value < height) {
height -= stack.pop();
}
if (value > height) {
addBlock(value)
}
}
for (let i = 0; i < H.length; i += 1) {
let value = H[i];
if (value < height) {
pop(value)
} else if (value > height) {
addBlock(value)
}
}
return count
}
skyline([1,3,2,1,2,1,5,3,3,4,2]) //Expect 9
// Test CASES:
let strokes = [1,3,2,1,2,1,5,3,3,4,2] // Expect 9
// let strokes = [5,8] // Expect 8
// let strokes = [1,1,1,1] // Expect 1
skyline(strokes)

Is this the basic algorithm?
* Big eats small (and equal-sized)
* Small reduces big to small
adding the difference
* Count last one standing
Examples:
[5,8]
-> 8 eats 5, count 8
[1,1,1,1]
-> 1 eats 1 eats 1 eats 1
-> count 1
[1,3,2,1,2,1,5,3,3,4,2]
-> 3 eats 1
-> 2 reduces 3 to 2 and adds 3-2
-> 1 reduces 2 to 1 and adds 2-1
-> 2 eats 1
-> 1 reduces 2 to 1 and adds 2-1
-> 5 eats 1
-> 3 reduces 5 to 3 and adds 5-3
-> 3 eats 3
-> 4 eats 3
-> 2 reduces 4 to 2 and adds 4-2
-> count 2
Total: 1 + 1 + 1 + 2 + 2 + 2 = 9
JavaScript code:
function f(A){
let result = 0;
for (let i=1; i<A.length; i++)
result += Math.max(0, A[i-1] - A[i]);
return result + A[A.length-1];
}
console.log(f([1,3,2,1,2,1,5,3,3,4,2]));
console.log(f([5,8]));
console.log(f([1,1,1,1]));
One liner :)
function f(A){
return [0].concat(A).reduce((a,b,i,A) => a + Math.max(0, A[i-1] - b)) + A[A.length-1];
}

the current answer seems to solve the problem presented, additionally I would like to point that a way to tackle this kind of problems is to solve it by hand and take notes on which steps you took to solve it.
In this case, they ask you to draw horizontal lines without picking up the pencil and one way to do that by hand is to do all the posible strokes on the same row before passing on to the next, until there are no rows left to check.
On every row, you will surely check if the current spot (array element) is greater than 0, which means that it is part of the stroke.
Now in more concise words:
While there are rowsLeft I will traverse the array. on every
traversal I will:
check if the current position is greater than 0 which means there is a
newStroke, it also means there are rowsLeft and since you want to keep
moving forward you would like to decrease the current element by one.
then, if there is a newStroke and the current element is 0 (end of the
stroke) or if it is the end of the array, I would add 1 to my numOfStrokes
count and also state that since I have just finished the stroke then there is
no newStroke at the moment.
Well that's what I did to solve the case you posted, I believe you can code it from there and I hope it helps you, then again, bruce's answer seems to be right, I just wanted to add how you could came up with the solution, there are surely many ways f doing it.

function minimalNumberOfSkylinesIn(array) {
if(array.length == 0)
return 0;
let result = array[0];
for(let i=1; i<array.length; ++i) {
let differnce = array[i] - array[i-1];
result += difference > 0 ? difference : 0;
}
return result;
}

Understanding the modulus operator

I have some code that loops through a collection of list elements and a collection of colours. It makes sure each list element is designated to a colour.
I understand everything about this apart from the modulus operator. I get that it finds and uses the remaining number, but I cannot for the life of me understand what it is doing here?
var li = document.getElementsByTagName('li');
var colors = ["salmon", "teal", "orange", "grey", "blue"];
var colorsCount = colors.length;
for ( var i = 0; i < li.length; i++ ) {
li[i].style.backgroundColor = colors[ i % colorsCount ]; // why does this work?
}

Since there is (potentially) a larger number of items in the li array, this prevents i from being outside the bounds of the colors array, since i % colorsCount can never be over colorsCount.
For example, if we had 10 elements in li, and 5 colors, i % colorsCount would be:
i i % colorsCount Color
-------------------------------
0 0 salmon
1 1 teal
2 2 orange
3 3 grey
4 4 blue
5 0 salmon
6 1 teal
7 2 orange
8 3 grey
9 4 blue
More Information on Modulo Operations.

i % colorsCount will set the bound of the index to be between 0 and colorsCount-1, thus ensuring you never index past the end of the array.
Since mod is the remainder, the remainder can never be greater than the divisor (which in this case, is the length of the array).

Perhaps this snippet may help you understand:
var s = ''
for (var i = 0; i < 20; i ++) {
s += (i % 5) + ', '
}
console.log(s)
The result is:
0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4,
Note how the number resets to 0 every time it reaches 5. The % colors.length just makes sure the index never goes above the array's length.
A more descriptive way of understanding:
0 % 5: 0/5 = 0, remainder 0
1 % 5: 1/5 = 1/5, remainder 1
...
5 % 5: 5/5 = 1, remainder 0
6 % 5: 6/5 = 1 1/5, remainder 1
7 % 5: 7/5 = 1 2/5, remainder 2
...

It's cycling your colours. Because you only have a limited number of colours, and any number of possible list items, it makes sure that i will not overflow the bounds of your colors array.

The modulus operator returns the remainder of division. It allows you to loop through and reuse the colors array even though there are potentially less colors in the array than there are elements in your list to color.
If length is say 8,
5 % 1 == (5 / 1) = 0 remainder 1
5 % 2 == (5 / 2) = 0 remainder 2
5 % 3 == (5 / 3) = 0 remainder 3
5 % 4 == (5 / 4) = 0 remainder 4
5 % 5 == (5 / 5) = 1 remainder 0
5 % 6 == (5 / 6) = 1 remainder 1
5 % 8 == (5 / 7) = 1 remainder 2
5 % 7 == (5 / 8) = 1 remainder 3
As you can see, the remainders are what's returned by the mod operator, and they're always less than the length of the colors array.

why does i % colorsCount work?
What it does
This code cycles through colors. It does so using the modulus operator to ensure you're always within the bounds of the array.
How it does it
Modulus operation finds the remainder of division of one number by another.
In your case by taking i modulus the colorsCount:
0 % 5; // 0
1 % 5; // 1
1 % 5; // 2
3 % 5; // 3
4 % 5; // 4
5 % 5; // 0
8 % 5; // 3

The result of a modulus operation is the remainder after division of the left operand by the right operand.
So the line of code in question will always return some number between 0 and colorsCount-1.

You iterate from 0 until how many li elements you have. For this example, say 10.
You then look at the colors array and find the element for that iteration (i) and modulus by how many items are in the colors array.
In short, this is what's happening:
var colorsCount = 10;
1 % 10 = 1 // ... Access colors[1]; (teal)
2 % 10 = 2 // .... Access colors[2]; (orange)
3 % 10 = 3 // .... Access colors[3]; (grey)
4 % 10 = 4 // .... Access colors[4]; (blue)
5 % 10 = 5 // .... Access colors[5];
etc
If you are wondering why it will never access an element outside of the array, the answer is because as i becomes greater, the result becomes smaller.
For example, take iteration 8:
8 % 5 = 3
(Iteration 8, 5 elements in the array)
Therefore you are accessing colors[3];