Access local variable inside a callback function - javascript

var inner = function() { console.log(x); }
// test 1
(function(cb) { var x = 123; cb(); })(inner);
// test 2
(function(cb) { var x = 123; cb.apply(this); })(inner);
// test 3
(function(cb) { var x = 123; cb.bind(this)(); })(inner);
// test 4
(function(cb) { cb.bind({x: 123})(); })(inner);
All tests result in:
ReferenceError: x is not defined
Do someone know how it is possible to access 'x' as a local variable inside the callback?

Fact: when you do var inner = function() { console.log(x); } in your first line, x is not defined. Why? Because, inside your inner function, there's no local declaration of x (which would be done with var x = something). The runtime will then look up in the next scope, that is the global scope. There isn't, also, a declaration of x, so x is also not defined there.
The only places where there is a variable called x are inside each one of your 4 IIFEs following. But inside the IIFEs, each x is a different variable, in a different scope. So, if what you want is to console.log() the x defined inside each IIFE, you are taking the wrong approach.
Keep in mind that, when you define inner, you are capturing the environment inside the function's closure. It means that, whatever value could x have there (in the declaration of the function), would be the available value to the x variable later, when the inner function would be used. The fact that your x there is not defined is only an accessory, and is not what is causing the undesired behavior.
So, what happens is that when you call your inner function inside any of your IIFEs, the x referred to inside the inner function declaration is a captured value of what x had as a value when the function was defined, not the value that x has now in the scope where the function is currently being called. This is what is called lexical scope.
To solve this, you would have to pass the value that you want to console.log() inside the inner function as a parameter to the inner function, as so:
var inner = function(x) { console.log(x); }
// test 1
(function(cb) { var x = 123; cb(x); })(inner);

The only way to access the local variable x in the callback, is to pass it as an argument:
var inner = function(some_var) { console.log(some_var); }; //logs 123
(function(cb) { var x = 123; cb(x); })(inner);
OR
var inner = function(some_var) { console.log(some_var); }; //logs 123
(function(cb) { var x = 123; cb.apply(this,[x]); })(inner);
OR
var inner = function(some_var) { console.log(some_var); }; //logs 123
(function(cb) { var x = 123; cb.call(this,x); })(inner);
FURTHER
Because JS is lexically scoped, trying to reference the local variable after the anonymous function has finished executing is impossible by any other means. If you don't pass it as an argument to make it available elsewhere, JS will see it as non-reachable and it will be eligible for garbage collection.

You could redefine the callback function in the current scope:
var inner = function() { console.log(x); }
(function(cb) { var x = 123; eval('cb = ' + cb.toString()); cb(); })(inner);
// or
(function(cb) { var x = 123; eval('(' + cb.toString() + ')')(); })(inner);
This will not work if the function relies on anything in the scope in which it was originally defined or if the Javascript file has been minified. The use of eval may introduce security, performance, and code quality issues.

Have you tried using events? Emit an event inside the anonymous function, then subscribe to it in your own function somewhere else that carries out your logic.

Related

Do I need to add a parameter to the function?

