how to get a variable by number javascript

Question

so, I have these 4 varibles:

var hi1 = "Hello!";
var hi2 = "Hello to you too!";
var hi3 = "I'm good, thanks!";
var i = 0;

And depending on what a user does, the variable i goes one up.

My question is, how can I get hi1, or hi2, just by i?

for example I want to do this:

document.getElementById("idol").innerHTML = hi + number;

When I do something like this, I get the error 'hi is not defined' (or something of this sort)

What I wrote was an example. The stuff are actually functions, and I do not want to store them in array. Any alternatives? (except using if / elseif, I don't want to use em) — Mxm, Jul 08 '18 at 16:32
"I don't want to use them" ... Then what about `eval("hi" + number)` ? (Thats the worst thing you can do, but well if you don't like the other options) — Jonas Wilms, Jul 08 '18 at 16:34
How about abusing global scope and using `window["hi" + number]`? — ASDFGerte, Jul 08 '18 at 16:35
@Mxm why do you not want to store them in an array? At any rate, you should be storing them *somewhere* - could be an array, it could be an object. Trying to fetch a *variable* by name is the wrong approach. — VLAZ, Jul 08 '18 at 16:41
You should definitely drop this and try jQuery. :D BTW, please accept my downvote, which I give you for not doing enough research. — Sнаđошƒаӽ, Jul 08 '18 at 16:45

score 2 · Answer 1 · 2018-07-08T16:53:16.360

2

You could use the eval syntax "eval()" to get your property eval("hi" + 2) == (variable)Hi2.

Please have a look at the documentation to learn more about eval.

Note: Eval is probably the worst thing you could do in javascript. I would strongly advise against using the eval-syntax anywhere in your code.

But anyway. Here is some example code matching to your question:

var hi1 = "Hello!";
var hi2 = "Hello to you too!";
var hi3 = "I'm good, thanks!";
var i = 0;

let number = 2
document.getElementById("idol").innerHTML = eval("hi" + number);

<div id="idol"></div>

Another possibility would be to use the window object using this syntax:

let content = window["hi" + number];

Or you could also use an object to store data.

let hiObject = {
   1: "Hello!",
   2: "Hello to you too!",
   3: "I'm good, thanks!"
}
let content = hiObject[number]

... or even an array:

let hiObject = [
   "Hello!",
   "Hello to you too!",
   "I'm good, thanks!"
]
let content = hiObject[number]

edited Jul 08 '18 at 16:53

answered Jul 08 '18 at 16:35

Why is eval() bad? – Mxm Jul 08 '18 at 16:54
I would recommend you to read https://stackoverflow.com/a/86580/3596335 – Jul 08 '18 at 16:55
@Mxm as a simple example, let's say you want the user to type `1` or `2` - if you do `eval("hi" + userInput)`, then if the user types in `1; alert('you can execute any JavaScript here!')` you'd get that alert. Or any other arbitrary javascript. From there, an attacker can get a victim to execute some code that will steal their account info. Sure you can say "but there is no sensitive information" or "I'm not passing raw input", yet would that be true a year down the line? If you or somebody else changes something, it's suddenly a security hole. – VLAZ Jul 08 '18 at 17:03
And all you needed was to fetch something by name, for which you never even needed to use `eval`. Yes, you can be careful using it but it's literally easier to use something else to get the result you want. – VLAZ Jul 08 '18 at 17:04
I don't think eval is bad for this, but I'm gonna go with the array method down below. – Mxm Jul 08 '18 at 17:08
1

eval is also way slower as it is parsed on execution, not just once. – Jonas Wilms Jul 08 '18 at 17:33

Hari Das · Answer 2 · 2018-07-08T16:57:24.007

1

In this case the best approach would be using an array. I will replicate your case with following code.

var i = 0;
var hi = ["Hello!","Hello to you too!","I'm good, thanks!"];
for(var i=0; i<hi.length; i++){
  document.getElementById("idol").innerHTML += hi[i]+"<br/>";
}

<div id="idol"></div>

edited Jul 08 '18 at 16:57

answered Jul 08 '18 at 16:42

Hari Das

10,145
7
62
59

score 1 · Answer 3 · answered Jul 08 '18 at 16:46

You mentioned that those hi1, hi2 are functions. But you can still use arrays to store them, even if they are functions:

var hi1 = () => "Hello!";
// hi1 is a function that returns "Hello!"
var hi2 = () => "Hello to you too!";
// hi2 is a function that returns "Hello to you too!"
var array = [hi1, hi2];

To access the functions:

array[0]()
=> "Hello!"
array[1]()
"Hello to you too!"
document.getElementById("idol").innerHTML = array[i-1]();

how to get a variable by number javascript

3 Answers3