Javascript + build a dynamic variable name from a variable name and string

Question

I'm not clear on the correct syntax to do the following.

I have tried eval() I have tried [] and {[]} as well..

I start with this:

var player1InitStart = 0;
var player2InitStart = 0;
var player3InitStart = 0;
var player4InitStart = 0;

var playerID =  event.target.id; // will return, player1, 2, 3, 4

To be used in a check like so:

if(eval(playerID + "InitString") == 0){
    //do something, first time starting video
    eval(playerID + "InitString") = 1;
    alert('First Time Playing Video' + eval(playerID + "InitString"));
}

I am trying to use the playerID value together with the string: "InitStart"..

so I can then update the target xxInitStart variable above.

How can I concatenate the var playerID with the string InitStart so I can now target one of the playerXInitSTart variables to update it?

Update: answer/solution that worked for me-

no clue why the $ character is being used? (reminds me of PHP)
no clue why the back tick marks '' are there either? ''

var playerID = event.target.getIframe().id; var targetInitID = ${playerID}InitStart;

//access (get or set) alert(window[targetInitID]); window[targetInitID] = 1;

Don't. Use an object (or array) instead of 4 separate variables — CertainPerformance, Feb 08 '19 at 23:36
Can you put that into some context? What exactly would I be putting into an array? I still need to take the returned value/variable (playerID, which will be player1, player2, player 3 or player4).. and tack on the InitStart string/extension to target a variable.. I'm failing to see how an array comes into play here? or helps? — whispers, Feb 08 '19 at 23:41

Bibberty · Accepted Answer · 2019-02-08T23:44:36.137

1

Here we build string and address window[yourvar] to increment, does this work for you

var player1InitStart = 0;
var player2InitStart = 0;
var player3InitStart = 0;
var player4InitStart = 0;

//var playerID =  event.target.id; // will return, player1, 2, 3, 4

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', clickEvent);
});

function clickEvent(event) {
  let playerID = `${event.target.id}InitStart`;
  window[playerID] += 1;
  logVars();
}

function logVars() {
  console.log(player1InitStart);
  console.log(player2InitStart);
  console.log(player3InitStart);
  console.log(player4InitStart);
}

<div id="player1">1</div>
<div id="player2">2</div>
<div id="player3">3</div>
<div id="player4">4</div>

Here is a solution that follows CertainPerformance advice:

var players = {
  player1InitStart: 0,
  player2InitStart: 0,
  player3InitStart: 0,
  player4InitStart: 0
};

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', clickEvent);
});

function clickEvent(event) {
  let playerID = `${event.target.id}InitStart`;
  players[playerID] += 1;
  logVars();
}

function logVars() {
  for(let k in players) {
    console.log(players[k]);
  }
}

<div id="player1">1</div>
<div id="player2">2</div>
<div id="player3">3</div>
<div id="player4">4</div>

edited Feb 08 '19 at 23:44

answered Feb 08 '19 at 23:40

Bibberty

4,670
2
8
23

1

while this should work, sometimes we need to not answer the direct question and instead steer OP towards a better approach. This is one of those times. – Sergio Tulentsev Feb 08 '19 at 23:42
Why & where does 'window' come from? Also where does the 'let' do in the code above? – whispers Feb 08 '19 at 23:43
@whispers: if this javascript runs in a browser, the browser exposes global variable `window` – Sergio Tulentsev Feb 08 '19 at 23:45
1

per @SergioTulentsev I agree the second solution, using an object is better. Even better would be an array of player objects. – Bibberty Feb 08 '19 at 23:45
I am just trying to set/update a variable to show that is has been played once. Why are there back ticks on the line that is concatenating the two pieces of data? I see no reason to put those variables in an array.. there will never be any looping going on to update them. – whispers Feb 08 '19 at 23:50
It builds the correct variable name. If you only need 0 || 1 get rid of my += 1. Here is docs on string interpolation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – Bibberty Feb 08 '19 at 23:51
While I still have no clue why there are '`' (back tick) characters used.. nor the $ character... it seems to work.. this was all I needed here: var playerID = event.target.getIframe().id; var targetInitID = `${playerID}InitStart`; //access (get or set) alert(window[targetInitID]); window[targetInitID] = 1; – whispers Feb 08 '19 at 23:57
@whispers: today you don't need looping, tomorrow you do. Array is a handy data structure that can be useful in many scenarios. – Sergio Tulentsev Feb 08 '19 at 23:58
I use arrays all the time.. but talking about arrays when I'm asking about concatenation syntax seems to bring one in a totally different direction. Even using an array.. I see no benefit here? I still would need to concatenate to target my desired variable. – whispers Feb 09 '19 at 00:00
Whispers the back tick method is a nice clean way of building up string values that contain variables. Especially useful for templating. Worth a read. Happy coding – Bibberty Feb 09 '19 at 00:03
@whispers: "I still would need to concatenate to target my desired variable." - not if you don't _have_ variables. No variables - no concatenation. Instead, fetch a simple integer from the dom element and access array by that integer. Something like `players[event.target.dataset.playerid] = 1` Where `players` is a simple array of integers. – Sergio Tulentsev Feb 09 '19 at 00:04

Javascript + build a dynamic variable name from a variable name and string

1 Answers1