I am wondering if this way is correct:
var userInput = confirm('roll die?');
var rollDie = function() {
while(userInput) {
var dieSide = Math.floor(Math.random() * 6);
document.write('you rolled a ' + (dieSide + 1));
userInput = false;
}
}
rollDie(userInput);
Or do I need to write var rollDie = function(userInput) {
Javascript works with scopes. You call the function 'rollDie' from a scope where 'userInput' is a variable. The function 'rollDie' has its own scope. In your example there's no variable 'userInput' in the scope of the function rollDie. There for javascript is looking for the variable in an outer scope and find the variable. So your program is working but the code is not good code.
because you call the function rollDie with the parameter 'userInput' you should add 'userInput' as param to the function rollDie. var rollDie = function(userInput) {} It is always better the give a function all the params the function needs to execute. This prefents problems with the 'this' scope in javascript when you call the function in an other context and make it easier to refactor your code.
twoStrars is quicker :)
You should understand the difference and then choose for yourself.
Basically, you have these two patterns:
x as global variable:
var x = 1;
var f = function() {
console.log('x in f:', x);
x = 2;
}
console.log('x before f:', x);
f();
console.log('x after f:', x);
and x as argument:
var x = 1;
var f = function(x) {
console.log('x in f:', x);
x = 2;
}
console.log('x before f:', x);
f(x);
console.log('x after f:', x);
There two main differences:
if f uses a global variable, it is going to modify the global variable, whereas if it works with an argument, it does not affect any variables visible outside, i.e. the first code writes x after f: 2, whereas the second writes x after f: 1
if f uses a global variable, then it becomes less convenient to pass it different values. With an argument, you don't even need a global variable, you can call f(1); f(2); f(3456);. With global vaiables, you would accomplish the same with var x=1; f(); x=2; f(); x=3456; f();.
Instead of going more into details, I'll give you a link: Why are global variables evil?
Anyway, there are cases when global variables are good! I would make a global variable for a value which is constant and used by multiple functions (var GRAVITY = 9.81; or var BASE_URL = "https://stackoverflow.com/";)
This line:
rollDie(userInput);
…means you're trying to pass a value into your rollDie() method. This isn't strictly necessary because you have this variable declared globally:
var userInput = confirm('roll die?');
So, you could pass nothing in if you wanted, but if you want to write much cleaner code it's preferable to avoid having these global variables around as much as you can. The way you've written it – passing in a value to your function – is much nicer, so it's better to write var rollDie = function(userInput) {.

Why is non-static variable behaving like static?

function emergency() {
var ambulance = 100;
var callAmbulance = function() { alert(ambulance); }
ambulance++;
return callAmbulance;
}
var accident = emergency();
accident(); // alerts 101
I am referring to the variable 'ambulance'.
When I call accident(); it should call emergency() which should use the declared variable 'ambulance' [considering the global scope thing in javascript, still it could set the value to global] but its using old value 101 instead of setting again back to 100 - behaving more like static var.
What's the Explanation?
What you have there is called a closure. It means a function can access variables declared in outer functions (or in the global scope). It retains access even after the 'parent' function has returned. What you need to understand is that you don't get a copy. The changes performed on that variable are visible to your inner function, which in theory means you could have multiple functions sharing access to the same variable.
function f () {
var x = 0;
function a() { x += 1; }
function b() { x += 2; }
function show() { console.log(x); }
return {a:a, b:b, show:show};
}
var funcs = f();
funcs.a();
funcs.b();
funcs.show(); // 3
One thing to be aware of is that a subsequent call to f will create a new scope. This means a new x variable will be created (new a, b, show functions will be created as well).
var newFuncs = f();
newFuncs.a();
newFuncs.show(); // 1
funcs.a();
funcs.show(); // 4
So, how do you get a copy? Create a new scope.
function g () {
var x = 0;
var a;
(function (myLocal) {
a = function () { myLocal += 1; }
}(x));
x += 200;
return a;
}
JS only has pass-by-value so when you call the anonymous function, the xvariable's value will be copied into the myLocal parameter. Since a will always use the myLocal variable, not x, you can be certain that changes performed on the x variable will not affect your a function.
If, by any chance, you're coming from a PHP background you are probably used to do something like
use (&$message)
to allow modifications to be reflected in your function. In JS, this is happening by default.
You are creating a function definition which is not compiled at this time:
var callAmbulance = function() { alert(ambulance); }
And before you are sending it to the called function, you are incrementing the num:
ambulance++;
And then you are sending it to the called function:
return callAmbulance;
But whether you are sending it there or not, it doesn't matter. The below statement executes or compiles the function:
var accident = emergency();
And this takes in the current ambulance value which is 101 after the increment. This is an expected behaviour in creating function but not executing it. Please let me know, if you didn't understand this behaviour. I will explain it more clearly.

