I'm trying to assign a variable to itself in a function, and if the variable has the same name as an argument to the function it doesn't seem to work, but does if they're not the same name. A code example shows this more clearly.
Is this behavior I should expect? This is a pared down example for my d3 use case which prompted this question. I've shown that below as well.
Non working example
var a;
function assign(a) {
a = a;
}
assign("test")
console.log(a)
undefined
Working Example
var a;
function assign(b) {
a = b;
}
assign("test")
console.log(a)
test
Use case
var data
d3.csv("data.csv", function(error, data) {
//Doesn't work for me
data = data
}
console.log(data)
undefined
In your first example, the argument a that is passed to the function shadows the variable a which is defined outside, so: a=a is assignment of the argument (that was passed to the function) to itself.
In Javascript the scope is functional level scope, so whenever the variable is referenced it is searched for its declaration in the containing scope(function), if it finds it it uses it else it keep searching in prototypical chain upto global scope. So in your case it tries to search a and it founds it as argument a so it stops the search there & uses a from argument.
So to avoid the conflict you have use two ways.
Use the different names
If you want to use the same name then use the explicit scope resolution.
Ex.
var a;
function assign(a) {
Global.a = a //Global is placeholder here for outerscope that variable a is coming from.
}
assign("test")
console.log(a);
Useful links for more clear understanding
Closures
Variable Hoisting
you could use the window object to access the global variable.
var a;
function assign(a) {
window.a = a; // specifying the scope.
};
assign("test")
console.log(a)
More information on 15-common-javascript-gotchas
Related
I run into a bit of confusion regarding scoping with respect to where a callback is defined.
function test(){
var b = 3
var fun = function(){
var printingFunction = function(){
console.log(b)
}
printingFunction()
}
return fun
}
test()() //prints 3, as expected because of closures
However, the following doesnt work
function test(){
var b = 3
var fun = function(cb){
cb()
}
return fun
}
test()(function(){console.log(b)}) //b is not defined
I would expect that since the function is passed as an argument and has not been defined before, its definition takes place inside 'fun' and therefore it would have access to b. Instead, it looks a lot like the function is first defined in the scope where its passed and THEN passed as an argument. Any ideas/pointers?
EDIT: Some extra pointers.
someFunction("a")
We couldn't possibly claim that "a" is a definition. What happens here implicitly is that "a" is assigned to a variable named by the argument name so var argumentNameInDefintion = "a". This happens in the body of someFunction.
Similarly we cant claim {} is a definition in : someFunction({}). So why would:
someFunction(function(){})
decide that function(){} is a definition is beyond me. Had it been
var a = function(){}
someFunction(a)
everything would make perfect sense. Maybe its just how the language works.
Scoping in JavaScript is lexical. If you look at your examples, you can see that where printingFunction is defined, lexically (e.g., in the source text) b is declared in a containing scope. But in your second example, it isn't. That's why b can't be resolved in your second example but can in your first.
The way it works is that when a function is created, it has a reference to a conceptual object containing the variables and such in the scope in which it's created (which has a fancy name: "Lexical Environment object"); and that object has a reference to the one that contains it. When looking up a variable reference, the JavaScript engine looks at the current lexical environment object and, if it finds the variable, uses it; otherwise, it looks to the previous one in the chain, and so on up to the global one.
More details can be found:
In this SO question's answers
In this post on my anemic little blog
The issue stems from me not understanding that function(){} on its own is a definition and so is "a" and {}. Since these are definitions then the definition scope of the function passed is appropriately placed where it is and the world makes sense again.
In first case, it is forming a closure and has access to the variable "b" but in second case it does not form a closure at all. If you put a debugger just before the cb() inside the function, you will notice that there is no closure formed and the reason of that being the callback function is suplied to the function as an argument and it becomes local to that function which does not have any knowledge of the variable b.
Think of it as two different functions, one in which it has a local variable "b" and in other no local variable but we are trying to access it which throws the reference error.
I have a question about this code below:
function myfunc () {
return 2 + 2;
}
console.log(myfunc);
Does anyone know why, when we log 'myfunc' to the console, we get the entire function itself back? Or in other words, is 'myfunc' acting as a variable that holds the function's contents, or is it just referencing that function?
Because if I go ahead & add this to the code...
myfunc = undefined; //or any other value like myfunc = 20;
...then since myfunc's value is changed, I can no longer use it to invoke the function. So what is 'myfunc' really?
The answer is yes, a function declaration creates a symbol in the local function scope (or global scope if the declaration is in that context) that works exactly like a variable declared with var (though function declarations are hoisted above var declarations).
Now, a function expression like this:
var x = function helloWorld() { return "hello world"; };
does not create a local "helloWorld" symbol (except when it does). The value of a function expression is a reference to the created function, and that can be assigned to a variable just like any other value.
This question really consists of two:
1 - Do functions create their own $scopes in javasript?
e.g.$scope.foo = function() {
$scope.bar = "Bar";
}
I ask this because in one such test that I'm trying to run I check to determine the existence of a variable on the scope, run a function and then recheck:
iit('getPatientFirstName should attach patientName to the scope', function() {
// Passes
expect(scope.patientName).toBeUndefined();
spyOn(scope,'getPatientFirstName').andCallThrough();
scope.getPatientFirstName(detailsBody);
// Fails
expect(scope.patientName)not.toBeUndefined();
});
// In the controller
$scope.getPatientFirstName = function (dataBody) {
$scope.patientName = dataBody.patientFirstName;
};
So this suggests that they may have their own scope? If this is the case can we test this?
2 - Is a valid alternative just to use an object that exists outside the function:
$scope.patientDetails = {
patientName: ''
};
$scope.getPatientFirstName = function (dataBody) {
$scope.patientDetails.patientName = dataBody.patientFirstName;
};
Thanks
EDIT
Considering the two answers has raised another question - is a variable (attribute or object) considered global if its attached to the $scope? It can be accessed in any function in that controller but as far as being called in a completely different controller - yes it can?
Confirm/Deny anyone?
And it appears that assigning the variable to the $scope global is considered valid for the purposes of my test.
Regarding your first questions, no, functions do not create new $scopes by their own (note that we are talking about scopes and not closures, which are two different concepts).
In your example, the $scope.foo function creates a new bar property on the same $scope object where foo is defined. The final $scope object would look something like this:
$scope {
foo: function() {
$scope.bar = "Bar";
},
bar: "Bar"
}
The problem with your test may be related to the missing . before the not.
expect(scope.patientName).not.toBeUndefined();
Is a valid alternative just to use an object that exists outside the
function:
Yes, you can use an object that's defined outside the function.
If the object is on the same $scope object you will have no problems, just make sure it is defined before you run the function, otherwise you will get a $scope.patientDetails is not defined error.
I'll answer the question a little differently than where you are taking it. I hope it helps you to rethink your stategy.
1 - Do functions create their own $scopes in javasript?
They do create an own scope. But the surrounding scope is also available within the scope. So when you write a function within a function, the inner function can use all the variables of the outer function
Example
function foo() {
var a=5;
function bar() {
var b=4;
}
function hello() {
var c=3;
}
}
a is available for all the functions, foo, bar and hello.
b is not available for foo nor for hello.
c is not available for foo nor for bar.
2 - Is a valid alternative just to use an object that exists outside the function:
So, you should try to make an outer function; there you can declare variables that will be strictly contained within that outer function.
Any function you create within this outer function can make use of that outer scope.
Variables that are global should be avoided if possible.
An example: jQuery.
jQuery has 1 variable that is global: var jQuery ( You can also access it by its alias $ ).
The variables that jQuery uses will not be in conflict with any variables you use.
And anything you want from jQuery, you will have to go through $ (or jQuery)
Quite a javascript 101 question, but, here goes:
function test(a){
var a='test';
}
Is the "var" required to keep the variable from going global?
function test(a){
a='test';
}
Would this suffice?
How about if the function is called with a undefined?
function test(a){
a='test';
}
test();
In the above snippet, would a become global?
Every parameter is implicitly a var.
(The argument value supplied doesn't matter.)
You can pass arguments to a function. These are considered local variables inside the functions scope regardless of wether the function is called with those arguments or not.
If the function is called without supplying a value for all the arguments, the arguments that are not passed when calling the function are set to a value of undefined, but they are still declared inside the functions scope as locals.
function test(a){
var a = 'test';
}
Is the "var" required to keep the variable from going global?
No the var keyword is not required, and in fact should not be used, as you're redeclaring the a variable, and redeclaring variables is not allowed.
function test(a){
a = 'test';
}
Would this suffice?
Yes, that's fine and is the way it should be done. You alread have a variable named a, and now you're setting it to a different value.
How about if the function is called with a undefined?
function test(a){
a = 'test';
}
test();
As mentioned above, it doesn't matter, the argument a is still declared as a local variable inside the function, the value is just set to undefined, so the var keyword should not be used as you're not creating a new variable, a already exists, you're just giving it a new value.
If you are not using "use strict" then if you don't use var, a will be attached to the global namespace implicitly, which in a browser is equivalent to window.a. This is known as "polluting the global namespace" and is generally considered bad practice.
This is not the same as a formal argument bound to a name, as is in your examples. This lives in the function scope as 'a'
However, if you use "use strict", the absence of var throws an error in environments that support "use strict" for any variables not formally bound in the function signature. It basically safeguards against bad practices and potential mistakes/bugs in your code that are easy to make
Edit:
I actually think its worth mentioning let too, which is a way of explicitly binding a variable for use in a given scope. So you needn't use var, if you use let
Check support for this keyword in your environment first!
Well, there are some points to comment:
First of all, within a function variables must have var if they are not a reference to an outside var:
var outside_var = "OUT!";
var myFunction = function() {
var inner_var = "IN";
console.log(outside_var); //Will prompt "OUT!"
console.log(inner_var); //Will prompt "IN"
}
console.log(outside_var); //Will prompt "OUT!"
console.log(inner_var); //Will prompt undefined
Another point is that every var defined as an argument, is already defined in function scope, you don't need to declare it with var:
var outside_var = "OUT!";
var myFunction = function(a) { //imagine you call myFunction("I'M");
var inner_var = a + " IN";
console.log(outside_var); //Will prompt "OUT!"
console.log(a); //Will prompt "I'M"
console.log(inner_var); //Will prompt "I'M IN"
}
console.log(outside_var); //Will prompt "OUT!"
console.log(a); //Will prompt undefined
console.log(inner_var); //Will prompt undefined
I do not understand this behavior:
var a = 1;
console.log('a is undefined1:', a == undefined);
var a;
//iterate selected jQuery elements:
jQuery.each(this, function(index, htmlElement) {
console.log('a is undefined2:', a == undefined);
var a;
Returns:
a is undefined1: false
a is undefined2: true
If the last line (var a;) is commented out, this is returned:
a is undefined1: false
a is undefined2: false
I would expect always the latter output. What do I not know?
Thanks so much!
Putting var a inside a function creates a different a variable that is scoped to that function.
Since you don't assign a value to it, it is undefined.
When you comment it out, you are testing the outer a which has the value of 1.
Variables are hoisted. It doesn't matter where in a function you use var foo, the foo for that function still applies to the whole function.
Declaring variable within function using var makes local copy (new variable) with scope on the whole function - it does not matter whether it is used before it is declared.
Never declare variables without var.
If you want to access the golobal variable and you have local variable of the same name, you can access the global foo variable using window.foo