Using Iterated Variable Names to Perform Simple Math In a JavaScript for Loop

Question

I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue.

This answer How do I create dynamic variable names inside a loop? suggested a possible solution, but I am not trying to use an array.

This works properly, it accesses 13 canvases named canvas1 through canvas13:

for (i = 1; i < 14; i++)   
{   
  c = document.getElementById("canvas" + i.toString()); 
  context = c.getContext("2d");
  ...                                   
}

However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text.

for (i = 1; i < 14; i++)
{
  document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; 
}

Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text.

Right now I'm typing out 13 lines of code:

document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)";          
...
document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)";

which is inefficient, to say the least.

So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text?

Thank you!

No offense intended, but I'm not going to start a debate about arrays versus loops. — TonyLuigiC, Mar 03 '18 at 02:28
`arrays versus loops` that's not even a debate. They're two separate things that have two separate functions. In your case I do not see why an array would hinder you — vityavv, Mar 03 '18 at 02:32
So bright1 to bright13 is a global in this case?Meaning you do not define them before ? — Shyam Babu, Mar 03 '18 at 05:09
I'm just going to ignore the whole age thing. Your question says you think writing 13 repeated lines of code is too much. That's what arrays and loops are made for. Instead of having many, many variables (I cannot count because I do not know your context) you can just have an array - ex instead of `cont1, cont2, cont3, cont4, cont5, etc.` you can have `cont[0], cont[1], etc.` now, since you have an array, you can loop over it. However, if you do insist on being so stubborn, all global variables can be accessed with `window.` or `window[]`, so you can use that — vityavv, Mar 03 '18 at 05:14
But window variable are not GCed so it defeats his purpose of not wasting memory.But his current (bright1 -= 10) is equivalent to (window.bright1 -=10) if it is created right there. — Shyam Babu, Mar 03 '18 at 05:17
@ShyamBabu Yes, Bright1 through Bright13 are global and defined ahead of time. — TonyLuigiC, Mar 03 '18 at 05:39
Okay, so using window.bright + i ... as in window.bright + i -= 10 ... how exactly would I code that? The syntax for doing this in a loop is my question, with or without "window." I'm not getting the syntax correct. Thank you — TonyLuigiC, Mar 03 '18 at 06:26
Your question is an [X/Y Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Tell us what problem you are trying to solve instead of asking for help with the solution, which does not appear to be the correct approach. — , May 03 '18 at 18:09

Shyam Babu · Answer 1 · 2018-03-03T10:08:12.943

Since you are worried about memory usage and don't want to use arrays then putting them on window will not do you any good. Window reference never has a chance to be GCed in JS.but using 13 vars are also not feasible to loop through.

So you need to compromise by using an object instead which combines best of both answers

let bright = {};
let cont = {};
for (i = 1; i < 14; i++)
{
 document.getElementById('canvas' + i).style.filter = "brightness("+ (bright[i]-=10)+ "%) contrast("+ (cont[i]-= 10)+ "%)";//es5
 document.getElementById('canvas' + i).style.filter = `brightness(${(bright[i]-=10)}%) contrast(${(cont[i]-= 10)}%)`;//es6
}

But i should warn you this is no different from array's in JS as JS arrays are also kind of special objects with all array specific helper methods.

1)This will avoid window global.

2)It will maintain all the groupings.

But IMHO arrays really don't have that much memory usage and you shouldn't really avoid using them.At-least in JS with modern browsers, reducing the no of lines code is more important since they get sent over network.Better than saving small runtime memory as in arrays vs loops.

Thank you for posting. I'm getting a syntax error, "unexpected string", in the following area: )"%) contrast("(cont[i]-= 10)"%)"; In other words, starting at the end paren right after the first "-=10". Hope you'll have a suggestion. Thanks — TonyLuigiC, Mar 03 '18 at 07:54

Using Iterated Variable Names to Perform Simple Math In a JavaScript for Loop

1 Answers1