using a string to create a variable

Question

I'm trying to create variables using strings.

I'm writing a script that will load images from a array of strings and I want to store those images in variables with the name of the used string.

This is the code so far:

var images = ["CrazyWolf.jpg", "CrazyWolf.jpg", "CrazyWolf.jpg", "CrazyWolf.jpg"];
var name = "";

function preload(path)
{
        img = new Image();
        img.src = path;
        img.onload = imageLoaded;
        return img;
};

function makeImages()
{
    for(var i = images.length; i > 0; i--)
    {
        source = images.shift();
        preload(source);
        var name = source.replace(".jpg", "Image");
        console.log(name);

        //make vars with as name, var name
        //Console.log(name); returns: CrazyWolfImage

        if(i==0) console.log("Loop ended");
    }
}

How do I use this name to create variables out of it?

Any help would be greatly apreciated!

Thanks!

@Vickel: What do you mean? The parameter path is defined in that exact code. What more definition would be needed? — Guffa
– Guffa, Commented Jul 5, 2014 at 13:36

Guffa · Accepted Answer · 2014-07-05 13:52:15Z

What you ask for is quite easy. You can store the image as a property in the window object, and it can be accessed as a global variable:

function makeImages() {
  while (images.length) {
    source = images.shift();
    var name = source.replace(".jpg", "Image");
    window[name] = preload(source);
  }
}

However, creating variables dynamically isn't very useful, and it can have unforseen side effects. The code to use the variables either has to blindy use some variables depending on them being created, or access them dynamically which makes it pointless to have them as variables in the first place. The global namespace is already full of identifiers, so there is a risk that you use a name that already exists.

Instead of using the global namespace, create an object where you store the images by name. That way they are isolated from the global namespace and its existing identifiers. You don't even have to manipulate the name to make a valid identifier, a name like CrazyWolf.jpg works just fine to access properties:

var img = {};

function makeImages() {
  while (images.length) {
    source = images.shift();
    img[source] = preload(source);
  }
}

Now you can access the images dynamically from the object. Example:

document.getElementById('#ShowImage').src = img['CrazyWolf.jpg'].src;

You can also loop through the images in the object, which would not be possible if they were variables among all the existing in the global namespace:

for (image in img) {
  image.style.width = '200px';
}

Note: When looping through the properties in an object you can't rely on the order that they are processed. You would use an array instead of an object if you want to retain a specific order.

Mritunjay · Accepted Answer · 2014-07-05 13:37:35Z

1

you can say something like this:-

eval("var number = 5");
console.log(number);

It'll print 5 as answer.

I think it will be helpful.

answered Jul 5, 2014 at 13:37

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Pointy · Accepted Answer · 2014-07-05 13:47:06Z

0

You can't create non-global variables with constructed names without using eval() (which would be a pretty bad idea), but you can create object properties:

var imgs = {};
for(var i = images.length; i > 0; i--)
{
    source = images.shift();
    preload(source);
    var name = source.replace(".jpg", "Image");
    console.log(name);
    imgs[name] = whatever;
}

eval() should be avoided because it makes internal code optimization impossible, if not for oft-discussed aesthetic reasons.

Global variables are properties of the global context (window) so if you want global variables (why?) you can use that instead of a local object.

edited Jul 5, 2014 at 13:47

answered Jul 5, 2014 at 13:38

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

Mritunjay Over a year ago

if my answer has some terrible side effects, let me know I'll delete that.

Pointy Over a year ago

@Mritunjay well it's just that eval() makes it impossible for modern JavaScript systems to apply optimizations to the code. That's not always that bad, but eval() can almost always be avoided.

Collectives™ on Stack Overflow

using a string to create a variable

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related