How to make array choose four different options

Question

Does anyone know how I can make my array choose four different options that go under different variables? Now, I have an array with six entities and a function that chooses four of those options and assigns it a variable, but there is the possibility that there will be repeats.

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']
window.colorOne = '';
window.colorTwo = '';
window.colorThree = '';
window.colorFour = '';


function beginAndGetCombo(){

window.colorOne = colors[Math.floor(Math.random() * colors.length)];
window.colorTwo = colors[Math.floor(Math.random() * colors.length)];
window.colorThree = colors[Math.floor(Math.random() * colors.length)];
window.colorFour = colors[Math.floor(Math.random() * colors.length)];

}


<input type=button value='Get Colors' onclick='beginAndGetCombo()'>

Why not choose a random value, then remove it from the list of values, and choose the next one from the remaining list? Or shuffle the list and pop the values from the beginning each time? — Nico Haase, Aug 26 '18 at 13:20
Possible duplicate of [How to efficiently randomly select array item without repeats?](https://stackoverflow.com/questions/17891173/how-to-efficiently-randomly-select-array-item-without-repeats) — Nico Haase, Aug 26 '18 at 13:21

Emeeus · Accepted Answer · 2018-08-26T13:40:41.880

Here a possible way using splice() to remove the element selected from the array of possible colors. The array changes the length in each iteration, and the boundaries of random changes too. Then each iteration we have less colors to choose.

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']

var newcolors = {"colorOne":'',"colorTwo":'',"colorThree":'',"colorFour":''};

for(let color in newcolors){

    position = Math.floor(Math.random() * colors.length-1);
    window[color] = colors.splice(position,1)[0];
}

console.log(window.colorOne)
console.log(window.colorTwo)
console.log(window.colorThree)
console.log(window.colorFour)

score 1 · Answer 2 · answered Aug 26 '18 at 13:28

It's a bit of a hard coded solution for you. I created a helper array to store selected colors, and filtered array to choose from. The filtered array is constructed from the original colors array with the exclusion of the colors already selected. At the end of the function I used Array Destructuring to assign them to your window.colorX variables. Hope it helps

const colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'];
window.colorOne = '';
window.colorTwo = '';
window.colorThree = '';
window.colorFour = '';


function beginAndGetCombo(){
    let selected = [];
    for (let i = 0; i < 4; i++) {
        let filteredColors = colors.filter(color => !selected.includes(color))
        console.log(filteredColors);
        selected.push(filteredColors[Math.floor(Math.random() * filteredColors.length)])
    }
    [window.colorOne, window.colorTwo, window.colorThree, window.colorFour] = selected;
}

score 1 · Answer 3 · answered Aug 26 '18 at 13:57

As suggested by others, shuffling array is simplest and easiest way to go.

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f'];
var randomize = (function(len) {
  return function() {
    return Math.floor(Math.random() * len);
  };
})(colors.length);
var shuffled = colors.sort(randomize);
var names = ['One', 'Two', 'Three', 'Four'];
var color;
while (names.length) {
  color = 'color' + names.shift();
  window[color] = shuffled.shift();
  console.log(color, window[color]);
}

Santiago Celada Gonzalez · Answer 4 · 2018-08-26T14:19:31.870

var colors = ['#4286f4', '#e2f442', '#f48c41', '#41f4f4', '#dd3b3b', '#7a6f6f']
var colorOne = '';
var colorTwo = '';
var colorThree = '';
var colorFour = '';
var newColor = '';
var newColors = new Array();
function beginAndGetCombo(){
     newColor = colors[Math.floor(Math.random() * colors.length)];
     if(newColors.indexOf(newColor)==-1){
       newColors.push(newColor);
     };

     if(newColors.length!=4){
       beginAndGetCombo();
       return;
     };
     colorOne = newColors[0];
     colorTwo = newColors[1];
     colorThree = newColors[2];
     colorFour = newColors[3];
     console.log(colorOne);
     console.log(colorTwo);
     console.log(colorThree);
     console.log(colorFour);
     newColors = new Array();
}
beginAndGetCombo();

How to make array choose four different options

4 Answers4