nodejs express: store parameters in variable

I am still new with nodejs, still not sure how to access a variable in a function and call the variable back.
check few links: but im getting really confused. Please help!
Node.JS: How to pass variables to asynchronous callbacks?
How can we access variable from callback function in node.js?
var express = require('express');
var app = express();
var router = express.Router();
var https = require('https').createServer( ssl_options, app);
var io = require('socket.io')( https );
**var user_id;
var room_id;**
router.use(function(req, res, next) {
next();
});
app.use('/chat',router);
router.route( '/chat/:user_id/:room_id' )
.get(function(req,res){
res.sendFile( __dirname + '/index.html' );
user_id = req.param('user_id');
room_id = req.param('room_id');
});
https.listen(3000);
io.on('connection', function(socket){
**console.log ( user_id );
console.log ( room_id );**
});
not sure how to access a variable in a function and call the variable back.
Here are some rules:
1. Variables declared inside a function are *local* to the function.
Here is an example of what local to the function means:
function do_stuff() {
var x = 10;
}
do_stuff();
console.log(x);
x does not exist until the function executes.
When the function finishes executing, x is destroyed and ceases to exist.
As a result, the line console.log(x); produces the error:
ReferenceError: x is not defined
The person who asked the question at your second link failed to understand that local variables are destroyed once a function finishes executing, so the username variable in their code cannot be accessed anywhere outside the anonymous function wherein the username variable was declared.
On the other hand, if you don't declare a variable with var, then javascript creates a global variable:
function do_stuff() {
x = 10;
}
do_stuff();
console.log(x); //=>10
That is equivalent to writing:
var x;
function do_stuff() {
x = 10;
}
do_stuff();
console.log(x); //=>10
It's generally considered bad practice for a function to manipulate the value of a variable outside the function. You should prefer the following:
function do_stuff() {
return 10;
}
var x = do_stuff();
In your case, express is the one that is going to be calling your anonymous function, and express just discards any return values. Presumably, express does something like this:
function express_get(func) {
console.log("express_get is executing");
requ = {greeting: 'hello'};
resp = {};
func(requ, resp); //Anything returned by func is not captured in a variable
}
//Here is an attempt to call express_get() and return
//the data rather than setting a global variable:
express_get(function(requ, resp) {
console.log("my callback is executing");
console.log(requ);
return {user_id: 1, room_id: 'A'};
});
--output:--
express_get is executing
my callback is executing
{ greeting: 'hello' }
Because express is calling your request handler function, and because express just discards any return value, there is no way to access the value you returned from the request handler function.
Maybe you are thinking about the problem the wrong way around? Instead of trying to figure out how to get the request data into the io.on('connect') code you should be thinking about how to get the io.on('connect') code inside the route handler function. What happens if you do this:
router.route(...).get(function(req,res){
user_id = req.param('user_id');
room_id = req.param('room_id');
io.on('connection', function(socket){
console.log ( user_id );
console.log ( room_id );
});
});
Based on all the rules discussed in this answer, you should try to determine:
Can the code inside the anonymous function passed to get() see the io variable?
Can the code inside the anonymous function passed to io.on() see the user_id and room_id variables?
2. A function's parameter variables are local to the function, too.
Here is an example:
function do_stuff(x) {
console.log(x); //=>hello
}
do_stuff("hello");
console.log(x); //=>ReferenceError: x is not defined
So x does not exist until the function executes, and x ceases to exist when the function finishes executing.
3. Variables declared inside a for loop are NOT local to the for loop.
Here is an example:
function do_stuff() {
for (var x=0; x < 10; ++x) {
console.log(x);
}
console.log(x) //=>10
}
do_stuff();
You can equivalently (and more clearly) write the function above like this:
function do_stuff() {
var x;
for (x=0; x < 10; ++x) {
console.log(x);
}
console.log(x) //=> 10
}
do_stuff();
4. Code inside a function can see the variables that existed in the surrounding scope outside the function at the time the function was *defined*.
Here is an example:
var x = 10;
function do_stuff() {
console.log(x);
}
do_stuff(); //=>10
Pretty simple. The surrounding scope means this:
//First line of program
^
|
| part of do_stuff() surrounding scope
|
v
------------------------+
function do_stuff() { |
//Do stuff |
} |
------------------------+
^
| part of do_stuff() surrounding scope
|
v
---------------------------+
function other_func() { |
|
|
//Do other stuff |
|
} |
---------------------------+
^
| part of do_stuff surrounding scope
|
v
//Last line of program
Note that the region of code inside other_func is not part of do_stuff's surrounding scope, so code inside do_stuff cannot see variables declared inside other_func.
With nested functions, the surrounding scope looks like this:
^ part of inner's surrounding scope
|
|
function outer() {
^
| part of inner's surrounding scope
|
v
----------------------+
function inner() { |
|
} |
----------------------+
^
| part of inner's surrounding scope
v
--------------------------+
function other_inner { |
|
} |
--------------------------+
^
| part of inner's surrounding scope
|
V
}
|
|
V
part of inner's surrounding scope
Here is an example of that:
var x = 10;
function outer() {
function inner() {
console.log(x);
}
inner();
}
outer(); //=>10
And for an anonymous function defined as a function argument, e.g.:
some_func(10, 20, function(req, resp) {.....});
that is almost identical to writing this:
function request_handler(req, resp) {
//Do stuff
}
some_func(10, 20, requestHandler);
And you can figure out the surrounding scope of the request_handler function using one of the diagrams above.
In computer science jargon, javascript functions are known as closures, and javascript functions are said to close over the variables in the surrounding scope that existed at the time the function was defined. If you are reading something that states some function is a closure, you can whisper to yourself, "When the function executes, it can see the variables in the surrounding scope that existed at the time the function was defined."
Here is a more complex example:
function outer() {
var x = 10;
function inner() {
console.log(x);
}
return inner;
}
func = outer();
//outer() has finished executing here.
func();
From rule 1, you might expect that after outer() finishes executing x will be destroyed, and therefore when inner() executes via func(), you will get a not defined error. However, that is not the case. inner() can still see x even though normally x would have been destroyed when outer() finished executing. inner() is said to close over the variables that existed in the surrounding scope when inner was defined.
Here is another example:
function outer() {
var x = 10;
function inner() {
console.log(x);
}
return inner;
}
func = outer();
//outer() has finished executing here.
var x = 20; //New code
func();
What will be the output there? 20? Nope. The inner() function sees the variables in the surrounding scope at the time inner() was defined--not the variables in the surrounding scope at the time inner executes.
One last example:
function outer() {
var funcs = [];
for(var x=0; x < 10; ++x) {
function inner() {
console.log(x);
}
funcs.push(inner);
}
return funcs;
}
ten_funcs = outer();
for(var y=0; y < 10; ++y) {
ten_funcs[y]();
}
What do you think the output will be? It turns out that every one of the ten_funcs outputs 10. That demonstrates that functions close over variables--not values. We know that we can rewrite outer like this:
function outer() {
var funcs = [];
var x;
for(x=0; x < 10; ++x) {
function inner() {
console.log(x);
}
funcs.push(inner);
}
return funcs;
}
So each of the ten_funcs sees the same x variable. After the functions are defined, the x variable that they can see in the surrounding scope is assigned a new value, then when each of the ten_funcs executes, it can see the variable x, and the last value assigned to x was 10. The person who asked the question at your first link was confused about this aspect of variable scoping and which variables the code inside a function can see.
The only other thing that needs to be explained is 'hiding':
var x = 20;
function do_stuff() {
var x = 10;
console.log(x);
}
do_stuff(); //=>10
This is an exception to rule 4. Inside a function, if you declare a variable with the same name as a variable in the function's surrounding scope, javascript creates a new local variable that hides the variable in the surrounding scope.

