I am trying to implement a loop with JavaScript and I found something very odd.
The issue is that the site crashes evaluating the for/while condition when is about to turn false. I couldn’t figure the issue out debugging so I tried with a for and a while, both crashes. Then I tried in Safari because this was really odd, and it didn’t crash at all, just Chrome based browsers crashes here.
Anyway, I bet there is something I am missing, I believe a simple for mustn’t break the page.
let’s say the method is invoked with:
const fromIndex = 9;
const toIndex = 8;
In this example the execution goes to the first for and it crashes evaluating the boolean condition when i = 7 and i <= maxIndex it’s false.
Before I implemented this two for to see if I can find the issue I had a while based implementation crashing the same way:
while ((i >= startIndex && i <= endIndex) || (i >= endIndex && i <= startIndex)) {
result.push(systems[i]);
direction === "forwards" ? i++ : i--;
}
const fromIndex = 9;
const toIndex = 8;
const direction = fromIndex < toIndex ? "forwards" : "backwards";
const minIndex = Math.min(fromIndex, toIndex);
const maxIndex = Math.max(fromIndex, toIndex);
const systems = [
"earth",
"mercury",
"mars",
"venus",
"saturn",
"jupiter",
"uranus",
"neptune",
"pluto",
"extra"
];
const result = [];
if (direction === "forwards") {
for (let i = minIndex + 1; i <= maxIndex; i++) {
result.push(systems[i]);
}
} else {
for (let i = maxIndex - 1; i >= minIndex; i--) {
result.push(systems[i]);
}
}
console.log(result);Full function snippet:
simulateClicks(9, 5);
function simulateClicks(fromPlanetIndex, toPlanetIndex) {
const direction = fromPlanetIndex < toPlanetIndex ? 'forwards' : 'backwards';
const minIndex = Math.min(fromPlanetIndex, toPlanetIndex);
const maxIndex = Math.max(fromPlanetIndex, toPlanetIndex);
const startIndex = direction === 'forwards' ? minIndex + 1 : maxIndex - 1;
const endIndex = direction === 'forwards' ? maxIndex : minIndex;
const systems = [
'earth', // 0
'mercury', // 1
'mars', // 2
'venus', // 3
'saturn', // 4
'jupiter', // 5
'uranus', // 6
'neptune', // 7
'pluto', // 8
'extra' // 9
]
console.log('Stariting point:t', fromPlanetIndex, '-', toPlanetIndex);
console.log('systems:tt', JSON.stringify(systems));
console.log('Direction:tt', direction);
console.log('Min-max indexes:t', minIndex, '-', maxIndex);
console.log('start-end indexes:t', startIndex, '-', endIndex);
const systemPlanets = [];
if (direction === 'forwards') {
for (let i = minIndex + 1; i <= maxIndex; i++) {
systemPlanets.push(systems[i]);
console.log('Added:', systems[i],'ti:', i,', i <= maxIndex:', i <= maxIndex);
}
} else {
for (let i = maxIndex - 1; i >= minIndex; i--) {
systemPlanets.push(systems[i]);
console.log('Added:', systems[i],'ti:', i,', i >= minIndex:', i >= minIndex);
}
}
console.log('result: ', JSON.stringify(systemPlanets));
}.as-console-wrapper { max-height:100% !important; top:0; }
.as-console-wrapper { max-height:100% !important; top:0; left:0 !important; width:100%; }I made this codepen to try the issue, it does not crash: https://codepen.io/nebue/pen/raBMKad?editors=0010 (snippet below)
const systems = [
"earth",
"mercury",
"mars",
"venus",
"saturn",
"jupiter",
"uranus",
"neptune",
"pluto",
"extra"
];
const systemPlanets = [];
const direction = "forwards";
const minIndex = Math.min(5, 9);
const maxIndex = Math.max(5, 9);
const startIndex = direction === "forwards" ? minIndex + 1 : maxIndex - 1;
const endIndex = direction === "forwards" ? maxIndex : minIndex;
let i = startIndex;
while (
(i >= startIndex && i <= endIndex) ||
(i >= endIndex && i <= startIndex)
) {
systemPlanets.push(systems[i]);
direction === "forwards" ? i++ : i--;
}
console.log(systemPlanets);10