I want to understand how nested functions work for example
function outer(){
console.log("Hello from outer function")
function inner(){
console.log("Hello from inner function")
}
}
I want to understand what happens when i call outer(), how can i call the inner function, what is the execution context for inner function,
As you have not called inner() anywhere in the outer() function so that is why inner() is not getting called by default.
JavaScript will automatically allocate memory when values are initially declared. There is a link where you can read about memory management in JS
You cannot call inner() from outside. Once outer() finishes executing inner() will be garbage collected, since there is no other references to it.
function outer(){
console.log("Hello from outer function")
inner();
function inner(){
console.log("Hello from inner function")
}
}
outer();
Using a closure way:
function outer() {
var name = 'StackOverflow';
function inner() {
console.log("I am in Inner function at " + name);
}
return inner;
}
var outerfunction = outer();
outerfunction();
But if you see we are calling inner() in the outer function indirectly.
I think you mean this syntax:
functionName()();
this is syntax happen when a function return another function. like the code blow:
function f1(value1) {
return function f2(value2) {
return value1 + value2;
};
}
Related
is putting the function declaration beside the return statement causing the function not to hoist?
or putting it inside the return statement turns it into a function expression that's why it isn't hoisted?
// Hoisting doesn't work in here
function outer() {
console.log(inner); // Isn't hoisted
return function inner() {
console.log("hello world");
};
}
outer();
// Works in here
function outer() {
console.log(inner);
function inner() {
console.log("hello world");
}
return inner;
}
outer();
If you put a function immediately after the return keyword, it's no longer a function declaration; return can only have an expression to the right of it, so it's interpretered as a function expression, and function expressions aren't hoisted (or have their name put into the surrounding scope as a variable).
This isn't something particular to return. Any other keyword that forces the function part to be interpreted as an expression will have the same effect:
function outer() {
console.log(typeof inner); // Isn't hoisted
if (function inner() {
console.log("hello world");
}) {
}
}
outer();
function outer() {
console.log(typeof inner); // Isn't hoisted
switch (function inner() { console.log("hello world"); }) {
}
}
outer();
function outer() {
console.log(typeof inner); // Isn't hoisted
const x = function inner() {
console.log("hello world");
};
}
outer();
For a function to be interpreted as a function declaration (and function declarations are the only functions which get hoisted), the function must be a standalone statement, not directly connected to any other statements in the code via operators or keywords.
Please have a look at the following JavaScript snippet of code. This has to do with function scoping and hoisting in javascript. I can't call window.innermost() as it is undefined as it's not in scope.
Anyone know another way besides attaching it to the windows object. Windows Object still doesn't work in this case.
function outer(){
function callback() {
window.innermost = function() {
alert("hello from inner most")
}
}
}
(function caller() {
window.innermost(); // this is undefined
}());
You would have to call both the outer and the callback:
function outer(){
var callback = function() {
window.innermost = function() {
alert("hello from inner most")
}
}
callback(); // Call Callback
}
outer(); // Call outer
(function caller() {
window.innermost(); // should work
}());
If both of these functions are not called before you run the anonymous function, then the window.innermost won't be defined (or undefined if you will).
Also, notice that I set callback as a variable, which is an alternative way of defining a function within a function.
Is it possible to call the function locally defined in another function in JavaScript? I have a code pretty much like this:
var module = function () {
function inner() {
// Some code here
}
// Some code here
}
var originalModule = module;
var module = function () {
originalModule();
// inner() must be called here
}
So I'm overriding the original module implementation, but at some point in the new implementation I need to call inner() function. I cannot edit the original implementation. So far the only way I see is to copy inner() function from original and define it in the new one. Is there another way?
As inner() is defined inside of module() scope, you can't access it outside of this scope..
This pattern is used to implement private methods of module().
It's usually not a good practice, but you could do something like this:
function a(x) { // <-- function
function b(y) { // <-- inner function
return x + y; // <-- use variables from outer scope
}
return b; // <-- you can even return a function.
}
a(3)(4); // == 7.
If I have a function inside another function but the inner function doesn't use the outer function's variables, will the inner function still be a closure?
function someFunc(){
return function(){
\\do some more stuff
}
}
Whenever you see the function keyword within another function, the inner function has access to variables in the outer function.
function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + tmp);
}
bar(5);
}
foo(2);
This will always alert 10, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo.
For info about closures, refer: http://javascriptissexy.com/understand-javascript-closures-with-ease/
In parent:
function outer(){
function inner(){
alert("hello");
}
}
in iframe
parent.outer.inner();
does not work.
Edit: So they are private. No problem. The reason for doing this is to try and hide these functions from global scope as much as possible. I thought putting them behind a single function name with a pretty unique name would be the best way to do this.
Essentially do I need to
parent:
function outer(action){
if(action == "inner")
inner()
function inner(){
alert("hello");
}
}
iframe:
parent.outer("inner");
Is there a more elegant way of doing this?
Nested functions are private and you can at best only specify arguments for inner functions outside the outer function.
Explanation can be found here
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope
under "Nested functions and closures"
This seems to answer my edit fairly well
How to turn a String into a javascript function call?
By using closure :
function outer(){
function inner(){
alert("I am Inner");
}
return inner ;
}
var x = outer();
x();
If you want to use variable of inner function than we can do in this way :
function outer(){
function inner(){
var y=10; return y;
}
return inner ;
}
var x = outer();
x();
One approach is using an object
function Outer(){
this.inner = function(){
alert("hello");
}
}
var o = new Outer()
o.inner();