Replace numbers with words? Fisher-Yates randomization

Question

I found very interesting stuff about Fisher-Yates and randomization here: How to randomize (shuffle) a JavaScript array?

Content!

//function source code from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

//define input array. 

//If you like, a site such as http://textmechanic.com/text-tools/numeration-tools/generate-list-numbers/ could be useful to generate different length arrays.
const inputArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

//define Durstenfield shuffle
const durstenShuffle = function(array) {
  for (var i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  document.getElementById("dfresults").append(array.toString());
};

//define Fisher-Yates shuffle
const fisherShuffle = function(array) {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  document.getElementById("fyresults").append(array.toString());
};

//run Fisher shuffle
fisherShuffle(inputArray);
//run Durstenfield shuffle
durstenShuffle(inputArray);

html,
body {
  font-size: 16px;
  font-family: sans-serif;
}
h1,
h2 {
  font-family: serif;
  margin: 1rem 0.5rem;
}
h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.25rem;
}
p {
  line-height: 1.5;
  margin: 0.5rem 0.5rem;
}

<h1>Shuffling</h1>
<p>Comparing the Fisher-Yates to Durstenfield shuffle. Both return randomly sorted numbers quickly and efficiently. Is it O(n)? Only you can tell!</p>
<p>The array to be sorted is 30 numbers, 1-30 inclusive. Originally, I intended to do a performance comparison but because of deliberate error introduced into performance.now() due to Spectre mitigation fixes, that was infeasible to do clientside. So enjoy some shuffled numbers!</p>

<p>Specifically, on pageload each shuffle function will take the input array and return a shuffled result to the DOM.</p>

<div class="results">
  <h2>Results</h2>
  <p>Fisher-Yates: <span id="fyresults"></span></p>
  <p>Durstenfield: <span id="dfresults"></span></p>
</div>

And now I would like to replace those 30 digits with first names (example: Thomas, Adrian, James, Patrick, Victor...)

How can I do this? I'm very new to this, I take my first steps

Answer 1

Since the shuffle functions shuffle the arrays indexes, you can just shuffle the array the same way you did but add name strings in the array.

   
   // replace numbers with names   
const inputArray = ["Thomas", "Adrian", "James", "Patrick", "Victor"];

//define Durstenfield shuffle
const durstenShuffle = function(array) {
  for (var i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  document.getElementById("dfresults").append(array.toString());
};

//define Fisher-Yates shuffle
const fisherShuffle = function(array) {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  document.getElementById("fyresults").append(array.toString());
};

fisherShuffle(inputArray);
durstenShuffle(inputArray);

<div class="results">
  <h2>Results</h2>
  <p>Fisher-Yates: <span id="fyresults"></span></p>
  <p>Durstenfield: <span id="dfresults"></span></p>
</div>