I don't understand var a = [], i here. How can a be declared as both an array and whatever i's type is?
// Source: Javascript: The Good Parts, p. 63
Array.dim = function (dimension, initial) {
var a = [], i;
for(i = 0; i< dimension; i +=1)
{
a[i] = initial;
}
return a;
}
it means declare both (separately) - not declare them to be equal
same thing as:
var a = [];
var i;
The following code:
var a = [], i;
is EXACTLY the same as this code:
var a = [];
var i;
It means:
a is an empty array
i is an uninitialized var
Javascript variables don't have types.
a is initialized to an array; i is not initialized at all.
Nothing prevents you from later writing
a = 42;
i = ["Hi", "there!"];
Javavscript variables does not have any types. Here a is initialized as an array
var a = []; //Same as var a= new Array();
and i can have any value
var i = 0;// Here it is an integer
i = "Hello";// String. Type changed to string. But it is not a good practice
Read JavaScript Variables and DataTypes
var a = [], i literally means define a as an array and define i as a variable. Nothing is actually assigned to i.
For example:
var a = 5,
b = 8,
c = "string";
This basically allows you to define 3 variables without having to use the word var 3 times. Shorthand JavaScript.
Defining your variables before you use them prevent errors if the variable is not present, making functions more reliable. For example, not defining x as a variable will result in:
if(x) { /* native code */ }
Throwing an error but:
if(window.x) { /* native code */ }
Will not, because it checks the window object for x, where all global variables are stored.
Related
In PHP you can do amazing/horrendous things like this:
$a = 1;
$b = 2;
$c = 3;
$name = 'a';
echo $$name;
// prints 1
Is there any way of doing something like this with Javascript?
E.g. if I have a var name = 'the name of the variable'; can I get a reference to the variable with name name?
Since ECMA-/Javascript is all about Objects and Contexts (which, are also somekind of Object), every variable is stored in a such called Variable- (or in case of a Function, Activation Object).
So if you create variables like this:
var a = 1,
b = 2,
c = 3;
In the Global scope (= NO function context), you implicitly write those variables into the Global object (= window in a browser).
Those can get accessed by using the "dot" or "bracket" notation:
var name = window.a;
or
var name = window['a'];
This only works for the global object in this particular instance, because the Variable Object of the Global Object is the window object itself. Within the Context of a function, you don't have direct access to the Activation Object. For instance:
function foobar() {
this.a = 1;
this.b = 2;
var name = window['a']; // === undefined
console.log(name);
name = this['a']; // === 1
console.log(name);
}
new foobar();
new creates a new instance of a self-defined object (context). Without new the scope of the function would be also global (=window). This example would alert undefined and 1 respectively. If we would replace this.a = 1; this.b = 2 with:
var a = 1,
b = 2;
Both alert outputs would be undefined. In that scenario, the variables a and b would get stored in the Activation Object from foobar, which we cannot access (of course we could access those directly by calling a and b).
eval is one option.
var a = 1;
var name = 'a';
document.write(eval(name)); // 1
Warning: Note that using the eval() function is not recommended if you don't know what you are doing, since it brings multiple security issues. Use something else unless absolutely necessary. See the MDN page for eval for more info.
You can use the window object to get at it .
window['myVar']
window has a reference to all global variables and global functions you are using.
Just don't know what a bad answer gets so many votes. It's quite easy answer but you make it complex.
// If you want to get article_count
// var article_count = 1000;
var type = 'article';
this[type+'_count'] = 1000; // in a function we use "this";
alert(article_count);
This is an example :
for(var i=0; i<=3; i++) {
window['p'+i] = "hello " + i;
}
alert(p0); // hello 0
alert(p1); // hello 1
alert(p2); // hello 2
alert(p3); // hello 3
Another example :
var myVariable = 'coco';
window[myVariable] = 'riko';
alert(coco); // display : riko
So, the value "coco" of myVariable becomes a variable coco.
Because all the variables in the global scope are properties of the Window object.
a = 'varname';
str = a+' = '+'123';
eval(str)
alert(varname);
Try this...
In Javascript you can use the fact that all properties are key value pairs. jAndy already mentioned this but I don't think his answer show how it can be exploited.
Usually you are not trying to create a variable to hold a variable name but are trying to generate variable names and then use them. PHP does it with $$var notation but Javascript doesn't need to because property keys are interchangeable with array keys.
var id = "abc";
var mine = {};
mine[id] = 123;
console.log(mine.abc);
gives 123. Usually you want to construct the variable which is why there is the indirection so you can also do it the other way around.
var mine = {};
mine.abc = 123;
console.log(mine["a"+"bc"]);
If you don't want to use a global object like window or global (node), you can try something like this:
var obj = {};
obj['whatever'] = 'There\'s no need to store even more stuff in a global object.';
console.log(obj['whatever']);
2019
TL;DR
eval operator can run string expression in the context it called and return variables from that context;
literal object theoretically can do that by write:{[varName]}, but it blocked by definition.
So I come across this question and everyone here just play around without bringing a real solution. but #Axel Heider has a good approaching.
The solution is eval.
almost most forgotten operator. ( think most one is with() )
eval operator can dynamically run expression in the context it called. and return the result of that expression. we can use that to dynamically return a variable's value in function's context.
example:
function exmaple1(){
var a = 1, b = 2, default = 3;
var name = 'a';
return eval(name)
}
example1() // return 1
function example2(option){
var a = 1, b = 2, defaultValue = 3;
switch(option){
case 'a': name = 'a'; break;
case 'b': name = 'b'; break;
default: name = 'defaultValue';
}
return eval (name);
}
example2('a') // return 1
example2('b') // return 2
example2() // return 3
Note that I always write explicitly the expression eval will run.
To avoid unnecessary surprises in the code. eval is very strong
But I'm sure you know that already
BTW, if it was legal we could use literal object to capture the variable name and value, but we can’t combine computed property names and property value shorthand, sadly, is invalid
functopn example( varName ){
var var1 = 'foo', var2 ='bar'
var capture = {[varName]}
}
example('var1') //trow 'Uncaught SyntaxError: Unexpected token }`
I needed to draw multiple FormData on the fly and object way worked well
var forms = {}
Then in my loops whereever i needed to create a form data i used
forms["formdata"+counter]=new FormData();
forms["formdata"+counter].append(var_name, var_value);
This is an alternative for those who need to export a dynamically named variable
export {
[someVariable]: 'some value',
[anotherVariable]: 'another value',
}
// then.... import from another file like this:
import * as vars from './some-file'
Another alternative is to simply create an object whose keys are named dynamically
const vars = { [someVariable]: 1, [otherVariable]: 2 };
// consume it like this
vars[someVariable];
use Object is great too.
var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);
Although this have an accepted answer I would like to add an observation:
In ES6 using let doesn't work:
/*this is NOT working*/
let t = "skyBlue",
m = "gold",
b = "tomato";
let color = window["b"];
console.log(color);
However using var works
/*this IS working*/
var t = "skyBlue",
m = "gold",
b = "tomato";
let color = window["b"];
console.log(color);
I hope this may be useful to some.
This will do exactly what you done in php:
var a = 1;
var b = 2;
var ccc = 3;
var name = 'a';
console.log( window[name] ); // 1
Simplest solution : Create an array of objects that every object has two field (variableName,variableValue)
let allVariables = [];
for (let i = 0; i < 5; i++)
allVariables.push({ variableName: 'variable' + i, variableValue: i * 10 });
for (let i = 0; i < allVariables.length; i++)
console.log(allVariables[i].variableName + ' is ' + allVariables[i].variableValue);
OutPut :
variable0 is 0
variable1 is 10
variable2 is 20
variable3 is 30
variable4 is 40
console.log(allVariables) json :
[
{
"variableName": "variable0",
"variableValue": 0
},
{
"variableName": "variable1",
"variableValue": 10
},
{
"variableName": "variable2",
"variableValue": 20
},
{
"variableName": "variable3",
"variableValue": 30
},
{
"variableName": "variable4",
"variableValue": 40
}
]
what they mean is no, you can't.
there is no way to get it done.
so it was possible you could do something like this
function create(obj, const){
// where obj is an object and const is a variable name
function const () {}
const.prototype.myProperty = property_value;
// .. more prototype
return new const();
}
having a create function just like the one implemented in ECMAScript 5.
eval() did not work in my tests. But adding new JavaScript code to the DOM tree is possible. So here is a function that adds a new variable:
function createVariable(varName,varContent)
{
var scriptStr = "var "+varName+"= \""+varContent+"\""
var node_scriptCode = document.createTextNode( scriptStr )
var node_script = document.createElement("script");
node_script.type = "text/javascript"
node_script.appendChild(node_scriptCode);
var node_head = document.getElementsByTagName("head")[0]
node_head.appendChild(node_script);
}
createVariable("dynamicVar", "some content")
console.log(dynamicVar)
Here's pure javascript solution which is not dependant on the global this of the runtime environment. Simple to achieve using object destructuring.
const dynamicVar = (nameValue, value) => {
const dynamicVarObj = {
[nameValue]: value
}
return dynamicVarObj;
}
const nameToUse = "myVar";
const value = 55;
const { myVar } = dynamicVar(nameToUse, value);
console.log(myVar); // prints 55
It is always better to use create a namespace and declare a variable in it instead of adding it to the global object. We can also create a function to get and set the value
See the below code snippet:
//creating a namespace in which all the variables will be defined.
var myObjects={};
//function that will set the name property in the myObjects namespace
function setName(val){
myObjects.Name=val;
}
//function that will return the name property in the myObjects namespace
function getName(){
return myObjects.Name;
}
//now we can use it like:
setName("kevin");
var x = getName();
var y = x;
console.log(y) //"kevin"
var z = "y";
console.log(z); //"y"
console.log(eval(z)); //"kevin"
In this similar way, we can declare and use multiple variables. Although this will increase the line of code but the code will be more robust and less error-prone.
In PHP you can do amazing/horrendous things like this:
$a = 1;
$b = 2;
$c = 3;
$name = 'a';
echo $$name;
// prints 1
Is there any way of doing something like this with Javascript?
E.g. if I have a var name = 'the name of the variable'; can I get a reference to the variable with name name?
Since ECMA-/Javascript is all about Objects and Contexts (which, are also somekind of Object), every variable is stored in a such called Variable- (or in case of a Function, Activation Object).
So if you create variables like this:
var a = 1,
b = 2,
c = 3;
In the Global scope (= NO function context), you implicitly write those variables into the Global object (= window in a browser).
Those can get accessed by using the "dot" or "bracket" notation:
var name = window.a;
or
var name = window['a'];
This only works for the global object in this particular instance, because the Variable Object of the Global Object is the window object itself. Within the Context of a function, you don't have direct access to the Activation Object. For instance:
function foobar() {
this.a = 1;
this.b = 2;
var name = window['a']; // === undefined
console.log(name);
name = this['a']; // === 1
console.log(name);
}
new foobar();
new creates a new instance of a self-defined object (context). Without new the scope of the function would be also global (=window). This example would alert undefined and 1 respectively. If we would replace this.a = 1; this.b = 2 with:
var a = 1,
b = 2;
Both alert outputs would be undefined. In that scenario, the variables a and b would get stored in the Activation Object from foobar, which we cannot access (of course we could access those directly by calling a and b).
eval is one option.
var a = 1;
var name = 'a';
document.write(eval(name)); // 1
Warning: Note that using the eval() function is not recommended if you don't know what you are doing, since it brings multiple security issues. Use something else unless absolutely necessary. See the MDN page for eval for more info.
You can use the window object to get at it .
window['myVar']
window has a reference to all global variables and global functions you are using.
Just don't know what a bad answer gets so many votes. It's quite easy answer but you make it complex.
// If you want to get article_count
// var article_count = 1000;
var type = 'article';
this[type+'_count'] = 1000; // in a function we use "this";
alert(article_count);
This is an example :
for(var i=0; i<=3; i++) {
window['p'+i] = "hello " + i;
}
alert(p0); // hello 0
alert(p1); // hello 1
alert(p2); // hello 2
alert(p3); // hello 3
Another example :
var myVariable = 'coco';
window[myVariable] = 'riko';
alert(coco); // display : riko
So, the value "coco" of myVariable becomes a variable coco.
Because all the variables in the global scope are properties of the Window object.
a = 'varname';
str = a+' = '+'123';
eval(str)
alert(varname);
Try this...
In Javascript you can use the fact that all properties are key value pairs. jAndy already mentioned this but I don't think his answer show how it can be exploited.
Usually you are not trying to create a variable to hold a variable name but are trying to generate variable names and then use them. PHP does it with $$var notation but Javascript doesn't need to because property keys are interchangeable with array keys.
var id = "abc";
var mine = {};
mine[id] = 123;
console.log(mine.abc);
gives 123. Usually you want to construct the variable which is why there is the indirection so you can also do it the other way around.
var mine = {};
mine.abc = 123;
console.log(mine["a"+"bc"]);
If you don't want to use a global object like window or global (node), you can try something like this:
var obj = {};
obj['whatever'] = 'There\'s no need to store even more stuff in a global object.';
console.log(obj['whatever']);
2019
TL;DR
eval operator can run string expression in the context it called and return variables from that context;
literal object theoretically can do that by write:{[varName]}, but it blocked by definition.
So I come across this question and everyone here just play around without bringing a real solution. but #Axel Heider has a good approaching.
The solution is eval.
almost most forgotten operator. ( think most one is with() )
eval operator can dynamically run expression in the context it called. and return the result of that expression. we can use that to dynamically return a variable's value in function's context.
example:
function exmaple1(){
var a = 1, b = 2, default = 3;
var name = 'a';
return eval(name)
}
example1() // return 1
function example2(option){
var a = 1, b = 2, defaultValue = 3;
switch(option){
case 'a': name = 'a'; break;
case 'b': name = 'b'; break;
default: name = 'defaultValue';
}
return eval (name);
}
example2('a') // return 1
example2('b') // return 2
example2() // return 3
Note that I always write explicitly the expression eval will run.
To avoid unnecessary surprises in the code. eval is very strong
But I'm sure you know that already
BTW, if it was legal we could use literal object to capture the variable name and value, but we can’t combine computed property names and property value shorthand, sadly, is invalid
functopn example( varName ){
var var1 = 'foo', var2 ='bar'
var capture = {[varName]}
}
example('var1') //trow 'Uncaught SyntaxError: Unexpected token }`
I needed to draw multiple FormData on the fly and object way worked well
var forms = {}
Then in my loops whereever i needed to create a form data i used
forms["formdata"+counter]=new FormData();
forms["formdata"+counter].append(var_name, var_value);
This is an alternative for those who need to export a dynamically named variable
export {
[someVariable]: 'some value',
[anotherVariable]: 'another value',
}
// then.... import from another file like this:
import * as vars from './some-file'
Another alternative is to simply create an object whose keys are named dynamically
const vars = { [someVariable]: 1, [otherVariable]: 2 };
// consume it like this
vars[someVariable];
use Object is great too.
var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);
Although this have an accepted answer I would like to add an observation:
In ES6 using let doesn't work:
/*this is NOT working*/
let t = "skyBlue",
m = "gold",
b = "tomato";
let color = window["b"];
console.log(color);
However using var works
/*this IS working*/
var t = "skyBlue",
m = "gold",
b = "tomato";
let color = window["b"];
console.log(color);
I hope this may be useful to some.
This will do exactly what you done in php:
var a = 1;
var b = 2;
var ccc = 3;
var name = 'a';
console.log( window[name] ); // 1
Simplest solution : Create an array of objects that every object has two field (variableName,variableValue)
let allVariables = [];
for (let i = 0; i < 5; i++)
allVariables.push({ variableName: 'variable' + i, variableValue: i * 10 });
for (let i = 0; i < allVariables.length; i++)
console.log(allVariables[i].variableName + ' is ' + allVariables[i].variableValue);
OutPut :
variable0 is 0
variable1 is 10
variable2 is 20
variable3 is 30
variable4 is 40
console.log(allVariables) json :
[
{
"variableName": "variable0",
"variableValue": 0
},
{
"variableName": "variable1",
"variableValue": 10
},
{
"variableName": "variable2",
"variableValue": 20
},
{
"variableName": "variable3",
"variableValue": 30
},
{
"variableName": "variable4",
"variableValue": 40
}
]
what they mean is no, you can't.
there is no way to get it done.
so it was possible you could do something like this
function create(obj, const){
// where obj is an object and const is a variable name
function const () {}
const.prototype.myProperty = property_value;
// .. more prototype
return new const();
}
having a create function just like the one implemented in ECMAScript 5.
eval() did not work in my tests. But adding new JavaScript code to the DOM tree is possible. So here is a function that adds a new variable:
function createVariable(varName,varContent)
{
var scriptStr = "var "+varName+"= \""+varContent+"\""
var node_scriptCode = document.createTextNode( scriptStr )
var node_script = document.createElement("script");
node_script.type = "text/javascript"
node_script.appendChild(node_scriptCode);
var node_head = document.getElementsByTagName("head")[0]
node_head.appendChild(node_script);
}
createVariable("dynamicVar", "some content")
console.log(dynamicVar)
Here's pure javascript solution which is not dependant on the global this of the runtime environment. Simple to achieve using object destructuring.
const dynamicVar = (nameValue, value) => {
const dynamicVarObj = {
[nameValue]: value
}
return dynamicVarObj;
}
const nameToUse = "myVar";
const value = 55;
const { myVar } = dynamicVar(nameToUse, value);
console.log(myVar); // prints 55
It is always better to use create a namespace and declare a variable in it instead of adding it to the global object. We can also create a function to get and set the value
See the below code snippet:
//creating a namespace in which all the variables will be defined.
var myObjects={};
//function that will set the name property in the myObjects namespace
function setName(val){
myObjects.Name=val;
}
//function that will return the name property in the myObjects namespace
function getName(){
return myObjects.Name;
}
//now we can use it like:
setName("kevin");
var x = getName();
var y = x;
console.log(y) //"kevin"
var z = "y";
console.log(z); //"y"
console.log(eval(z)); //"kevin"
In this similar way, we can declare and use multiple variables. Although this will increase the line of code but the code will be more robust and less error-prone.
Not sure why I am having trouble finding more information on this syntax but it goes like so...
var str = "Hello", length = str.length;
console.log(length); //5
Let me go into what I am doing so the answer can be relevant. I can keep assigning like so...
var str = "Hello", length = str.length, lengthtwo = str.length*2;
console.log(length); //5
console.log(lengthtwo); //10
*This next test ended up being inaccurate, log picked up on previous global. But I will keep up for others to see.
(function() {var str = "Hello", length = str.length, lengthtwo = str.length*2;})();
console.log(length); //5
console.log(lengthtwo); //10
It looks to be creating a global variable, but you can not create a local.
Also, I get you can do...
var foo = 1,
bar = 2;
That would create two local scope variables as the var is passed to bar as well. So if I use a similar scope test on this one I get not defined, unlike the previous test.
UPDATE: Rookie mistake! This does exactly as foo and bar after all, but I was accessing my global variables I had declared in previous tests. So no magic here.
put a semicolon before the var lengthtwo declaration. you have a comma there. so:
var str ="Hello", len = str.length;
or
var str="hello"; var len=str.length;
Formatting can be helpful. If we unroll the line that's giving the error, we see:
(function() {
var str = "Hello",
length = str.length,
var lengthtwo = str.length*2;
})();
That extra var in the middle is the problem.
You can either remove it:
(function() {
var str = "Hello",
length = str.length,
lengthtwo = str.length*2;
})();
or split it into its own declaration:
(function() {
var str = "Hello",
length = str.length;
var lengthtwo = str.length*2;
})();
var b = '1';
How can I create a variable name using the contents of variable b? I am doing this in a each loop, so b will change.
I am wanting the final product to be something like:
var trip1 = '';
How would I accomplish something like that?
var trip + b = '';
var trip.b = '';
No, but you can do it with properties of an object:
var obj = {};
obj.b = '1'
obj['trip' + obj.b] = '';
// or
var obj = {};
var b = '1'
obj['trip' + b] = '';
In JavaScript, you can access properties in two ways:
Using a dot and a literal property name, e.g. obj.trip1.
Using brackets and a string property name, e.g. obj['trip1'].
In the latter case, the string doesn't have to be a string literal, it can be the result of any expression, hence the examples above.
I am doing this in a each loop
Since you are iterating over them, the best way to do this is to use an array.
var trip = [1,2,3,4,5];
for (var i = 0; i < trip.length; i++){
alert(trip[i]);
}
To address your question, you could store your values as properties of an object:
var obj = {};
var b = '1';
obj['trip' + b] = "";
If you are doing this in the global scope, you could also add the variable as a property of the global object:
var b = '1';
window['trip' + b] = "";
trip1; // == ""
you can access global variables via the window object, using a dynmamic key like this:
var b = '1';
trip1 = 'hello';
console.log(window['trip'+b]);
It sounds like you are looking for the eval() method.
var b = '1';
(eval('var trip'+b+' = 3')); // Is the same as writing var trip1 = 3;
console.log(trip1);
//Output of variable trip1 is 3
Although, do a quick google search for why eval(); is bad before you employ this technique.
I'd just like to check my understanding of variable copying in Javascript. From what I gather, variables are passed/assigned by reference unless you explicitly tell them to create a copy with the new operator. But I'm a little uncertain when it comes to using closures. Say I have the following code:
var myArray = [1, 5, 10, 15, 20];
var fnlist = [];
for (var i in myArray) {
var data = myArray[i];
fnlist.push(function() {
var x = data;
console.log(x);
});
}
fnlist[2](); // returns 20
I gather that this is because fnlist[2] only looks up the value of data at the point where it is invoked. So I tried an alternative tack:
var myArray = [1, 5, 10, 15, 20];
var fnlist = [];
for (var i in myArray) {
var data = myArray[i];
fnlist.push(function() {
var x = data;
return function() {
console.log(x);
}
}());
}
fnlist[2](); // returns 10
So now it returns the 'correct' value. Am I right to say that it works because a function resolves all variable references to their 'constant' values when it is invoked? Or is there a better way to explain it?
Any explanations / links to explanations regarding this referencing / copying business would be appreciated as well. Thanks!
Closure variables are bound ("saved" in the closure) at the moment when its scope ends, that is, when you leave the function where the closure is defined:
function make_closure() {
var x = 10;
var closure = function() { alert(x) }
x = 20
return closure;
}
func = make_closure()
func() // what do you think?
The solution you've found is perfectly correct - you introduce yet another scope and force closure to bind variables in that "inner" scope.
See here for details and explanations.