Javascript module pattern and function invocation

Hello I have started to learn some javascript and I can't wrap my head around this in "normal" functions. I don't understand why the following two functions output different results. f2 outputs 5, while f1 outputs 1. Why is that?
var f1 = function(){
var x= 1;
var add = function(){
x=5;
};
var result = function(){
console.log(x);
};
return {
add: add,
result: result
};
};
f1().add();
f1().result();
var f2= (function(){
var x= 1;
var add = function(){
x=5;
};
var result = function(){
console.log(x);
};
return {
add: add,
result: result
};
})();
f2.add();
f2.result();
The first example shows two invocations of f1().
The first invocation of f1() creates a new variable scope with x set to 1, and returns the object with the methods. The .add() then sets that x to 5.
The second invocation of f1() creates another new variable scope with x again set to 1, and returns the object with the methods. The .result() then returns that x which is still 1.
The second example only invokes f2() once, so there's no new variable scope with x and new methods being created.
So basically f1's two invocations initializes x with each call, and returns two different objects with methods that closer over the two different x variables.
The f2 is invoked once so there's one x variable shared by the one object with methods returned. Therefore the .add() call and the .result() call are using the same x variable.
Let me outline what happens in your code:
// Declares a function named f1.
var f1 = function () {
// Searches each scope (the scope of f1, the scope containing f1, etc.) for
// a variable named x. If found, it will reassign it to 1. If the search reaches
// the global scope and no variable is found it will declare and initialize
// a global variable.
x = 1;
// Declares a local variable named add to a function that reassigns the value of x.
var add = function () {
x = 5;
};
// Declares a local variable named result to a function that logs the value of x.
var result = function () {
console.log(x);
};
// Returns an object containing each function.
return {
add: add,
result: result
};
};
// Calls f1 and the returned add function.
f1().add();
// Calls f1 again (which reassigns x) and calls the returned result function.
f1().result();
// Creates a variable named f2 and assigns to the result of applying an anonymous
// function. f2 now references the returned object.
var f2 = (function () {
// Reassigns x, does not create a new variable.
x = 1;
var add = function () {
x = 5;
};
var result = function () {
console.log(x);
};
return {
add: add,
result: result
};
})();
// The difference now is that the function that contains add and result is only
// called once, during the initialization of f2. Had you written var g = f1();
// g.add(); g.result(); you would have gotten the exact same results.
f2.add();
f2.result();

