Dynamic Variables in Javascript

In Javascript under normal circumstances we create all variable by writing “var ” in our code. But sometimes we might require to create variable at runtime either inside loops or inside some condition. These variables are referred as dynamic variables because these variables are named dynamically. This article will show you code snippet on how can we create dynamic variable in Javascript.

In JavaScript there are 2 ways by which you can create dynamic variables:
1) eval Function
2) window object

EVAL Function:
It is said that eval is one of the most powerful function inside javascript. We can execute javascript code, read JSON Object using eval function. But here we will learn how to create dynamic variable using eval function.

	var data = "testVariable";
	eval("var temp_" + data + "=123;");
	alert(temp_testVariable);

Here i have created an dynamic variable temp_testVariable holding value 123. You can also create arrays using eval function.

	var data = "testVariable";
	eval("var temp_" + data + "= new Array();");
	temp_testVariable[temp_testVariable.length]="Hello World";
	alert("Array Length: " + temp_testVariable.length);
	alert("Array Data: " + temp_testVariable[0]);


 


Window Object:
JavaScript Window Object is the highest level JavaScript object which represents the web browser window.

	//Creating Normal Variable
	var data = "testVariable";
	window["temp_" + data] = 123;
	alert(window["temp_" + data]);
 
	//Creating Arrays
	var data = "testVariable";
	window["temp_" + data] = new Array();
	window["temp_" + data][window["temp_" + data].length]="Hello World";
	alert("Array Length: " + window["temp_" + data].length);
	alert("Array Data: " + window["temp_" + data][0]);


Related Articles:

About Hitesh Agrawal

Wait... checking
Tagged . Bookmark the permalink.

20 Responses to Dynamic Variables in Javascript

  1. D says:

    This is awesome!
    I was looking for this for 5 hours. Thanks!

  2. Pingback: Dynamic Variables in Javascript | Nobleatom

  3. ad56 says:

    thanks – just what i was looking for.

  4. OnLine says:

    Thanks for this article.
    It waz usefull and I learned somting new in JS.

  5. Pingback: dynamic resources

  6. Filip says:

    This is not Working in IE !?

  7. Abhijit says:

    Atleast worked for test program in IE, Now time to implement in real time system.

    Keeping my fingers crossed :) Will let you know if successful …..

    Thanks anyway.

  8. Abhijit says:

    Cheers, Sucessfully implemented … Needed to optimze something to support dynamisam..
    Your saved my day..

    Thanks a lot.

  9. Rohit Jain says:

    U r simply gr8888

  10. riddick says:

    Nicely explained!
    Simple and clear article.

    Thank you

  11. nininho says:

    The eval-function bares security vulnerabilities. So, better decide to use it only if there’s no other way. For object variables, which are hardly accessible or complete inaccessible from the window-object, you can create a object and treat it like an array.

    F.e.

    var firstVariableName = ‘firstKey’;
    var secondVariableName = ‘secondKey’;
    var parameters = {};
    parameters[firstVariableName] = ‘firstValue’;
    parameters[secondVariableName] = ‘secondValue’;

    will result in

    ({firstKey:\firstValue\, secondKey:\secondValue\})

    In my case, i had several dynamic parameters to pass over to the data-option on jQuery.ajax();

    Hope that helps.

  12. ravi says:

    Above code is very useful to me. Thank u.

  13. Adrian says:

    Thank You! Based on the light you bring I wrote

    function $(x){window[x] = document.getElementById(x);
    return window[x] }

    $(‘txt’).style.height=’100px’; //ok
    txt.style.width=’100px’; //ok

    next step to build “jAdrian” :)) Thank you again

  14. Adrian says:

    note:
    the advantage of eval(“var …”) is that gives the posiblity to create local variables

  15. Deepak says:

    Thanks a lot !!! this is what i was looking for :)

  16. RumeshChanchal says:

    Hello All,
    In java script we create any type of variable by using “var” keyword. The data type of “var” is decided at run type on the basis of value. In this demonstration I had created several types of variable by using “var” keyword………….. for more details check out this link………………
    http://mindstick.com/Articles/e2d167d6-541f-4551-b260-90058aee8587/?Creating%20variable%20in%20java%20script

    Thanks !!!!!

  17. Neelam says:

    Nice one.

  18. iulian says:

    Thanks man, you saved me a lot of time.

  19. Pingback: javascrip for schleife - Flashforum

  20. Pingback: Cloning an image with EaselJS dynamically to multiple canvases | HTML 5 Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>