Why is chrome inspector showing one thing for an array but another when expanded | Vanilla JS

Question

I am struggling to understand why the inspector is changing what its logging when I expand an array or object:

let newTeamArray = [...teams]; // teams = {randomTeamObject, "Fill"}
let teamList1 = [];
let teamList2 = [];

for(let x = 0; x < newTeamArray.length; x++) {
    if(x < (newTeamArray.length/2)) {
        console.log("Push to 1")

        console.log(newTeamArray[x])
        teamList1.push(newTeamArray[x]);
    } else {
        console.log("Push to 2")

        console.log(newTeamArray[x])
        teamList2.push(newTeamArray[x])
    }
}

console.log(teamList1)
console.log(teamList2)

This gives me:

Can anyone explain why the expanded versions of the last two console.log() commands are different when expanded. Directly after this if I call teamList1[0] its undefined as the inspector shows.

Edit: The array called “teams” is always an even length array. “Fill” is added to the array if it is an odd length. Given that this array only has the one object, fill was added. This happens prior to the code above. My objective is just to split the even array into two arrays the same size called teamList1 & teamList2

Answer 1

As Kel answered, chrome inspector actis in an async or lazy manor. The code following was doing push/pop operations between the two arrays. I was removing the only object for the second array to a static variable. then as i rotated the elements between the two arrays teamList2 was empty and couldnt transfer any of its elements to the first array. Below is the code that was causing the issue:

function makeSeasonForComp(teams) {
    let season = [];
    let newTeamArray = [...teams];
    let teamList1 = [];
    let teamList2 = [];
    let statcTeam;

    console.log(teams)

    for(let x = 0; x < newTeamArray.length; x++) {
        if(x < (newTeamArray.length/2)) {
            console.log("Push to 1")

            console.log(newTeamArray[x])
            teamList1.push(newTeamArray[x]);
        } else {
            console.log("Push to 2")

            console.log(newTeamArray[x])
            teamList2.push(newTeamArray[x])
        }
    }

    statcTeam = teamList2.pop();

    for(let i = 0; i < SEASONLENGTH; i++) {
        let games = [];
        if(teamList1.length > 0) {
            for(let j = 0; j < teamList1.length; j++) {
                let game = [];
                if (j === 0) {
                    if(teamList1[0] === "fill") {
                        game.push(teamList1[0])
                    } else {
                        game.push(teamList1[0].uid)
                    }
                    game.push(statcTeam);
                    game.push(uuidv4())
                } else {
                    if(teamList1[j] === "fill") {
                        game.push(teamList1[j])
                    } else {
                        game.push(teamList1[j].uid)
                    }

                    if(teamList2[j - 1] === "fill") {
                        game.push(teamList2[j - 1])
                    } else {
                        game.push(teamList2[j - 1].uid)
                    }
                    game.push(uuidv4())
                }
                games.push(game);
            }
            if(teamList2.length > 0) { // This line fixed my issue
                let endList1 = teamList1.pop();
                let startList2 = teamList2.shift();

                teamList2.push(endList1);
                teamList1.unshift(startList2);
            }
        }

        season.push(games);
    }

I was popping the only element I had in the teamList2 making the proceeding pop operation return undefined on that array.

Checking my teamList2 had elements in it before rotating the arrays fixed my issue.

Thanks!

Answer 2

There have been answers to similar questions here and here.
Essentially the object printed to the console is "lazily" evaluated when you expand the object, so if a reference to that same object somewhere else in the code makes a change to the object, the values you see in the console upon expanding the object will reflect that change. This is assuming you're using the Chrome debugger which your screenshot looks like.