Roman Numeral challenge problem

JavaScript
1

I just wrote the code below where I form the Roman numeral array by first pushing the M’s, then the D’s etc and the last to be pushed is I’s.

However, after pushing the M’s and before adding anything else to the Roman numeral array, when I console.log the array in either Firefox or Google, it returns the completed array instead of an array that only contains M’s.

However in Codepen (https://codepen.io/pen/?editors=1112), the console.log after the pushing of the M’s shows only the M’s present in the array.

Could someone please explain 1) why does Firefox and Chrome behave this way?
and 2) Why does Firefox and Chrome behave differently than Codepen?

The Javascript code is:

function convertToRoman(num) { 
   var singles = num % 5;
    var fives = Math.floor((num % 10) / 5);
    var tens = Math.floor((num % 50) / 10);
    var fifties = Math.floor((num % 100) / 50);
    var hundreds = Math.floor((num % 500) / 100);
    var fivehunds = Math.floor((num % 1000) / 500);
    var thousands = Math.floor((num) / 1000);
    
    console.log("the singles count is: ", singles);
    console.log("the fives count is: ", fives);
    console.log("the tens count is: ", tens);
    console.log("the fifties count is: ", fifties);
    console.log("the hundreds count is: ", hundreds);
    console.log("the fivehunds count is: ", fivehunds);
    console.log("the thousands count is: ", thousands);
    
    var romarr = [];
    
    for (var m = 1; m <= thousands; m++) {
         romarr.push("M");
           }
   console.log("1000's array is: ", romarr);
 // Why is the completed array displayed instead of the array with M's only????   
    if (fivehunds == 1) {
         romarr.push("D");
     }   
    console.log("500's array is: ", romarr);        
   
    for (var k = 1; k <= hundreds; k++) {
        romarr.push("C");
                    }
    console.log("100's array is: ", romarr);
    
     if (fifties == 1) {
         romarr.push("L");
     }   
    console.log("50's array is: ", romarr);
    
    for (var j = 1; j <= tens; j++) {
        romarr.push("X");
                    }
    console.log("10's array is: ", romarr);
    if (fives == 1) {
         romarr.push("V");
     } 
     console.log("5's array is: ", romarr);
for (var i = 1; i <= singles; i++) {
        romarr.push("I");
                    }
console.log("final array is: ", romarr);


        
    
num = romarr.join("");
console.log("the joined array is: ", num);
return num;
}
   convertToRoman(1023);

As I said, in Firefox and Chrome (but not CodePen), the console.log shows the following:
the singles count is: 3
app.js:10:5
the fives count is: 0
app.js:11:5
the tens count is: 2
app.js:12:5
the fifties count is: 0
app.js:13:5
the hundreds count is: 0
app.js:14:5
the fivehunds count is: 0
app.js:15:5
the thousands count is: 1
app.js:16:5
1000’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:23:4
500’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:28:5
100’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:33:5
50’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:38:5
10’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:43:5
5’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:47:6
final array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:51:1
the joined array is: MXXIII

Why does Firefox and Chrome behave this way?
Why does Firefox and Chrome behave differently than Codepen?

4

Freds,
I am not sure what is going on with your console. I copied your code into codepen and compared both the in-application console in codepen with the browsers console in firefox and it is returning the correct state of the array with each push:

the singles count is:  4

the fives count is:  0

the tens count is:  2

the fifties count is:  0

the hundreds count is:  0

the fivehunds count is:  0

the thousands count is:  1

1000's array is:  
Array [ "M" ]

500's array is:  
Array [ "M" ]

100's array is:  
Array [ "M" ]

50's array is:  
Array [ "M" ]

10's array is:  
Array(3) [ "M", "X", "X" ]

5's array is:  
Array(3) [ "M", "X", "X" ]

final array is:  
Array(7) [ "M", "X", "X", "I", "I", "I", "I" ]

the joined array is:  MXXIIII

Also, I am not sure if you have completed your function or not, but it will not give the correct result for numbers like 1024 (MXXIV) or 90(XC) because this function doesn’t take in consideration subtracting numerals from one another to achieve the correct result.

5

The Codepen link is https://codepen.io/smithfred0439/pen/YLmXgL?editors=1112

Sorry for the mixup, but I failed to save my previous Codepen file and thus posted a bogus link in my original post,

Let me try to clarify my question, as of now it is still unanswered. Sorry I wasn’t clear the first time.

To begin with, InfiniteSet got the result I expected when Codepen and Codepen’s console is used.

However, if another application, like Brackets is used instead of Codepen, the web console in either Firefox and Chrome does not show the array being populated as in Codepen (and as I intended), but instead shows the array fully populated for each console.log.

I do not understand why it shows the completed array when Brackets (and thus Firefox’s or Chrome’s web console) is used, because I have not pushed onto the array the I’s til the end after many of the console.log statements. As a result, the program does not seem to be synchronous when Brackets (together with the Firefox or Chrome console) is used, and the result does not match Codepen’s.

Regarding the subtracting that InfiniteSet pointed out to express a 4 or a 9 digit in Roman numerals, I am aware of this deficiency.

My concern is I do not understand why the completed array is only shown for each console.log statement when Brackets is used (together with the Firefpx or Chrome console) as opposed to when Codepen is used (together with the Codepen console).