Roman Numeral problem (renewed)

[Freds]

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 and use an app other than Codepen (such as Brackets) together with the web console in either Firefox or Google, it returns the completed array for each and all of my console.log statements. This is not what I expected. Instead, I expected the console logs to return the partial array showing the array being formed.

In contrast, when I run the same code in Codepen with link:

Romantrouble

the web console in Codepen shows the array being populated, which is what I would expect, but this behaves different from using a non-Codepen app such as Brackets together with a web console in Firefox or Chrome.

Could someone please explain 1) why does the web console in Firefox and Chrome behave this way?
and 2) Why does the web console in Firefox and Chrome behave differently than the web console in 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);

[DanCouper]

The output is exactly the same??

[JM-Mendez]

Ok, what you’re witnessing is a closure problem since you declared your variables using var. And since console.log is a function, it will only have access to the global romarr when the loop finishes.

Why codepen’s console is different is due to their code. I think they hijack the console rather than show the actual log.

I explained closures in this other response. Closures are a complicated topic, so if that answer doesn’t work for you, tell me what I didn’t make clear.

Function inside for loop

This is due to closures. Essentially in javascript, unlike other languages, functions have access to anything in their scope after they return. So what happens when you use var is that the variable is bound to the global scope, and every function has access to it. When we finally call printNumTwo, it still can only access the global i at the moment you call it, which will be 3, since the loop ends when it reaches 3. I find it helps me to walk through how the js engine runs this code, line by…

[Freds]

Thanks JM Mendwz, I think progress is finally being made!

Nevertheless, I disagree with your assertion that my variable array romarr is global. Instead, I have declared var romarr within the function convertToRoman, and therefore is not global, but is instead local.
See for example:
https://www.w3schools.com/js/js_scope.asp

which(i.e. the above link) emphasizes that a variable declared within a function is local and not global.

On the positive side, it is kindly noted that if I were to declare romarr using a let instead of a var and declare it within the function, the problem goes away and my console.logs show the array being populated when Brackets (and not Codepen) is used and when the web console of Firefox or Chrome is used (as opposed to the web console within Codepen).

Likewise, when I move var romarr outside the function, the problem also goes away.

[JM-Mendez]

@Freds

Nevertheless, I disagree with your assertion that my variable array romarr is global. Instead, I have declared var romarr within the function convertToRoman, and therefore is not global, but is instead local.

I meant global within it’s execution context, which is the function. All the vars inside the function are global within that function. That includes those in the for loop.

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.
var - JavaScript | MDN

Whereas let and const are scoped to the block, keeping them inside for loops as well

The let statement declares a block scope local variable, optionally initializing it to a value.
let - JavaScript | MDN

Constants are block-scoped, much like variables defined using the let statement.
const - JavaScript | MDN

This is due to vars being hoisted to the top of their scope. let and const aren’t hoisted.

The same goes for declaring functions. Regular functions are hoisted to the top of their scope, whereas let and const declarations aren’t.

My bad for not being clearer. I can see why that verbiage can cause confusion.