Dynamic variables in JavaScript

When using dynamic variables

Create dynamic variables

Dynamic variables are variabiles that are not set with a specific name in script, their name is dynamically, it can be formed with a string-value from other source (for example from a form field, or other variabile).
JavaScript has not implemented especially dynamic variables (like PHP), but it can be used various methods to achieve the same result; to make a string to become the name, or part of the name, of a variabile.
So, in JavaScript can be used two methods: with eval(), or with the window object.

Here's an example with each method (explanations are in script code).

With eval()

// Sets a variable with a string-value
// The value of this variable will become the name of a dynamic variable
var vari1 = 'val';

// Now, eval() uses vari1`s value to create another variable, having this name
eval('var '+vari1+'= "The value of the dynamic variable, val";');
console.log(val); // Test if the 'val' variable exists

// As part of the name
eval('var pre_'+vari1+'= "Part of the name, pre_val";'); // the pre_val variable is set
console.log(pre_val); // test to see the value of pre_val

With window

// Sets a variable with a string-value
// The value of this variable will become the name of a dynamic variable
var vari2 = 'val2';
// With 'window' we use the value of 'vari2' as key in Array
// The key of the 'window' become a name of variable
window[vari2] = 'Value of - val2';
console.log(val2); // the value of val2

// Or part of the name
window['pre_'+vari2] = 'Value for - pre_val2'; // creates the 'pre_val2' variable
console.log(pre_val2); // the value of pre_val2

When using dynamic variables

Dynamic variables are rarely used in JavaScript, you can write any script without using dynamic variables. But in some cases they are useful, for advanced programmers, they can make the code more dynamically.

Here is an example. The value selected from a Select list becomes the name of a variable, and the text of the selected <option> will be the value of that variable:

<h4>Example dynamic variables</h4>
<p>Select an option in the followig dropdown list.<br>
The selected value becomes the name of a variable, and the option text will be its value.</p>

<select name='select' onchange='example_vd(this.value)'>
 <option id='s1' value='s1'>Option 1</option>
 <option id='s2' value='s2'>Option 2</option>
 <option id='s3' value='s3'>Option 3</option>
</select>

<script>
// this function is called when an option is selected
function example_vd(val3) {
 // with 'window' we create dynamic variable, having in its name the value of 'val3'
 // assign to the dynamic variable the text from the selected option
 window['vd_'+val3] = document.getElementById(val3).innerHTML;

 var test_val = eval('vd_'+val3); // gets the value of the dynamic variable set above
/*
 Because we don`t know exactly the name,
 we need eval() to use the name of a dynamic variable to get its value
*/

 alert('Value of vd_'+ val3+ ' is: '+ test_val); // test the result
}
</script>

<<-Using Variable and Function .. -- Highlight selected, clicked word ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Click on the HTML tag which creates an horizontal line in web page.

Some content ...
<hr />
Content under line ...

Which CSS property defines the text color?

font-style font-variant color

h2 {
  color: #cbdafb;
}

Click on the function which searches if a character, or text exists in a string.

indexOf() toString() split()

var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");

Which function splits a string into an array of strings based on a separator?

array_merge() explode() implode()

$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")