I'm trying to remove the eval statement in this function. I'm used to the this[whatever] style replacement but it doesn't work out in this instance.
Have a look:
var App = (function(fw) {
var somevar1 = "hello";
var somevar2 = "world";
this.get = function(what) {
return eval(what);
}
});
var app = new App({some: "thing"});
// now for the use:
console.log(app.get("somevar1"),app);
In the function, all my normal "eval scrubbing" options are not working for instance, I cant use:
return this[what]
return [what]
return app[what]
return new Function(what);
surely this isn't an odd case where eval is necessary? .. ps I have to note that I CANNOT rescope the variables inside App as it's part of a huge codebase.
Here's something to fiddle with:
http://jsfiddle.net/xAVYa/
Unfortunately, you're out of luck; eval is the only thing that can access variables like that. Next time, don't do things that way :)
You can start a migration by keeping a data object:
var App = (function(fw) {
var data = {
somevar1: "hello",
somevar2: "world"
};
this.get = function(what) {
return data[what];
};
});
And just gradually do this across the entire codebase where you see it. It shouldn't break anything.
You cannot access an arbitrary local variable by string name without eval. So, unless you're willing to change how those variables are accessed by other code inside of the app function, you will have to stick with eval (as ugly as it seems).
If, on the other hand, you're willing to change the code inside of the app() function that accesses somevar1 and somevar2, then you have options. Note, you shouldn't have to change anything outside the app() function because you can keep the same contract for the .get() function so this isn't one of those arbitrarily hard to find all possible places everywhere in the project that might be accessing these variables. Because of the way they are currently declared, they can only be accessed directly from inside the app() function so your search/replace would be limited to that scope.
If it's OK for the variables to be properties of your object, you could do this:
var app = function(fw) {
this.somevar1 = "hello";
this.somevar2 = "world";
this.get = function(what) {
return this[what];
}
};
var app = new App({some: "thing"});
// now for the use:
console.log(app.get("somevar1"));
console.log(app.somevar1);
console.log(app["somevar1"]);
There isn’t a dynamic way to do this without eval. If the variables aren’t changing, though, you could try something like this:
var App = (function(fw) {
var somevar1 = "hello";
var somevar2 = "world";
this.get = function(what) {
switch (what) {
case "somevar1":
return somevar1;
case "somevar2":
return somevar2;
}
}
});
Related
Background
I want a function keeping track of its own state:
var myObject = {
myFunction: function () {
var myself = this.myFunction;
var firstTime = Boolean(!myself.lastRetry);
if (firstTime) {
myself.lastRetry = Date.now();
return true;
}
// some more code
}
}
The problem with the above code is that the value of this will depend on the site of the function call. I want the function to be able to refer to itself without using:
myObject.myFunction
.bind()
.apply()
.call()
Question
Is it possible to give a function this kind of self awareness independent of its call site and without any help from external references to it?
If you want to store that state on the function instance, give the function a name, and use that name within it:
var myObject = {
myFunction: function theFunctionName() {
// ^^^^^^^^^^^^^^^--------------------- name
var firstTime = Boolean(!theFunctionName.lastRetry);
// ^--------------------------- using it
if (firstTime) {
theFunctionName.lastRetry = Date.now();
// ^------------------------------------------------ using it
return true;
}
// some more code
}
};
You'd do that whenever you want to use a function recursively as well. When you give a name to a function that way (putting the name after function and before (), that name is in-scope within the function's own code. (It's not in-scope for the code containing the function if it's a function expression, but it is if it's a function declaration. Yours is an expression.)
That's a named function expression (where previously you had an anonymous function expression). You may hear warnings about NFEs, but the issues various JavaScript implementations had with them are essentially in the past. (IE8 still handles them incorrectly, though: More in this post on my blog.)
You might consider keeping that state somewhere private, though, via an IIFE:
var myObject = (function(){
var lastRetry = null;
return {
myFunction: function() {
var firstTime = Boolean(!lastRetry);
if (firstTime) {
lastRetry = Date.now();
return true;
}
// some more code
}
};
})();
Now, nothing outside that outer anonymous function can see lastRetry at all. (And you don't have to worry about IE8, if you're supporting stubborn XP users. :-) )
Side note: The unary ! operator always returns a boolean, so your
var firstTime = Boolean(!theFunctionName.lastRetry);
...is exactly equivalent to:
var firstTime = !theFunctionName.lastRetry;
...but with an extra unnecessary function call. (Not that it hurts anything.)
Of course you can, simply give your function an internal named representation and it can refer to itself from there. For example...
var obj = {
doThings:function doThingsInternal(arg1, arg2) {
console.log(arg1, arg2);
for (var arg in doThingsInternal.arguments) {
console.log(arg);
}
}
};
obj.doThings('John', 'Doe');
You could use a simple Closure, if you are not too bent on keeping state existence knowledge within the function. But I guess you don't want that. Another way to do this could be changing the function itself on the first call. Benefits, no/less state variables needed and no costly checks on subsequent calls! -
var myObject = {
myFunction: function () {
// Whatever you wanna do on the first call...
// ...
// And then...
this.myFunction = function(){
// Change the definition to whatever it should do
// in the subsequent calls.
}
// return the first call value.
}
};
You can extend this model to any states by changing the function definition per your state.
Are there any ability to get closure variables list (Ok, maybe all scope variables) in JavaScript?
Sample:
function factory(){
var _secret = "Some secret";
return function(code){
// How to get parent function variables names here?
// ...
}
}
var inside = factory();
inside();
Assuming this is for debugging purposes, you can try parsing the function body and evaluating identifiers found:
function getvars(fn, _eval) {
var words = String(fn).replace(/".*?"|'.*?'/g, '').match(/\b[_A-Za-z]\w*/g),
ret = {}
words.forEach(function(w) {
try { ret[w] = _eval(w) } catch (e) {};
});
return ret;
}
function factory() {
var _secret = "Some secret";
var _other = "Other secret";
return function(code){
var vars = getvars(factory, _ => eval(_));
return vars;
}
}
vars = factory()();
document.write('<pre>'+JSON.stringify(vars,0,3));
Needless to say, this is an extremely naive way to deal with code, so handle it with care.
One way to see them is using console.dir to get all the scopes including closures scopes and their variables list. Example:
function factory(){
var _secret = "Some secret";
var i = 0;
return function(){
i++;
return _secret + i;
}
}
var inside = factory();
inside(); // "Some secret1"
inside(); // "Some secret2"
console.dir(inside); // It shows you all variables in [[Scopes]] > Closure
Image of how you would see the console:
It works in Chromium based browsers.
Edit:
Related answer with nested scopes in related question https://stackoverflow.com/a/66896639/2391782
There's no comprehensive way to get a list of all variables in scope. You could enumerate over the this object, but that will still only give you a list of the enumerable objects on this, and even at that there will still be things like function arguments that aren't on this.
So no, this cannot be done. Also check out this similar question.
No, it isn't possible.
ECMAScript specification doesn't expose Enviroment Record objects to end user anywhere.
Since the primary concept of a closure is scope, and vars inside a closure are private, there can be no way to achieve this without exposing them somehow, like via a method.
What are you really trying to achieve?
I have a "host" javascript closure, in which i keep all the common variables i am using over the website
var hostFunction = (function () {
var variableA = $("#variableA");
var variableB = $("#variableB");
// some usefull code here
} ());
In my website, in another javascript file, i have another closure
var childFunction = (function () {
var changeValue = function () {
variableA.html("I was changed");
};
// other usefull code
} ());
How is possible to insert "childFunction" inside "hostFunction" so i can get access to those variables?
What is the best practice of sharing variables across the website but also keeping them inside a scope so they don't conflict with other javascript variables?
If any information needs to be shared globally, it is best practice to use namespaces to mitigate the risk of your variables clashing with any others.
This blog post gives a reasonable introduction to namespacing in javascript.
I think you need the word this for those variables to be seen in other scopes
var hostFunction = (function () {
this.variableA = $("#variableA");
this.variableB = $("#variableB");
// some usefull code here
} ());
You pass in your host in the constructor of your childFunction like this:
var childFunction = (function (myHost) {
var changeValue = function () {
myHost.variableA.html("I was changed");
};
// other usefull code
} (hostFunction));
I'm trying to reuse a complicated function, and it would work perfectly if I could change the value of a local variable that's inside a conditional inside that function.
To boil it down:
var func = complicated_function() {
// lots of code
if (something) {
var localvar = 35;
}
// lots of code
}
I need localvar to be some other number.
Is there any way to assign localvar to something else, without actually modify anything in the function itself?
Update: The answer is yes! See my response below.
Is there any way to assign localvar to something else, without actually modify anything in the function itself?
Nope.
No, but it is possible to assign it conditionally so that the function signature (basically, the required input and output) does not change. Add a parameter and have it default to its current value:
var func = complicated_function(myLocalVar) {
// lots of code
if (something) {
// if myLocalVar has not been set, use 35.
// if it has been set, use that value
var localvar = (myLocalVar === undefined)?35:myLocalVar;
}
// lots of code
}
No.
Without changing the complicated function there is no way, in javascript you can manipilate this by using call and apply. You can override functions in the complicated function or add new if this is an option (but they won't be able to access the local variable localvar).
this is more for fun my real answer is still no.
If you are feeling crazy :)
var complicatedFunction = function() {
var i = 10;
var internalStuff = function() {
console.log(i); // 10 or 12?
};
return internalStuff();
};
var complicatedFunction;
eval("complicatedFunction = " + complicatedFunction.toString().replace(/i = 10/, 'i = 12'));
complicatedFunction(); //# => 12
If the function uses this.localvar:
var func = function() {
alert(this.localvar)
if (true) {
var localvar = 35;
}
// lots of code
alert(this.localvar)
}
var obj = {localvar: 10};
func.call(obj); // alerts 10 twice
If not, then you can't change it without changing the function.
In javascript variables are "pushed" to the top of their function. Variables in javascript have function scope, not "curly brace" scope like C, C++, Java, and C#.
This is the same code with you (the developer) manually pushing it to the top:
var func = complicated_function() {
var localvar = 0;
// lots of code
if (something) {
localvar = 35;
}
// lots of code
}
Does declaring the variable "up" one function help you out? At least the declaration is isolated.
function whatever() {
var localvar = 0;
var func = function() {
var something = true;
// lots of code
if (something) {
localvar = 35;
}
// lots of code
};
func();
alert(localvar);
}
whatever();
Here is the jsFiddle: http://jsfiddle.net/Gjjqx/
See Crockford:
http://javascript.crockford.com/code.html
JavaScript does not have block scope, so defining variables in blocks can confuse programmers who are experienced with other C family languages. Define all variables at the top of the function.
I asked this question about three weeks ago and within a half hour got five answers that all basically told me it wasn't possible.
But I'm pleased to announce that the answer is YES, it can be done!
Here's how:
var newfunc = func.toString().replace('35', '42');
eval('newfunc = ' + newfunc);
newfunc();
Of course, it uses eval, which probably means that it's evil, or at least very inadvisable, but in this particular case, it works.
I'm using class members to hold constants. E.g.:
function Foo() {
}
Foo.CONSTANT1 = 1;
Foo.CONSTANT2 = 2;
This works fine, except that it seems a bit unorganized, with all the code that is specific to Foo laying around in global scope. So I thought about moving the constant declaration to inside the Foo() declaration, but then wouldn't that code execute everytime Foo is constructed?
I'm coming from Java where everything is enclosed in a class body, so I'm thinking JavaScript might have something similar to that or some work around that mimics it.
All you're doing in your code is adding a property named CONSTANT with the value 1 to the Function object named Foo, then overwriting it immediately with the value 2.
I'm not too familiar with other languages, but I don't believe javascript is able to do what you seem to be attempting.
None of the properties you're adding to Foo will ever execute. They're just stored in that namespace.
Maybe you wanted to prototype some property onto Foo?
function Foo() {
}
Foo.prototype.CONSTANT1 = 1;
Foo.prototype.CONSTANT2 = 2;
Not quite what you're after though.
You must make your constants like you said :
function Foo() {
}
Foo.CONSTANT1 = 1;
Foo.CONSTANT2 = 2;
And you access like that :
Foo.CONSTANT1;
or
anInstanceOfFoo.__proto__.constructor.CONSTANT1;
All other solutions alloc an other part of memory when you create an other object, so it's not a constant. You should not do that :
Foo.prototype.CONSTANT1 = 1;
IF the constants are to be used inside of the object only:
function Foo() {
var CONSTANT1 = 1,CONSTANT2 = 2;
}
If not, do it like this:
function Foo(){
this.CONSTANT1=1;
this.CONSTANT2=2;
}
It's much more readable and easier to work out what the function does.
If you're using jQuery, you can use $.extend function to categorize everything.
var MyClass = $.extend(function() {
$.extend(this, {
parameter: 'param',
func: function() {
console.log(this.parameter);
}
});
// some code to do at construction time
}, {
CONST: 'const'
}
);
var a = new MyClass();
var b = new MyClass();
b.parameter = MyClass.CONST;
a.func(); // console: param
b.func(); // console: const
First, I recommend moving your class declaration inside of an IIFE. This cleans up the code, making it more self-contained, and allows you to use local variables without polluting the global namespace. Your code becomes:
var Foo = (function() {
function Foo() {
}
Foo.CONSTANT1 = 1;
Foo.CONSTANT2 = 2;
return Foo;
})();
The problem with assigning constants directly to the class as attributes is that those are writable. See this snippet:
var output = document.getElementById("output");
var Foo = (function() {
function Foo() {
}
Foo.CONSTANT1 = 1;
Foo.CONSTANT2 = 2;
return Foo;
})();
Foo.CONSTANT1 = "I'm not very constant";
output.innerHTML = Foo.CONSTANT1;
<div id="output"></div>
The best solution I have found is to define read-only properties for accessing the constants outside of the class.
var output = document.getElementById("output");
var Foo = (function() {
const CONSTANT1 = "I'm very constant";
function Foo() {
}
Object.defineProperty(Foo, "CONSTANT1", {
get: function() {
return CONSTANT1;
},
});
return Foo;
})();
Foo.CONSTANT1 = "some other value";
output.innerHTML = Foo.CONSTANT1;
<div id="output"></div>
(Technically you could ditch the const CONSTANT1 statement and just return the value from the property definition, but I prefer this because it makes it easier to see all the constants at a glance.)
what you are doing is fine (assuming you realize that your example is just setting the same property twice); it is the equivalent of a static variable in Java (as close as you can get, at least without doing a lot of work). Also, its not entirely global, since its on the constructor function, it is effectively namespaced to your 'class'.
Your constants are just variables, and you won't know if you try and inadvertently overwrite them. Also note that Javascript lacks the notion of "class".
I'd suggest you create functions that return values that you need constant.
To get the taste of Javascript, find Javascript: the Good Parts and learn the idiomatic ways. Javascript is very different from Java.
Also with namespaces
var Constants = {
Const1: function () {
Const1.prototype.CONSTANT1 = 1;
Const1.prototype.CONSTANT2 = 2;
},
Const2: function () {
Const2.prototype.CONSTANT3 = 4;
Const2.prototype.CONSTANT4 = 3;
}
};
You said your coming from Java - why don't you store that class in 1 file then and constants at the end of the file. This is what I use:
filename: PopupWindow.js
function PopupWindow() {
//private class memebers
var popup, lightbox;
//public class memeber or method (it is the same in JS if I am right)
this.myfuncOrmyMemeber = function() {};
}
//static variable
PopupWindow._instance = null;
//same thing again with constant-like name (you can't have "final" in JS if I am right, so it is not immutable constant but its close enough ;) - just remember not to set varibales with BIG_LETTERS :D)
PopupWindow.MY_CONSTANT = 1;
//yea, and same thing with static methods again
PopupWindow._getInstance = function() {};
So only difference is the position of static stuff. It is not nicly aligned inside class curly braces, but who cares, its always ctrl+click in IDE (or I use ctr+l to show all class methods - IntellijIdea can do that in JS dunno how about other IDEs) so your not gonna search it by your eye ;)
Yea and I use _ before static method - it is not needed, I don't know why I started to do that :)