Why is the variable inside this function global?

I thought any variable defined in a function would be local but I can easily access variable 'e' outside of its function.
function change() {
var d = 6;
e = 7;
}
change();
alert(e); //> alerts 7
Because new variables will enter the global scope by default. var prevents this from happening by constraining a variable's existence to be within the current scope.
Because it was declared without var it becomes part of the global window object.
You've not explicitly declared it as such, so it has taken global scope.
Thats because e is global by default, using var make a scope varible.
You can read more about this in Javascript Garden Scope and Namespaces
I am guessing that you are going under this assumption that
JSLint expects that a var will be
declared only once, and that it will
be declared before it is used.
Problem with your code is you are using one var, but your second line has no var in front of it. That is pushing that varaible e into the global namespace.
Why is it happening? You used a semicolon instead of a comma in the variable declaration.
function change() {
var d = 6, //Change this to a comma
e = 7;
}
change();
alert(e); //will produce an error now
It is surprisingly easy to create global variables, here are some other gotchas I've seen.
// :-( antipattern: implied global variable
function sum(x, y) {
result = x + y; // result is global
return result;
}
// :-) better
function sum(x, y) {
var result = x + y; // result is local
return result;
}
// :-( antipattern: chain assignments as part of a var declaration
function foo() {
var a = b = 0; // b is global
}
// :-) better
function foo() {
var a, b;
a = b = 0; // both local
}

Categories