JavaScript function to generate random instances of Object

Question

I am trying to create an array of nine random words. Each word should have a color key value. Out of the nine words 3 words should have the color 'red', 3 words should have the color 'blue', and one word shoule have the color 'black'. The color needs to be assigned to the word randomly (each time the array is produced the positioning of the each color should change randomly).

My code so far produces and array of words each randomly assigned a color however with no limit - for example I may get 2 black 3 red and 4 blue. Then the next time 0 black 4 red and 5 blue. I need to produce 4 red 4 blue and 1 black every time (randomly positioned).

I thought that a counter would be useful however currently is not being used.

Any help would be great - I am new to coding so be critical!

Here is my code:

//Globals
const wordList = [..... ***remov
ed giant list of words from post***

];
const colorList = ['red', 'blue', 'black']
let randomWordNum = Math.floor(Math.random()*(wordList.length))
let randomColorNum = Math.floor(Math.random()*(colorList.length))
let coloredWords = [];
let redCounter = 0;
let blueCounter = 0;
let blackCounter = 0;


//Square function
//assigns color and word value to object key
//pushes object to new array 'words'
const createSquare = () => {
let randomWordNum = Math.floor(Math.random()*(wordList.length))
let randomColor = colorList[Math.floor(Math.random()*(colorList.length))]
if (randomColor === 'red') {
  redCounter++
} else if (randomColor === 'blue') {
  blueCounter++
} else if (randomColor === 'black') {
  blackCounter++
}
  var square = {
    color: randomColor,
    word: wordList[randomWordNum],
  }

coloredWords.push(square)
console.log(square)
}


//Loops through above function until the array is x values
const wordArr = () => {
while (coloredWords.length < 9 ){
  createSquare()
}
}


wordArr()
console.log(coloredWords)

score 0 · Accepted Answer · answered May 28 '20 at 18:11

You can first create an array of all colors 3 times (eg ['red', 'blue', 'black', 'red', 'blue', 'black', 'red', 'blue', 'black']), then shuffle it, and then on each iteration, select and remove an element from the array:

//Globals
const wordList = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
const colorList = ['red', 'blue', 'black']
const coloredWords = [];
const COUNT_FOR_ONE_COLOR = 3;

const randomColorsArr = Array.from(
  { length: COUNT_FOR_ONE_COLOR * colorList.length },
  (_, i) => colorList[i % colorList.length]
);
// Shuffle:
// https://stackoverflow.com/a/12646864
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
shuffleArray(randomColorsArr);

const createSquare = () => {
  const randomWordNum = Math.floor(Math.random() * (wordList.length))
  const randomColor = randomColorsArr.pop();
  const square = {
    color: randomColor,
    word: wordList[randomWordNum],
  }

  coloredWords.push(square)
};

for (let i = 0; i < 9; i++) {
  createSquare();
}
console.log(coloredWords)

How would I change COUNT_FOR_ONE_COLOR to '3 for red 3 for blue but only 1 for black'? Also thank you! — Jordan Collett, May 28 '20 at 18:23
You could hard-code the array to be shuffled yourself, if you wanted. To be more flexible you could make an object whose keys are the colors and whose values are the number of occurrences for each, then iterate over the object. — CertainPerformance, May 28 '20 at 18:29
I'm comfortable creating an object of which the colors are the keys and number of occurrences the values however I'm unsure how I would use this to produce the desired array... — Jordan Collett, May 28 '20 at 18:36
hard coded the array to be shuffled and it works! Thank you so much. — Jordan Collett, May 28 '20 at 18:49

JavaScript function to generate random instances of Object

1 Answers1