Updating Variables Within Array After the Array Has been Declared (Javascript)

Question

I haven't found this answer anywhere, and have been on the lookout for a few months, so my apologies if I'm overlooking something that should be obvious. Self-taught and came upon a rather vexing gap in my knowledge here.

In an rather complex yarn of connected pieces, I have two globally-scoped (basically static) variables and an array of character types outside of the main onclick function, as such:

var missingWut = ["child","spouse","talisman","relic","sock"];
var rdmmissingWut;
var pronounA = "he";
var charTypes = [
                  ["goatherd",pronounA+" wants to find a missing goat","kind"],
                  ["shepherd",pronounA+" wants to find a missing sheep","cruel"],
                  ["detective",pronounA+" wants to find a missing "+missingWut[rdmmissingWut],"spidery"],
                  ...,
                  ..., //this goes on for awhile; the array is currently 500 items long and has way more subindexes than I wanted/needed to include in this example.
];

We've declared the variable names in the line above, but obviously rdmmissingWut is undefined at this point. We then - for the sake of memory - go on to define rdmmissingWut inside the function, thereby updating its value from undefined to a random index number:

rdmmissingWut = Math.floor(Math.random()*missingWut.length);
rdmcharType = Math.floor(Math.random()*charTypes.length);

before assigning a random charType index to character 1 (char1).

var char1 = charTypes[rdmcharType];

My question is this - Is there a way to update the variable value within the array - after I've updated the variable - without redefining the entire array?

One could obviously just reiterate the definition of the array, at which point it would update all variable values with their current value, but that seems really clumsy, cluttered and inefficient.

Another use case (with the same issue):

I want to use this same chartypes array to randomly roll a character type for character 2 (char2) - and eventually, char3 & char4, as well. But let's say char2 (or 3 or 4) is female. To do this, after char1 was defined, I would then need to update the value of pronounA to "she" and thereupon update the pronounA definition in every instance within the charTypes array before selecting a random charTypes index for her - correct? What is the best way to accomplish this? I'm sure there must be some elegant solution that I'm just ignorant of.

Thanks for your help.

Answer 1

You'll be needing to evaluate that variable every time you run through your array, so I'd recommend a placeholder that can be replaced with .replaceAll

var missingWut = ["child", "spouse", "talisman", "relic", "sock"];
var rdmmissingWut;
var pronounA = "he";
var charTypes = [
  ["goatherd", pronounA + " wants to find a missing goat", "kind"],
  ["shepherd", pronounA + " wants to find a missing sheep", "cruel"],
  ["detective", pronounA + " wants to find a missing _missingWut_", "spidery"]
];

function getMissingWut() {
  return missingWut[rdmmissingWut || 0]; // this uses zero incase the value hasn't been updated
}
console.log(charTypes.flat().join("\n").replaceAll(/_missingWut_/g, getMissingWut()))

rdmmissingWut = 4

console.log(charTypes.flat().join("\n").replaceAll(/_missingWut_/g, getMissingWut()))