This question already has answers here:
How to test for equality of functions in Javascript [duplicate]
(7 answers)
Closed 1 year ago.
Is it possible to detect duplicate functions in Javascript (which may be written by accident in some cases)? In Google Chrome,
printLah(); //this prints "Haha" for some reason, without even printing an error message in the Javascript console!
function printLah(){
alert("Hahah!");
}
function printLah(){
alert("Haha");
}
Here it is on JSfiddle.
The short answer is, no it's not.
This is how javascript works. A function name is just a variable that is assigned a function. For example:
function foo () {
alert('foo!');
}
foo = 1;
foo();
The code above will generate an error because a number is not a function! There is no difference between function names and variable names. In fact, an alternative way to define functions looks exactly like how you'd define variables:
var foo = function () {
alert('foo!');
}
It's because of this functions-as-first-class-objects behavior that javascript cannot prevent re-assignment otherwise you cannot re-assign variables (pure functional languages on the other hand have no problems with disallowing variable re-assignments).
Work-arounds and best practice:
This is the reason people keep saying that you shouldn't define too many globals in javascript. That includes functions. Otherwise it may clash by accident with someone else's code.
There are two powerful features in javascript that can mitigate this problem: objects and closures.
Because javascript supports objects you should use object oriented programming to limit the number of globals in your program. Unlike traditional OOP, javascript works better when using objects as collections or namespaces. This is because javascript doesn't have file scope and everything is global.
This doesn't mean you shouldn't create smaller objects that encapsulate smaller problems like you do with traditional OOP. It just means that you should, if you can, contain all your objects within a single parent object. And I don't mean inheritance here, I mean in a has-a relationship. Look at popular libraries like jQuery and Raphael for examples of this. They export only one object to the global scope to avoid clashing with other people's code.
But, again, this doesn't really protect people from re-assigning your objects (because they're variables after all). For example, you can easily break jQuery by doing this at the top of your HTML file before other bits of javascript have the chance to run:
jQuery = null;
The way to protect your code from being tampered with is to use a closure. Third party code has no access to any code you run from inside your closure. As long as you avoid globals that is.
Just to follow on from slebetman's answer, you can use the following to check for existence before declaring a variable or function.
if (typeof(functionName) == 'undefined') {
functionName = function() {
// add code here
}
}
Once again, the reason you would do this check is because you want/need to put something in the global scope, even though it is often not needed. Not using a var puts it implicitly into the global scope.
Try this.It work for me !!!
$(document).ready(function () {
var all_functions = [];
var duplicate_functions = [];
var reportRecipientsDuplicate = [];
for (var i in window) {
if ((typeof window[i]).toString() == "function") {
if (window[i].name) {
all_functions.push(window[i].name);
}
}
}
var all_functions1 = all_functions.sort();
for (var i = 0; i < all_functions1.length - 1; i++) {
if (all_functions1[i + 1] == all_functions1[i]) {
duplicate_functions.push(all_functions1[i]);
}
}
console.log("Duplicate functions on page");
console.log(duplicate_functions);
});
Related
I have one question and don't know do I do right thing.
I define window and document in objects or global variable in my pluins like this:
var myplugin = {
document : document || {},
window : window || {}
};
After I call that when I need like this:
myplugin.window.location.href = 'http://flyflyflymachine.etc';
And I would like to know do I get some better performance or is unnecessarily?
As for performance, yes caching can help but you are not caching anything here. Merely replacing one lookup with another one (yourplugin.document vs window.document).
Actually in that case, just document is faster, but unless you are in a tight loop calling it a few thousand times, don't bother with these kind of nano optimisations.
In theory this kind of nano-optimization is more appplicable to nested functions created when a plugin is defined in terms of an IIFE instead of using an object literal initializer.
When code references a variable of object, the javascript engine has to search the current lexical scope record first, followed by any parent lexical scrope records until the variable or object definition is either found or proven not to have been defined.
Lexical scope records are created for for loops using let variable definitions and for functions to hold arguments and variables. So in a deeply nested for loop, in a deeply nested function, there could be a number of scope records to inspect before finding either window or document.
Making a copy of a global or outer function reference could reduce the number of scope records to search. A net performance gain will only arise if the overhead of making the copy is less than the overhead of the JavaSript engine searching the intermediary scope records, multiplied by the number of times the outer reference is used. This may be both rare in practice and difficult to prove if the gain is small.
The kind of plugin definition in the post, consisting of an "Object object" intializer instead of an IIFE does not meet the criteria of speeding up object reference searching and, indeed, could actually slow things down.
You seem to be concerned about window or document not existing. If, for example, this code were run from inside a Worker or NodeJS script, it would throw an error.
So you could "optimize" this in two ways:
Use a namespace with the this keyword (from global scope, this will refer to the global object)
var myPlugin = {};
(function myPluginNS(_global) {
myPlugin.window = _global;
myPlugin.document = _global.document || {};
})(this);
Use good ol' fashioned try-catch
var myPlugin = {};
try {
myPlugin.window = window;
} catch (e) {
myPlugin.window = {};
}
try {
myPlugin.document = document;
} catch (e) {
myPlugin.document = {};
}
Admittedly, not really an "optimization", but it will at least ensure your code can run in various JS run-times.
Here is what I want:
var Validator = function () {
this.do = function () {
alert(INTANCENAME); /// SHOULD BE 'FOO'
}
}
var FOO = new Validator().do();
Is it possibe to implement in Javascript?
The truth is there is no point of doing that, the only way I can hardly think is to loop all window or scope objects and check some kind of equality with the current object, something like
this.do = function () {
for(var key in window) {
if(this === window[key]) {
alert(key);
}
}
};
In order to work call it after you assign it.
var FOO = new Validator();
FOO.do();
Another issue that can come up is that an instance (a reference) can be stored in various variables so maybe will not get what you expect.
The literal answer to your question would be:
Use (new Error()).stack to get information on the line and the function where the do() method was called.
Use JS parser (e.g. Esprima) to find out what variable it was called on (if any, the method itself might be assigned to a variable).
I do not recommend doing this though.
There's no way to directly do what you're asking for here. Objects themselves are not in any defined by their matching variable name - in fact it's possible to have objects that exist that are not directly assigned to a variable, and multiple variables assigned to the same object.
The javascript interpreter uses our variable names as identifiers to help with the code execution, but once it's running the variable name makes no difference to the running javascript program, as it's probably been reduced to a memory reference by the time it's executing, completely separated from the original code that you wrote.
Edit: Answer by yannis does kind of simulate this, but it relies on working with variables available in a specific scope - what I ment was that there's no direct way to do this from within the object itself as per your example in the question.
(Maybe) I just solved a my problem (How to update front-end content after that a form is successfully submitted from a dialog window?) by "storing" / "saving" a variable in the JavaScript window object. However, since I am newbie in JavaScript matters, I have some doubts if storing / saving a variable in the JavaScript window object is a "common" / "proper" way to use that object. Is it?
For example, using the following code
$('.trigger').click(function() {
window.trigger_link = this;
});
is advisable?
In JavaScript, any global variable is actually a property of the window object. Using one is equivalent to (and interchangeable with) using the other.
Using global variables is certainly "common," so the question is whether or not it's "proper." Generally, global variables are discouraged, because they can be accessed from ANY function and you risk having multiple functions trying to read from and write to the same variables. (This is true with any programming language in any environment, not just JavaScript.)
Solve this problem by creating a namespace unique to your application. The easiest approach is to create a global object with a unique name, with your variables as properties of that object:
window.MyLib = {}; // global Object container; don't use var
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }
MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7
Another approach is to use .data() to attach variables to a relevant DOM element. This is not practical in all cases, but it's a good way to get variables that can be accessed globally without leaving them in the global namespace.
What is actually not mentioned here, and is probably the biggest deal breaker on why not to use window as global scope carrier is that it can be frozen (not writable) in some cases (and I'm talking from production based experience).
A good pattern is actually just create a global variable that will be used for all the common stuff in your application
var Application = {};
Application.state = { name: 'Application' }
.
.
What I found as the best pattern for me in javascript is to have a global state using Redux.
Another pattern to make a unique namespace in your application.
(function myApp()
{
var value = 5;
function addToValue(x)
{
value += x;
}
})()
If you want functions/values to be accessible afterwards you can store them in an object like this:
function myApp()
{
this.value = 5;
this.addToValue = function(x)
{
this.value += x;
}
}
var myInstance = new myApp();
I've a simple read-only JSON object with a few propeties, I wonder if it's worth caching its properties into the variables? Currently we use them like: jsonObject.somePropety ,I'm considering caching them into the variables like: var somePropertyValue = jsonObject.somePropety; and using that var for all future refs.
Depends on how you judge "worth" on this issue.
Caching the properties should have some theoretical performance gain if using the same property repeatedly, but I doubt that the difference will be noticeable to the user unless you're looping many thousands of times.
Caching the properties can make your code prettier though, e.g., if you are referring to the same property more than a couple of times in a particular block of code you could cache it at the beginning - especially if you've got nested objects like this:
jsonObject.nestedObject.doSomething();
jsonObject.nestedObject.doAnotherThing();
alert(jsonObject.nestedObject.someProperty);
//compared with:
var nObj = jsonObject.nestedObject;
nObj.doSomething();
nObj.doAnotherThing();
alert(nObj);
I find the latter easier to type and easier to read (at least, it would be easier to read if the variable nObj had a more meaningful name, but obviously this is just a generic example).
I would not, however, cache the properties in global variables for use throughout all of your code. Keeping globals to a minimum is almost always a good idea for several reasons, including avoiding clashes in naming with included libraries, and avoiding hard-to-diagnose bugs where multiple functions update the same variable. Just cache within individual functions that happen to need to use a particular property a lot - and remember that JS has function scope not block scope. (Where a particular function references a particular property a lot you could also consider making that property an argument to the function for the same effect with (arguably) neater code.)
P.S. JavaScript doesn't have JSON objects, it just has objects.
It really depends on where jsonObject is stored, and how many scope steps (function closures) away from where it's being used it is.
e.g. in the example below each time jsonObject.prop is accessed the code checks the scoped variables of 6 different scopes (including the global scope) before it finds jsonObject
var jsonObject = { ... };
(function() {
(function() {
(function() {
(function() {
(function() {
jsonObject.prop ...;
jsonObject.prop ...;
})();
})();
})();
})();
})();
So if the property is being accessed multiple times in the innermost function it makes sense to save a local reference to it
var jsonObject = { ... };
(function() {
(function() {
(function() {
(function() {
(function() {
var prop = jsonObject.prop;
})();
})();
})();
})();
})();
Now (apart from the first time the property is accessed to write it to the variable) your code has to do a lot less work to find the value.
I've heard from a variety of places that global variables are inherently nasty and evil, but when doing some non-object oriented Javascript, I can't see how to avoid them. Say I have a function which generates a number using a complex algorithm using random numbers and stuff, but I need to keep using that particular number in some other function which is a callback or something and so can't be part of the same function.
If the originally generated number is a local variable, it won't be accessible from, there. If the functions were object methods, I could make the number a property but they're not and it seems somewhat overcomplicated to change the whole program structure to do this. Is a global variable really so bad?
I think your best bet here may be to define a single global-scoped variable, and dumping your variables there:
var MyApp = {}; // Globally scoped object
function foo(){
MyApp.color = 'green';
}
function bar(){
alert(MyApp.color); // Alerts 'green'
}
No one should yell at you for doing something like the above.
To make a variable calculated in function A visible in function B, you have three choices:
make it a global,
make it an object property, or
pass it as a parameter when calling B from A.
If your program is fairly small then globals are not so bad. Otherwise I would consider using the third method:
function A()
{
var rand_num = calculate_random_number();
B(rand_num);
}
function B(r)
{
use_rand_num(r);
}
Consider using namespaces:
(function() {
var local_var = 'foo';
global_var = 'bar'; // this.global_var and window.global_var also work
function local_function() {}
global_function = function() {};
})();
Both local_function and global_function have access to all local and global variables.
Edit: Another common pattern:
var ns = (function() {
// local stuff
function foo() {}
function bar() {}
function baz() {} // this one stays invisible
// stuff visible in namespace object
return {
foo : foo,
bar : bar
};
})();
The returned properties can now be accessed via the namespace object, e.g. ns.foo, while still retaining access to local definitions.
What you're looking for is technically known as currying.
function getMyCallback(randomValue)
{
return function(otherParam)
{
return randomValue * otherParam //or whatever it is you are doing.
}
}
var myCallback = getMyCallBack(getRand())
alert(myCallBack(1));
alert(myCallBack(2));
The above isn't exactly a curried function but it achieves the result of maintaining an existing value without adding variables to the global namespace or requiring some other object repository for it.
I found this to be extremely helpful in relation to the original question:
Return the value you wish to use in functionOne, then call functionOne within functionTwo, then place the result into a fresh var and reference this new var within functionTwo. This should enable you to use the var declared in functionOne, within functionTwo.
function functionOne() {
var variableThree = 3;
return variableThree;
}
function functionTwo() {
var variableOne = 1;
var var3 = functionOne();
var result = var3 - variableOne;
console.log(variableOne);
console.log(var3);
console.log('functional result: ' + result);
}
functionTwo();
If another function needs to use a variable you pass it to the function as an argument.
Also global variables are not inherently nasty and evil. As long as they are used properly there is no problem with them.
If there's a chance that you will reuse this code, then I would probably make the effort to go with an object-oriented perspective. Using the global namespace can be dangerous -- you run the risk of hard to find bugs due to variable names that get reused. Typically I start by using an object-oriented approach for anything more than a simple callback so that I don't have to do the re-write thing. Any time that you have a group of related functions in javascript, I think, it's a candidate for an object-oriented approach.
Another approach is one that I picked up from a Douglas Crockford forum post(http://bytes.com/topic/javascript/answers/512361-array-objects). Here it is...
Douglas Crockford wrote:
Jul 15 '06
"If you want to retrieve objects by id, then you should use an object, not an
array. Since functions are also objects, you could store the members in the
function itself."
function objFacility(id, name, adr, city, state, zip) {
return objFacility[id] = {
id: id,
name: name,
adr: adr,
city: city,
state: state,
zip: zip
}
}
objFacility('wlevine', 'Levine', '23 Skid Row', 'Springfield', 'Il', 10010);
"The object can be obtained with"
objFacility.wlevine
The objects properties are now accessable from within any other function.
I don't know specifics of your issue, but if the function needs the value then it can be a parameter passed through the call.
Globals are considered bad because globals state and multiple modifiers can create hard to follow code and strange errors. To many actors fiddling with something can create chaos.
You can completely control the execution of javascript functions (and pass variables between them) using custom jQuery events....I was told that this wasn't possible all over these forums, but I got something working that does exactly that (even using an ajax call).
Here's the answer (IMPORTANT: it's not the checked answer but rather the answer by me "Emile"):
How to get a variable returned across multiple functions - Javascript/jQuery