Executing another function from other function in javascript

Question

Hey guys am a bit confused in running a function from the other. What I have tried is:

var a = (function() {
 var babe = function() {
 console.log('yay');
 };
})();

When I run the code like a.babe() it gives me error like TypeError: Cannot read property 'babe' of undefined. Why is it happening like this?

I want to call the function babe from a ... How can i do it? I hope you guys can help me ...

Thanks in advance.

Answer 1

You are creating a function called babe and it stays only within the scope of the immediately invoked function expression (IIFE) surrounding it. And since you are not returning anything to the caller, by default, the function call will be evaluated to undefined and that will be stored in a. That is why you are getting the error,

TypeError: Cannot read property 'babe' of undefined

It means that, you are trying to access a property called babe on an undefined value. In this case, a is undefined.

Instead of all this, you can simply return the babe function from the IIFE, wrapped in an object, like this

var a = (function() {
 return {
 babe: function() {
 console.log('yay');
 }
 };
})()

Now, that the returned object is assigned to a, you can invoke babe function like this

a.babe();

Answer 2

var a = {
 babe: function() {document.write('yay');}
}
a.babe();

Answer 3

babe is a local variable to the IIFE in that code. It isn't returned. It isn't a property of anything. It isn't accessible.

You have to expose it publicly if you want it to call it from outside that function.

---

 var a = (function() {
 var babe = function() {
 console.log('yay');
 }
 return babe;
 })();
 a();

---

 var a = (function() {
 var babe = function() {
 console.log('yay');
 }
 return {
 "babe": babe
 };
 })();
 a.babe();

Answer 4

Why have you made a a self executing function? What you want to do is to make a function babe part of an Object a for that, simply do this:

var a = {
 babe: function() {document.write('yay');}
}
a.babe();

I have made an object a and added a function babe inside it.. then used the dot notation to access the function inside object a

Answer 5

To use your code you must do

var a = (function() {
 var babe = function() { console.log('yay'); } 
 return babe
})();
a();

To make it a.babe() look at @thefourtheye or @Quentin.

Answer 6

The dot syntax is used to access a "property" of an object. So, in a simple example, you could use something like:

var a = {
 babe: function(){ console.log('yay') }
};
a.babe(); // yay

In the case of your example, if you want to create a closure to hide other variables and functions from the global scope, you have to return an object that will then get assigned to a:

var a = (function() {
 return {
 babe: function(){ console.log('yay') }
 }
})();
a.babe(); // yay

Just remember, anytime you use a dot, the variable in front HAS to be an object.