This is my IIFE function
var test = function(){
console.log('fire');
}();
It invokes at start. But how do I call this again?
var fireTestFn = function(){
test();
}
fireTestFn(); // test() is not a function
JSbin https://jsbin.com/cesuzimogu/edit?js,console
You could return test from inside using a named function expression.
var test = function fn(){
console.log('fire');
return fn;
}();
The result of the IIFE will be assigned to test, which is obviously not a function, because you're not returning a function from the IFEE (or anything for that matter). Keep it simple; what you want is a named function you can call anytime as many times as you want:
function test() {
console.log('fire');
}
test(); // call as often as you want
Something like this will work
var myNamespace = {};
(function(ns) {
ns.test = function(){
console.log('fire');
};
/*ns.myOtherFunction = function(var1) { }*/
})(myNamespace);
var fireTestFn = function(){
myNamespace.test();
};
fireTestFn();
See example here: https://jsbin.com/helumoveqe/edit?js,console
As the error says
test() is not a function
When you self-invoked the function, the result was stored into test.
In order to be able to use test as a function and call repeatedly elsewhere, do not self-invoke
var test = function(){
console.log('fire');
};
or have the function return an inner function
var test = function () {
return function () {
console.log('fire');
}
};
Related
I'm pretty sure this is n00b question, but I'm completely new to javascript. I'm wondering why this code only prints "hello" but when I comment out the first function, that's when I get the second function to print the other two words. How does this make sense?
var function1 = createFunction();
function createFunction()
{
console.log("hello");
}
function1();
function createFunctionPrinter(word)
{
console.log(word);
}
var printSample = createFunctionPrinter('sample');
var printNoo = createFunctionPrinter('noo');
printSample(); //should console.log('sample');
printNoo(); //should console.log('noo');
function1 is the return value of calling createFunction which is undefined because createFunction has no return statement.
undefined is not a function, so calling function1() raises an exception and execution halts.
If you want to refer to an method, you should leave the (), as the function call return undefined.
See this example
function createFunction()
{
console.log("hello");
}
var function1 = createFunction;
function1();
function createFunctionPrinter(word)
{
console.log(word);
}
var printSample = createFunctionPrinter;
var printNoo = createFunctionPrinter;
printSample('sample'); //should console.log('sample');
printNoo('noo'); //should console.log('noo');
Fixing function1 and createFunction() should be easy, provided the fact no arguments are needed for this. Simply set var function1 = createFunction without () and you it will effectively make function1 call createFunction as if that was the function's name.
createFunctionPrinter() is a bit different. My preferred approach is the use of a prototype, which will take an argument (word) when called, and then when you call its print() method, it will essentially print your text. The assignment of printSample and printNoo is similar, but you have to use the new keyword. Finally, to make the functions print, use something like printSample.print().
function createFunction() {
console.log("hello");
}
function createFunctionPrinter(word) {
this.word = word;
this.print = function() {
console.log(word);
}
}
var function1 = createFunction;
function1();
var printSample = new createFunctionPrinter('sample');
var printNoo = new createFunctionPrinter('noo');
printSample.print();
printNoo.print();
P.S.: This might not the intended use of prototypes, but I believe it will make your life easier to use them in this case.
var function1 = createFunction();
function createFunction()
{
// return a function that prints a message
return function() {
console.log("hello");
}
}
function1();
I have two functions name init
One is declared using function declaration and another using function expression, like this:
function init() {
alert ('init 1');
}
var init = function(){
alert('init 2');
}
init();
When i call the init function it alerts init 2.
Demo
My question is:
1- Why javascript does not throw error as both functions have same name.
2- How can i call the first function?
Why javascript does not throw error as both functions have same name.
They don't have the same name. The second is a variable init containing an anonymous function. The first is a function named init.
You can test this by doing the following on both:
console.log(init.name);
You'll see that the first does indeed have a name init, whereas the second has no name.
How can i call the first function?
In this example the first can't be called after using init for your variable for the second. Unless you have another reference to the first like so:
function init() {
alert ('init 1');
}
var original = init;
Declarations in JavaScript are hoisted. A function declaration is one type of a declaration. Hence your program is equivalent to:
var init = function init() {
alert("init 1");
};
var init = function () {
alert("init 2");
};
init();
If you call init before your second definition then it would alert init 1:
function init() {
alert("init 1");
}
init();
var init = function () {
alert("init 2");
};
Because of hoisting you can even call init before it appears in the program:
init();
function init() {
alert("init 1");
}
var init = function () {
alert("init 2");
};
Just remember than no matter in what order they appear in the program, the function declaration always comes first:
init();
var init = function () {
alert("init 2");
};
function init() {
alert("init 1");
}
Hope that helps.
There is nothing fundamentally different between what you are doing and
var i = 1;
var i = 2;
No, JS does not throw an error, and no, once you've redefined i you can't get the old value back.
In ES6 and some modern browsers, you can say
const i = 1;
and then the engine will complain if it's redefined.
You can make kind of namespace:
var p1 = {
init: function() {
alert('init 1');
}
};
var p2 = {
init: function() {
alert('init 2');
}
};
var init = function() {
p1.init();
p2.init();
};
init();
Running ...
Javascript gets the last defination of function.
You can rename it unique or you can "use strict" to make it local function.
function functions(){
"use strict"
var init = function(){
console.log("b");
};
return {
start : init
}
};
var fn = new functions();
fn.start();
This works:
function init() {
alert ('init 1');
}
var init = (function(oldInit) { return function() {
oldInit(); // Call the first definition this way
alert('init 2');
}; })(init);
init();
The trick is to have the second init() remember the previous init. Javascript doesn't throw an error because it's often useful to redefine functions.
I do this
function myFunction() {
var myVar = "I think I am encapsulated";
function getMyVar() {
return myVar;
}
}
var myProperty = myFunction;
myProperty.getMyVar(); // tells me myProperty.getMyVar is not a function.
and
function myFunction() {
var myVar = "I think I am encapsulated";
function getMyVar() {
return myVar;
}
}
var myProperty = myFunction();
myProperty.getMyVar(); // tells me myProperty is undefined
and even
function MyFunction() {
var myVar = "I think I am encapsulated";
function getMyVar() {
return myVar;
}
}
var myProperty = new MyFunction();
myProperty.getMyVar(); // tells me myProperty.getMyVar is not a function.
and in all three cases I get problems. I have included the problem as in line comment in all three sections. Now, before someone tells me to just use a closure, I am not trying to understand closures, I am trying to understand exactly what happens with inner functions.
If you can explain above, I would grateful. Because it is counter intuitive to me.
Thanks
What you did is just define a function inside myFunction, creating a closure ...
To remedy the implementation, make getMyVar an instance member:
function myFunction() {
var myVar = "I think I am encapsulated";
this.getMyVar = function () {
return myVar;
}
}
You aren't exposing the getMyVar function.
You want:
function myFunction() {
var myVar = "I think I am encapsulated";
this.getMyVar = function() {
return myVar;
}
}
However, myVar is also locally scoped to the function execution... and the funciton hasn't been executed.
The last lines need to be
(new myFunction()).getMyVar();
EDIT: Though perhaps all you're looking for is pseudo-namespacing? In which case you can do:
var myObject = {
myProperty: "value",
myFunction: function() { }
}
Or, more likely you're trying to make myVar act like a private member, in which case you can do:
var myObject = function() {
var myVar = "I think I am encapsulated";
return {
getMyVar: function() {
return myVar;
}
}
}(); //self-executing function
I have the following piece of code:
function initValidation()
{
// irrelevant code here
function validate(_block){
// code here
}
}
Is there any way I can call the validate() function outside the initValidation() function? I've tried calling validate() but I think it's only visible inside the parent function.
function initValidation()
{
// irrelevant code here
function validate(_block){
console.log( "test", _block );
}
initValidation.validate = validate;
}
initValidation();
initValidation.validate( "hello" );
//test hello
Hope that you are looking for something like this
function initValidation()
{
// irrelevant code here
this.validate = function(_block){
// code here
}
}
var fCall = new initValidation()
fCall.validate(param);
This will work.
Hope this addresses your problem.
You can call validate from within initValidation. Like this.
function initValidation()
{
// irrelevant code here
function validate(_block){
// code here
}
return validate(someVar);
}
validate is not visible to anything outside of initValidation because of its scope.
Edit: Here's my suggestion of a solution.
(function() {
function validate(_block){
// code here
}
function initValidation()
{
// irrelevant code here
return validate(someVar);
}
function otherFunctions() {
// ...
}
// initValidation = function
}());
// initValidation = undefined
All of your functions will be hidden to anything outside the function wrapper but can all see each other.
This invocation will return function statement, which is function validate.
So you can invoke directly after the first invocation.
function initValidation() {
// irrelevant code here
return function validate(_block) {
// code here
}
}
initValidation()();
I know this is an old post but if you wish to create a set of instances that you wish to work with that reuse the code you could do something like this:
"use strict";
// this is derived from several posts here on SO and ultimately John Resig
function makeClassStrict() {
var isInternal, instance;
var constructor = function(args) {
if (this instanceof constructor) {
if (typeof this.init == "function") {
this.init.apply(this, isInternal ? args : arguments);
}
} else {
isInternal = true;
instance = new constructor(arguments);
isInternal = false;
return instance;
}
};
return constructor;
}
var MyClass = makeClassStrict();// create "class"
MyClass.prototype.init = function(employeeName, isWorking) {
var defaultName = 'notbob';
this.name = employeeName ? employeeName : defaultName;
this.working = !!isWorking;
this.internalValidate = function() {
return {
"check": this.working,
"who": this.name
};
};
};
MyClass.prototype.getName = function() {
return this.name
};
MyClass.prototype.protoValidate = function() {
return {
"check": this.working,
"who": this.name
};
};
var instanceBob = MyClass("Bob", true);// create instance
var instanceFred = MyClass("Fred", false);// create instance
var mything = instanceFred.internalValidate();// call instance function
console.log(mything.check + ":" + mything.who);
var myBobthing = instanceBob.protoValidate();
console.log(myBobthing.check + ":" + myBobthing.who);
I know this thread's been here for quite some time but I thought I'd also leave my 0.02$ on how to call inner functions from outside their scope (might benefit somebody).
Note that in any place, a better design decision should be taken into consideration rather than some hackish workaround which will bite you back later.
How about using function expressions instead of function statements and making use of the global scope.
var innerFn;
function outerFn() {
innerFn = function(number) {
return number ** 2;
}
}
outerFn();
console.log(innerFn(5));
// if there's more complex code around and you could write this defensively
if (typeof innerFn !== 'undefined') {
console.log(`we are squaring the number 5 and the result is: ${innerFn(5)}`);
} else {
console.log('function is undefined');
}
Or, you can make use of closures:
function outer() {
// initialize some parameters, do a bunch of stuff
let x = 5, y = 10;
function inner() {
// keeps references alive to all arguments and parameters in all scopes it references
return `The arithmetic mean of the 2 numbers is: ${(x + y) / 2}`;
}
return inner;
}
innerFn = outer(); // get a reference to the inner function which you can call from outside
console.log(innerFn());
Create a variable outside the parent function, then in the parent function store your required function in the variable.
Var Store;
Function blah() {
Function needed() {
#
}
Store = needed;
}
As a minor variation of Esailija's answer, I did this:
function createTree(somearg) {
function validate(_block) {
console.log( "test", _block );
}
if (somearg==="validate") { return validate; } // for addNodes
// normal invocation code here
validate(somearg);
}
function addNodes() {
const validate = createTree("validate");
//...
validate( "hello" );
}
createTree("create");
addNodes();
//validate("illegal");
so validate() is now perfectly shared between createTree() and addNodes(), and perfectly invisible to the outside world.
Should work.
function initValudation() {
validate();
function validate() {
}
}
Function definition:
function initValidation() {
// code here
function validate(_block){
// code here
console.log(_block);
}
return validate;
}
Call it as below:
initValidation()("hello");
function initValidation()
{
function validate(_block){
console.log(_block)
// code here
}
// you have to call nested function
validate("Its Work")
}
// call initValidation function
initValidation()
(function(){
var a = function () {
alert("hey now!! ");
};
return {"hi":function(){return a;}};
})();
hi();
This code doesn' t work. How do i expose a function??
The self invoking function returns an object with the property hi, this object is not added to the global scope so that you can use the property directly. Put the result of the function in a variable:
var o =
(function(){
var a = function (){
alert("hey now!! ");
};
return {"hi":function(){return a;}};
})();
Using the property to call the function will only return the function contained in the variable a, so you have to call the return value from the function to call the function that contains the alert:
o.hi()();
Demo: http://jsfiddle.net/Guffa/9twaH/
There are two basic ways:
var MyNameSpace = (function(){
function a (){
alert("hey now!! ");
};
return {a: a};
})();
MyNameSpace.a();
or
(function(){
function a (){
alert("hey now!! ");
};
MyNameSpace = {a: a};
})();
MyNameSpace.a();
I prefer the 2nd way since it seems cleaner
It is called the "revealing module pattern" btw, which you can read up on to understand it better :)
https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
var obj = (function(){
var a= function (){
alert("hey now!! ");
};
return {"hi":function(){return a;}};
})();
obj.hi()
You have to assign the return value of the anonymous function to a variable in the current scope:
var f = (function() {
var a = function() {
alert("hey now!! ");
};
return {
"hi": function() { return a; }
};
})();
f.hi()();
It?
(function(){
var a = function () {
alert("hey now!! ");
};
return {"hi":function(){return a;}};
})().hi()();
I suppose in order to expose the function, instead of its code, the syntax should be
var obj2 = (function(){
var a= function (){
alert("hey now!! ");
};
return {"hi":a};
})();
alert(obj2.hi());
Or you could wrap your 'hi' function in an IIFE like so...
var myFunction = (function(){
var a = function () {
alert("hey now!! ");
};
return {
"hi": (function(){
return a;
}())
};
})();
myFunction.hi();