having a javascript circular reference issue

Question

I have a function createminor4(arr, tourney) it basically splits arr into 4 groups of 8 and swaps them into tourney 1 group at a time. from there it pushes into the four{} which has 4 keys with empty arrays.

I've stepped through it in chrome and after the first group pushes correctly the next group overwrites the previous one even though I am pushing to different keys in the four{}. I am ending up with a circular reference and don't understand what I am doing wrong.

*The createMinor4() should return: four { "A":[["Lava Lamps", ..."shooters"],["a", "b"],["c", "d"],["e", "f"],["g"]], "B":[["Yellow Dragons", ... "water pistols"],["a", "b"],["c", "d"],["e", "f"],["g"]], "C":[["Snakes", ... "Hawks"],["a", "b"],["c", "d"],["e", "f"],["g"]], "D":[["Gamers", ... "worms"],["a", "b"],["c", "d"],["e", "f"],["g"]]}

let players4 = [
  "Lava Lamps", "Jarheads", "Cloud Gazerz", "Cobras", "Red Ravens", "Leaders", "Destroyers", "shooters",
  "Yellow Dragons", "Whales", "fearwolves", "Hitters", "red rebels", "Knights", "cute gremlins", "water pistols",
  "Snakes", "Ravens", "Chariots-of-Hell", "Predators", "Assassins", "Gladiators", "Broncos", "Hawks",
  "Gamers", "Slickers", "Freeze", "Rabbits", "Holy Rollers", "Crusaders", "FireHawks", "Worms"
]
let minorTourny = [
  ["t1", "t2"],
  ["t3", "t4"],
  ["t5", "t6"],
  ["t7", "t8"],
  ["a", "b"],
  ["c", "d"],
  ["e", "f"],
  ["g"]
];

function createMinor4(arr, tourney) {
  let q = arr.length * .25;
  let s = 0;
  let p = 1;
  let g = 4;
  let x = 0;
  let y = 0;
  let z = 0;

  let four = {
    "A": [],
    "B": [],
    "C": [],
    "D": []
  }
  //while 4 > 0
  while (g > s) {
    do {
      let loadTeam = tourney[x].splice(y, 1, arr[z]);
      if (z === 0) {
        loadTeam;
        y++;
      } else if (z % 2 == 0) {
        loadTeam;
        y = 1;
      } else if (z % 2 !== 0) {
        loadTeam;
        y = 0;
        x++;
      }
      z++;
    }
    while (z < q) // while 0 < 8
    if (g === 4) {
      four.A.push(tourney);
    } else if (g === 3) {
      four.B.push(tourney);
    } else if (g === 2) {
      four.C.push(tourney);
    } else if (g === 1) {
      four.D.push(tourney);
    }
    arr.splice(0, q)
    g--;
    p++;
    z = 0;
    x = 0;
    y = 0;
  }
  return four
}
console.log(createMinor4(players4, minorTourny))

Answer 1

When you use splice on Array it will also change original Array that is why you players4 and minorTourny are not same after createMinor4 function call
You can use Deep copy
When you use deep copy it will no longer have reference of original Array
What is the most efficient way to deep clone an object in JavaScript?

let players4 = [
  "Lava Lamps", "Jarheads", "Cloud Gazerz", "Cobras", "Red Ravens", "Leaders", "Destroyers", "shooters",
  "Yellow Dragons", "Whales", "fearwolves", "Hitters", "red rebels", "Knights", "cute gremlins", "water pistols",
  "Snakes", "Ravens", "Chariots-of-Hell", "Predators", "Assassins", "Gladiators", "Broncos", "Hawks",
  "Gamers", "Slickers", "Freeze", "Rabbits", "Holy Rollers", "Crusaders", "FireHawks", "Worms"
]
let minorTourny = [
  ["t1", "t2"],
  ["t3", "t4"],
  ["t5", "t6"],
  ["t7", "t8"],
  ["a", "b"],
  ["c", "d"],
  ["e", "f"],
  ["g"]
];

function createMinor4(_arr, _tourney) {
  const arr = JSON.parse(JSON.stringify(_arr)); // Use Deep copy
  const tourney = JSON.parse(JSON.stringify(_tourney)); // Use Deep copy
  let q = arr.length * .25;
  let s = 0;
  let p = 1;
  let g = 4;
  let x = 0;
  let y = 0;
  let z = 0;

  let four = {
    "A": [],
    "B": [],
    "C": [],
    "D": []
  }
  //while 4 > 0
  while (g > s) {
    do {
      let loadTeam = tourney[x].splice(y, 1, arr[z]);
      if (z === 0) {
        loadTeam;
        y++;
      } else if (z % 2 == 0) {
        loadTeam;
        y = 1;
      } else if (z % 2 !== 0) {
        loadTeam;
        y = 0;
        x++;
      }
      z++;
    }
    while (z < q) // while 0 < 8
    if (g === 4) {
      four.A.push(tourney);
    } else if (g === 3) {
      four.B.push(tourney);
    } else if (g === 2) {
      four.C.push(tourney);
    } else if (g === 1) {
      four.D.push(tourney);
    }
    arr.splice(0, q)
    g--;
    p++;
    z = 0;
    x = 0;
    y = 0;
  }
  return four
}
console.log(createMinor4(players4, minorTourny))