I have a massive javascript file with many function expressions. All of a sudden console gives me the following errors:
In IE
The value of the property 'myFunc' is null or undefined, not a Function object
In Firefox
TypeError: myFunc is not a function
This is how I call the function:
myFunc();
This is the function:
myFunc = function() {
//do stuff
}
This is happening on ALL function expressions. If I change one to a function declaration it works, but then will fail on some other function expression call inside of it. What the heck?
Possibility 1
If you are calling the function expression before it is defined, you will get this error. If you however turn it into a function declaration, the function declaration would get hoisted to the top of the scope, and could be called before or after the actual declaration occurs. So:
functionFoo();
var functionFoo = function() {
};
Will give this error, because you are trying to call the function before it is defined. But:
functionFoo();
function functionFoo() {
}
Will work, because actual function declarations are hoisted to the top of the scope, and can be used anywhere.
Possibility 2
If you are calling the function expression from a different scope that is outside where the function expression is defined, you will get this error. function expressions, like other variables, can only be used within the scope they are defined. So:
$( document ).ready( function() {
var functionFoo = function() {
};
} );
functionFoo();
Will give you an error, because the defining of the function happens in a different scope than the call. But:
$( document ).ready( function() {
var functionFoo = function() {
};
functionFoo();
} );
Will work just fine, because both the defining and the call happen in the same scope.
Related
I am creating some basic plugin and i am getting Reference error. Below is my code
jQuery.fn.validate = function(options) {
var _self = this;
// with below call I gets reference error.
abc();
//but if call in below it works fine
_self.on("submit", function(event) {
abc(); // works fine
}),
abc = function () {
console.log('here);
}
};
Can someone explain why I am getting this error and how to overcome it. As i need to call some reset and init functions at the begining of the plugin.
It seems like you're expecting abc to be hoisted, but you're specifically using a syntax that leaves abc undefined until the assignment is executed.
You need to move abc = function ... up above the invocations of abc(), or define the function using function abc() { } which will allow it to be hoisted above your invocations.
Note that, if you simply move the assignment, you should use var abc = function ... and create a local variable, rather than the global abc variable you're currently creating.
The following code gave an error, on some version in firefox browser - linksHandle is not defined.
The code is comprised of a function that at the bottom has a function named linksHandle. As far as I know this function is supposed to be hoisted when the the function that it is defined in, is invoked.
Therefore the function defined for the event 'mMenuReady' should be able to access it, because it enclosures all the function and variables that were defined in it's execution context.
Why do some firefox versions need the function declaration (linksHandle) to be defined before in order for the 'mmenu' callback to enclose the function?
document.addEventListener('readystatechange', function() {
if (document.readyState === 'interactive') {
if (typeof jQuery === 'function') {
// callback function that is invoked later by the event that is triggered -> $(window).trigger("mMenuReady")
$(window).on('mMenuReady', function() {
var links2 = Array.prototype.slice.call(document.querySelectorAll('#mm-mainMenu a'));
links2.forEach(linksHandle);
});
}
function linksHandle(elem) {
// function code
}
}
});
Function declarations inside blocks are only allowed since ES6. They do hoist inside your if body (not to the whole function), but not in older versions of FF that did implement them as "function statements" that were not hoisted (and actually completely invalid in strict mode) having caused issues like yours.
Let's assume that I define a self-executing function like the following :
({
function1: function(){//...}
function2: function(){//...}
})
How can I call function2 from inside function1 ?
(I tried calling it just like : function2(); and this.function2(); , none worked, both returned error : function2() or this.function2() is not a function)
Actually this is part of the Aura framework, so maybe it is specific to this framework.
There are several things wrong here. First, this is not a self-executing function. This is an object with two functions defined inside it and wrapped in parentheses, which make it invalid. Something like this would be a valid JavaScript object:
object1 = {
function1: function(){
console.log('function1 called!'); // logs the text 'function1 called!' to the console
},
function2: function(){
console.log(this); // logs the details of `object1`
this.function1();
}
};
object1.function2();
Equivalent functionality using an anonymous function would look something like this:
(function (){
console.log('anonymous function called!');
})();
Note the lack of curly brackets surrounding the anonymous function. Unlike the functions in the object, the anonymous function isn't a member of any object. Also note the last set of parentheses at the end, those are what triggers the execution of the anonymous function that has just been defined.
JavaScript functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
So, I'm so very newbie in js, and tried to imitate an implementation of function I've seen, but it gave error. And searching and searching I understand neither what's wrong nor what's different from some example... All of the things below is just a representation of what I'm doing.
I have two js script, Flower.js and Tree.js.
So, the function I imitated is more or less like this Flower.js:
var Lily = (function() {
function petal() {
//do A
}
})();
And inside Tree.js I tried to call petal like this:
function grow() {
Lily.petal();
}
I put them inside the html like this:
<script src="js/Flower.js"></script>
<script src="js/Tree.js"></script>
but it gave no result and always gives error
Uncaught TypeError: Cannot read property 'petal' of undefined
I've tried to change this and that, and the error changes, but no matter what changes I put, it always has undefined in error message. What is it the grave mistakes that I've done? Is it in the declaration or calling the function?
In your example, the petal function could be referred as "a private function of the module Lily"
The following piece of code declare a function that gets immediately called, so the value of Lily is the return value of your function.
If you want Petal to be accessible from Lily you can try something like this :
var Lily = (function() {
return {
petal : function() {
console.log('Petal has been called');
},
someOtherMethod : function () {
console.log('someOtherMethod has been called');
}
}
})();
Lily.petal();
Lily.someOtherMethod();
I think what you need is this:
var Lily = (function() {
this.petal = function () {
//do A
}
});
The extra () you had on the end of your function caused it to be executed immediately: in other words, you had created what's known as an IIFE: Immediately Invoking Function Expression. Lily was being assigned the value of the return expression from that function, and since you weren't returning anything it was by default being set to undefined.
Furthermore, since you hadn't actually specified petal as a property of Lily, even if Lily had been defined, petal would have been undefined instead. Since saying function petal inside the Lily function doesn't add that property to the containing function, you have to specify the property by adding it to this.
My basic setup is a whole heap of Javascript under an anonymous self-invoking function:
(function () {
...
})();
My problem is that I can't seem to get access to the objects within this ASI function via the DOM tab. I tried both the following:
var MYAPP = function () {
...
};
var MYAPP = (function () {
...
})();
The first didn't fire at all. The second just said MYAPP is undefined in the DOM tab.
Is there a way around this?
In your first version, you are simply creating a function with the name MYAPP, but you are not executing it.
In the second version, your function is executed and its result is assigned to MYAPP. But your function does not seem to return anything, so MYAPP stays undefined.
See A Javascript Module Pattern on YUIBlog for an explanation of this pattern. Their example goes like this:
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
}
};
}(); // the parens here cause the anonymous function to execute and return
So your function basically returns an object containing all the public members. You can then access these with Firebug, too.