Random sort array

Question

I am trying to shuffle the original deck of cards, then subtract 2 cards from the shuffled deck, being player one's cards. Then before I move to player 2, I would like to shuffle the cards again, whose length should be at 50(52-2). The second player I will repeat the process(50-2).

Notice the order of the third console log array before uncommenting the fourth console log and freshDeck__01 in the JavaScript. The order is good before uncommenting. I want that order, and then to shuffle.

 let playerone = document.querySelector(".dealItP1");
 let playertwo = document.querySelector(".dealItP2");
 let playerthree = document.querySelector(".dealItP3");
 let playerfour = document.querySelector(".dealItP4");

 let deck = ["2 Club","2 Spade","2 Diamond","2 Heart","3 Club","3 Spade","3 Diamond","3 Heart","4 Club","4 Spade","4 Diamond","4 Heart","5 Club","5 Spade","5 Diamond","5 Heart","6 Club","6 Spade","6 Diamond","6 Heart","7 Club","7 Spade","7 Diamond","7 Heart","8 Club","8 Spade","8 Diamond","8 Heart","9 Club","9 Spade","9 Diamond","9 Heart","10 Club","10 Spade","10 Diamond","10 Heart","Jack Club","Jack Spade","Jack Diamond","Jack Heart","Queen Club","Queen Spade","Queen Diamond","Queen Heart","King Club","King Spade","King Diamond","King Heart","Ace Club","Ace Spade","Ace Diamond","Ace Heart"];

let originaldeck = [...deck];
 
 
 function dealIt(){
  
  
 

  
 function shuffle(deck) {
  var currentIndex = deck.length, temporaryValue, randomIndex;

  
  while (0 !== currentIndex) {

    
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    
    temporaryValue = deck[currentIndex];
    deck[currentIndex] = deck[randomIndex];
    deck[randomIndex] = temporaryValue;
  }

  return deck;
}
  
  
  
  
  
  


var arr = deck;     

let freshDeck_00 = shuffle(arr); //length = 52 *Working* shuffled//
  
  
  
let p1Deal = freshDeck_00.filter(function(value, index, arr){return index < 2;}); //length=2 *Working* PlayerOne delt cards//
  
 
 
  let loadedDeck_00 = freshDeck_00.filter(x => !p1Deal.includes(x)).concat(p1Deal.filter(x => !freshDeck_00.includes(x)));   
  //length = 50 *Working* Symmetrical Difference between p1Deal and freshdeck_00 set to loadedDeck_00 ready to be shuffled again//
  
  
  playerone.innerHTML= p1Deal;
  
 // let freshDeck_01 = shuffle(loadedDeck_00);// 
  
 //*IMPORTANT* WORKING UP TO THIS POINT WITH THE THRE CONSOLE LOGS, BUT WHEN UNCOMMENTING FRESHDECK_01 AND FORTH CONSOLE LOG, NOTICE THE DIFFERENCE IN ORDER OF LOADEDDECK__00(THIRD CONSOLE LOG)//
  
  
  console.log(freshDeck_00);
  console.log(p1Deal);
  console.log(loadedDeck_00);
  //console.log(freshDeck_01);//
  
 
  
 }
 

.main{
 box-sizing: border-box;
 border: 3px solid green;
 height: 1000px;
 width: 1000px;
 position: absolute;
 background-color: black;
 
 
}
.title{
 box-sizing: border-box;
 border: 3px green solid;
 height: 100px;
 width: 200px;
 position: absolute;
 top: 10%;
 left: 50%;
 background-color: green;
 opacity: .2;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300;
}
.P1{
 box-sizing: border-box;
 border: 3px green solid;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 30%;
 left: 45%;
 background-color: green;
 opacity: .5;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300;
 color: red;
}
.P2{
 box-sizing: border-box;
 border: 3px green solid;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 45%;
 left: 10%;
 background-color: green;
 opacity: .5;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300;
 color: red;
}
.P3{
 box-sizing: border-box;
 border: 3px green solid;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 60%;
 left: 45%;
 background-color: green;
 opacity: .5;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300;
 color: red;
}
.P4{
 box-sizing: border-box;
 border: 3px green solid;
 height: 100px;
 width: 100px;
 position: absolute;
 top: 45%;
 left: 80%;
 background-color: green;
 opacity: .5;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300;
 color: red;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="pokerTryOne.css" rel="stylesheet" type="text/css">
</head>

<body>
 
 <div class="main">
 
 <header><h1 class="title"><button onClick="dealIt()">Click Button to Deal</button></h1></header>
   <div class="P1"><p>Pot:</p><div class="dealItP1"></div></div>
   <div class="P2"><p>Pot:</p><div class="dealItP2"></div></div>
   <div class="P3"><p>Pot:</p><div class="dealItP3"></div></div>
   <div class="P4"><p>Pot:</p><div class="dealItP4"></div></div>
  <div class="dealBet"></div>
  <div class="flopIt"></div>
  <div class="flopBet"></div>
  <div class="turnIt"></div>
  <div class="turnBet"></div>
  <div class="riverIt"></div>
  <div class="riverBet"></div> 
 </div>
<script type="text/javascript" src="pokerTryOne.js"></script>
</body>
</html>

Answer 1

when I wanted to reassign freshdeck_01 by randomizing it again I receive the same array as before.

No you do not receive an array that is ordered the same way as before.

The issue here is that Array.prototype.sort() sorts the array in-place. This means that you are shuffling your original array freshdeck_01 and then assigning a reference to that very same (now shuffled) array to another variable freshdeck_01_fresh. If you actually inspect your array before running your shuffling function, you will see that the order gets changed:

let deck = [1,2,3,4,5,6,7,8]
console.log(deck);
deck.sort(function(a, b){return 0.5 - Math.random()});
console.log(deck);

If you need to keep a copy of your unshuffled array, you can use a decomposing assignment [...x] to do that. Simple assignment would not work, as it would only create a reference to the same array.

let deck = [1,2,3,4,5,6,7,8]
let copyOfOrigDeck = [...deck];
let notASeparateCopy = deck;

console.log(deck);
deck.sort(function(a, b){return 0.5 - Math.random()});
console.log('unshuffled: ' + copyOfOrigDeck);
console.log('shuffled: ' + deck);
console.log('notASeparateCopy: ' + notASeparateCopy);

All that being said, there are probably better ways to shuffle array elements than your approach. I am no expert in that field, so I will leave that research up to you.

Answer 2

const numbers = [1,2,3,4,5,6,7,8,9,10]
// Returns a random value from a list.
const sampleFromList = list => list[Math.floor(Math.random() * list.length)]

const shuffle = (
  list,
  // Creates an array with every index of the original list.
  availableIndexes = [...list].map((n, i) => i),
  shuffledList = [],
) => {
  // Asks for a random index from the whitelist of available indexes.
  const availableIndex = sampleFromList(availableIndexes)

  // Adds the value of what's in the original list in the random whitelisted index.
  shuffledList = [...shuffledList, list[availableIndex]]
  // Filters out the used index, so is not used again.
  availableIndexes = availableIndexes.filter(n => n !== availableIndex)

  return (
    // If there are available indexes, use a recursive function to continue shuffling. Otherwise return the shuffled list.
    availableIndexes.length
        ? shuffle(list, availableIndexes, shuffledList)
        : shuffledList
  )
}

console.log(shuffle(numbers))