Resetting an array after a loop

Question

I've written some JavaScript function (selectMeal) to loop 7 times randomly selecting 1 item from an array (tempMealList) then push the item to another Array (dinnersPicked). Once the items been added to the new array (dinnersPicked) it's then removed from the original array (tempMealList) to avoid it from being selected again.

In the console, each run of this function (selectMeal) yields no issue, but when I trigger the function on a button click in HTML, each time the buttons clicked the array being used seems to be permanently altered, with the items randomly selected on the first run of the function not being considered on the second click and similarly for any successive click, any item previously shown is not considered.

I've tried to resolve this in the function by redefining the variables at the start of the function to reset the array being considered on each click but this doesn't seem to work.

What am I doing wrong and how can I make sure that with every click the original array is considered?

Here is the code:

    //Meal objects
let a = {Food:'Chicken and leek', Link: 'null', Difficulty: 'Easy'};
let b = {Food:'Spaghetti Bolognese', Link: 'null', Difficulty: 'Medium'};
let c = {Food:'Lasagna', Link: 'null', Difficulty: 'Medium'};
let d = {Food:'Roast lamb', Link: 'null', Difficulty: 'Hard'};
let e = {Food:'Roast chicken', Link: 'null', Difficulty: 'Hard'};
let f = {Food:'Fajitas', Link: 'null', Difficulty: 'Easy'};
let g = {Food:'Tortilla pizza', Link: 'null', Difficulty: 'Easy'};
let h = {Food:'Spaghetti Carbonara', Link: 'null', Difficulty: 'Easy'};
let i = {Food:'Chicken salad', Link: 'null', Difficulty: 'Easy'};
let j = {Food:'Pies and mash', Link: 'null', Difficulty: 'Easy'};
let k = {Food:'BBQ', Link: 'null', Difficulty: 'Medium'};
let l = {Food:'Lamb chops and potatoes', Link: 'null', Difficulty: 'Medium'};
let m = {Food:'Takeaway', Link: 'null', Difficulty: 'Easy'};
let n = {Food:'Beans on toast', Link: 'null', Difficulty: 'Easy'};
let o = {Food:'Sausage and mash', Link: 'null', Difficulty: 'Easy'};
let p = {Food:'Stir fry', Link: 'null', Difficulty: 'Medium'};
let q = {Food:'Seasoned Chicken and rice', Link: 'null', Difficulty: 'Easy'};
let r = {Food:'Shepards Pie', Link: 'null', Difficulty: 'Hard'};
let s = {Food:'Beef nachos', Link: 'null', Difficulty: 'Medium'};
let t = {Food:'Burgers', Link: 'null', Difficulty: 'Easy'};
let u = {Food:'Jacket potato', Link: 'null', Difficulty: 'Easy'};
let v = {Food:'Chicken curry', Link: 'null', Difficulty: 'Medium'};
let w = {Food:'Chicken enchiladas', Link: 'null', Difficulty: 'Medium'};
let x = {Food:'Pasta bake', Link: 'null', Difficulty: 'Medium'};
let y = {Food:'Chicken bake', Link: 'null', Difficulty: 'Hard'};
let z = {Food:'Chilli Con Carne', Link: 'null', Difficulty: 'Easy'};

//Array for meals 
const mealList = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];


//Array to store the dinners chosen
let dinnersPicked = [];

//Function for selecting the meals
const selectMeal = () => {

dinnersPicked = [];
let tempMealList = mealList;

for (i=0; i<7; i++) {
  randomMeal = tempMealList[Math.floor(Math.random() * tempMealList.length)];
  dinnersPicked.push(randomMeal);
  const index = tempMealList.indexOf(randomMeal);
  tempMealList.splice(index,1)
};

showMeals(dinnersPicked);
};

const showMeals = (dinnersPicked) => {
//Monday
  document.getElementById('monFood').innerHTML = dinnersPicked[0].Food;
  document.getElementById('monFood').setAttribute('href', dinnersPicked[0].Link);
  document.getElementById('monDifficulty').innerHTML = dinnersPicked[0].Difficulty;
//Tuesday
  document.getElementById('tueFood').innerHTML = dinnersPicked[1].Food;
  document.getElementById('tueFood').setAttribute('href', dinnersPicked[1].Link);
  document.getElementById('tueDifficulty').innerHTML = dinnersPicked[1].Difficulty;
//Wednesday
  document.getElementById('wedFood').innerHTML = dinnersPicked[2].Food;
  document.getElementById('wedFood').setAttribute('href', dinnersPicked[2].Link);
  document.getElementById('wedDifficulty').innerHTML = dinnersPicked[2].Difficulty;
//Thursday
  document.getElementById('thuFood').innerHTML = dinnersPicked[3].Food;
  document.getElementById('thuFood').setAttribute('href', dinnersPicked[3].Link);
  document.getElementById('thuDifficulty').innerHTML = dinnersPicked[3].Difficulty;
//Friday
  document.getElementById('friFood').innerHTML = dinnersPicked[4].Food;
  document.getElementById('friFood').setAttribute('href', dinnersPicked[4].Link);
  document.getElementById('friDifficulty').innerHTML = dinnersPicked[4].Difficulty;
//Saturday
  document.getElementById('satFood').innerHTML = dinnersPicked[5].Food;
  document.getElementById('satFood').setAttribute('href', dinnersPicked[5].Link);
  document.getElementById('satDifficulty').innerHTML = dinnersPicked[5].Difficulty;
//Sunday
  document.getElementById('sunFood').innerHTML = dinnersPicked[6].Food;
  document.getElementById('sunFood').setAttribute('href', dinnersPicked[6].Link);
  document.getElementById('sunDifficulty').innerHTML = dinnersPicked[6].Difficulty;
};

For reference (and I don't think this makes a difference...) this is how the function is triggered from the HTML:

<div class='button -dark center' onclick="selectMeal()">Click for random meals</div>

Answer 1

When you do let tempMealList = mealList; those two variables are now pointing to the same array. So when you do tempMealList.splice(index,1) you are also modifying mealList.

Try let tempMealList = [...mealList]; instead to make a copy.