Strange behaviour at debugging function parameter

Hello anybody can tell me why when I paste the following code in the console. The console logged parameter “cid” is differente from the one original introduced when calling the function. The logging line is exactly the first line, so the array (“cid”) has not been modified yet

function checkCashRegister(price, cash, cid) {
    
 console.log("cid: ",cid);
    
    let currencyUnit = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
    let cidInverted = cid.slice().reverse();
    let rest = Math.round((cash - price) * 100) / 100;
   

    let calculateMoney = function (arr) {
        let acumulative = 0;
        arr.forEach(x => acumulative += x[1])
        return acumulative;
    }
    if (calculateMoney(cid) < rest) return {status: "INSUFFICIENT_FUNDS", change: []};

    let temp;
    cidInverted.forEach((x, y) => {
        temp = 0;
        let counter = 0;
        let rest2 = rest;
        while ((x[1] / currencyUnit[y] >= 1) && currencyUnit[y] <= rest2) {
            rest2 = Math.round((rest - currencyUnit[y]) * 100) / 100;
            temp++;
            x[1] = x[1] - currencyUnit[y];
        }

        temp > 0 ? temp++ : 0;
        cidInverted[y][1] = (temp * currencyUnit[y]);
    })

    if (calculateMoney(cidInverted) == rest) {
        return {status: "CLOSED", change: [...cid]};
    }

    if (calculateMoney(cidInverted) < rest) {
        return {status: "INSUFFICIENT_FUNDS", change: []};
    }
}

checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])

In the log console I get:
image

Which is completely different from the original one. Restarting the browser do not fix the problem. If I try my code in https://playcode.io/ I do get the same array entered as function parameter

I don’t have time to try this, but this sounds like something I’ve run into before.

console.log is not synchronous. Your program dispatches the information to the console API and moves on. In this case, you are sending it a reference, a memory address. By the time console.log does its thing, the data at that memory location has already been updated - your program is faster than console.log.

Yes, that’s a little weird. Yes, most people don’t expect it to work that way. But, if you think about it and understand what is happening, it kind of makes sense.

So, how do you get what you originally wanted? You need to capture the values that you want.

If it were an array of primitives, you could do:

console.log([...cid]);

But for a more complex array/object, you have to create a deep copy. You can use lodash’s cloneDeep, or you can just do something quick and dirty like:

console.log(JSON.parse(JSON.stringify(cid)));

It’s mentioned in the console.log MDN article as well.

Logging objects

Don’t use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).

This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change. This may not be what you want.

There can also be a difference between the expanded and unexpanded log. You will see a small icon, which if you hover on, the tooltip says “Value below was evaluated just now”.

expanded

There may even be inconsistencies between browsers.



1 Like

Thanks guys, using console.log(JSON.parse(JSON.stringify(cid))); fixed my issue
Good articles about the console lasjorg, thanks for sharing.
Regards