Variable Scope and Var - javascript

It all started with these simple lines of code:
a = 3;
b = 2;
function line(x) {
var a = 5;
var b = 4;
return a*x+b;
}
// returns 17
b = line(a) - b;
alert(b);
// returns 36
c = line(a) + b;
alert(c);
Both alerts return 17 and 36, respectively.
The control works as expected. Until…
I make the mistake of changing
the inside of the function like so:
function line(x) {
var a = 5;
b = 4;
return a*x+b;
}
Suddenly line 13 returns 15, line 17 returns 23
and the situation continues to deteriorate as I follow var
down the rabbit hole, becoming more enmeshed as I make my descent.
I realize I could make a mental note to always use var
and rest knowing my code will always work as intended
but this has become a matter of principle now and now I need
to understand how var actually works.
Here are links to the four hells,
made by (and possibly for) me:
Riddle #1
http://jsfiddle.net/js_test/gNEmY/
Riddle #2
http://jsfiddle.net/js_test/FJVYL/
Riddle #3
http://jsfiddle.net/js_test/Vz7Sd/
Riddle #4
http://jsfiddle.net/js_test/RaA5J/
If anyone could give me insight
into what's happening under the hood
to wit, what happens during each alert() call;
I would really appreciate it.

var creates a local variable, scoped to the function in which it appears. Any variable that is declared in the global scope becomes a property of the global object (in a browser, window), and any variable referenced in a function which is not declared with var in that function refers to the surrounding scope, quite possibly the global scope.
There is also a new keyword, let, which is coming in the upcoming version of ECMAScript and is already in some browsers, which creates a block-scoped variable.
So, in your first example (I am going to assume this is running in a browser), you create window.a and window.b which are bound to 3 and 2, respectively. Function line declares local variables a and b. When window.a is passed to line, the parameter x is bound to the value 3 (the value of window.a). Local variables a and b are 5 and 4, respectively. These have nothing to do with window.a and window.b. The calculation a*x+b is, thus, 5*3+4, or 19.
The code b = line(a) - b passes window.a to line, calculates the value 19, subtracts the current value of window.b from it (2), resulting in 17, which is then assigned to window.b. The value of 36 comes from line(3) (which is still 19) plus 17 (the new value of window.b).
When you removed the var from the assignment to b in function line, you changed it so that b is no longer a local variable. In that case, all references to b in the function refer to the global value window.b.
In the case of your Riddle #2, where you got 23, after the first call window.b is equal to 15. When line(a) is called a second time, window.b is set back to 4, the a*x+b calculation still gets 19, and then window.b (4) is added again, making 23.
It is important to note that the var keyword declares a variable that is function-scoped, not block-scoped as you might expect from other C-derived languages. For example, in this function:
function scope(array) {
var a = 7;
for (var b = 0; b < array.length; ++b) {
var c = array[b];
}
alert(a + b + c);
}
All the variables have scope which extends over the entire function. In particular, the scope of c is not limited to the for loop.
A variable that is not declared in a particular scope doesn't necessarily reference a global variable, however. If it is nested inside another function scope, it will refer to that nested scope. Consider the following example:
var b = 7;
function outer() {
var b = 42;
function inner() {
return b; // refers to b in outer, not global
}
return inner();
}
alert(outer()); // 42, not 7

The variable declared without var is global variable, this is the rule.
But remember if you want to declare multiple local variable with one var, separate them with comma.
var a = 5; // local variable
b = 4; // global varialbe
var a = 5, // local variable
b = 4; // local varialbe

VAR declares a new instance in memory for a new variable. Simply saying b = 4 will try to change the value of b to 4. If b has not been initialized nothing will happen.
This ties into the concept of PRIVATE and LOCAL variables, and naming conventions.
Firstly, you have 2 variables called a and 2 called b. This is bad practice because you might change the value of the other one by mistake, or its old value could still be sitting in memory because it was already initialized and given a value. Remember, you do not always NEED to assign a value when initializing, it's just best practice.
Secondly, your function can modify a variable from the level above it. In other words, by taking away VAR on that one line it's possible to modify the original value of b which you set to 2 at the beginning of the file.
TLDR;
Don't use the same variable name more than once, and always use your VAR when trying to make a NEW variable.

If you're in the global scope then there's no difference.
If you're in a function then "var" will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it).
Source
In the case of your first function, line(a) is processed first, and by the time it runs, you've set b = 4. Therefore, and because b is a globally defined variable, when it runs line(a) - b, you're getting:
line(a) (returns 19)
And minus b (b = 4)
19 - 4 = 15
You can simplify your statement and get the same result:
//define global variable b
var b = 2;
function line(x) {
//x = 3
//update global variable b; it now = 4
b = 4;
//forget the math and just return 19
return 19;
}
//run function; before, b = 2, after b = 4
b = line(3) - b;
alert(b);
Likewise with your second example, because your function changes the value of global variable b, the only difference is that you're adding 4 instead of subtracting (19 + 4 = 23).
To avoid this confusing nature of variables, always be careful to differentiate between global and local variables whenever possible, and only drop var when you need to explicitly update global variables in functions. In actual fact too, since global variable always remain in memory, you should use globals only when you explicitly need them. Here's an unambiguous example:
var globalVar;
function someFunc(x) {
var tempVar = 4;
return x * tempVar;
}

Related

how can i use destructuring inside a class in javascript [duplicate]

NOTE: This question was asked from the viewpoint of ECMAScript version 3 or 5. The answers might become outdated with the introduction of new features in the release of ECMAScript 6.
What exactly is the function of the var keyword in JavaScript, and what is the difference between
var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;
and
someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;
?
When would you use either one, and why/what does it do?
If you're in the global scope then there's not much difference. Read Kangax's answer for explanation
If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
// These are both globals
var foo = 1;
bar = 2;
function()
{
var foo = 1; // Local
bar = 2; // Global
// Execute an anonymous function
(function()
{
var wibble = 1; // Local
foo = 2; // Inherits from scope above (creating a closure)
moo = 3; // Global
}())
}
If you're not doing an assignment then you need to use var:
var x; // Declare x
There's a difference.
var x = 1 declares variable x in current scope (aka execution context). If the declaration appears in a function - a local variable is declared; if it's in global scope - a global variable is declared.
x = 1, on the other hand, is merely a property assignment. It first tries to resolve x against scope chain. If it finds it anywhere in that scope chain, it performs assignment; if it doesn't find x, only then does it creates x property on a global object (which is a top level object in a scope chain).
Now, notice that it doesn't declare a global variable, it creates a global property.
The difference between the two is subtle and might be confusing unless you understand that variable declarations also create properties (only on a Variable Object) and that every property in Javascript (well, ECMAScript) have certain flags that describe their properties - ReadOnly, DontEnum and DontDelete.
Since variable declaration creates property with the DontDelete flag, the difference between var x = 1 and x = 1 (when executed in global scope) is that the former one - variable declaration - creates the DontDelete'able property, and latter one doesn't. As a consequence, the property created via this implicit assignment can then be deleted from the global object, and the former one - the one created via variable declaration - cannot be deleted.
But this is just theory of course, and in practice there are even more differences between the two, due to various bugs in implementations (such as those from IE).
Hope it all makes sense : )
[Update 2010/12/16]
In ES5 (ECMAScript 5; recently standardized, 5th edition of the language) there's a so-called "strict mode" — an opt-in language mode, which slightly changes the behavior of undeclared assignments. In strict mode, assignment to an undeclared identifier is a ReferenceError. The rationale for this was to catch accidental assignments, preventing creation of undesired global properties. Some of the newer browsers have already started rolling support for strict mode. See, for example, my compat table.
Saying it's the difference between "local and global" isn't entirely accurate.
It might be better to think of it as the difference between "local and nearest". The nearest can surely be global, but that won't always be the case.
/* global scope */
var local = true;
var global = true;
function outer() {
/* local scope */
var local = true;
var global = false;
/* nearest scope = outer */
local = !global;
function inner() {
/* nearest scope = outer */
local = false;
global = false;
/* nearest scope = undefined */
/* defaults to defining a global */
public = global;
}
}
When Javascript is executed in a browser, all your code is surrounded by a with statement, like so:
with (window) {
//Your code
}
More info on with - MDN
Since var declares a variable in the current scope , there is no difference between declaring var inside window and not declaring it at all.
The difference comes when you're not directly inside the window, e.g. inside a function or inside a block.
Using var lets you hide external variables that have the same name. In this way you can simulate a "private" variable, but that's another topic.
A rule of thumb is to always use var, because otherwise you run the risk of introducing subtle bugs.
EDIT:
After the critiques I received, I would like to emphasize the following:
var declares a variable in the current scope
The global scope is window
Not using var implicitly declares var in the global scope (window)
Declaring a variable in the global scope (window) using var is the same as omitting it.
Declaring a variable in scopes different from window using var is not the same thing as declaring a variable without var
Always declare var explicitly because it's good practice
Always use the var keyword to declare variables. Why? Good coding practice should be enough of a reason in itself, but omitting it means it is declared in the global scope (a variable like this is called an "implied" global). Douglas Crockford recommends never using implied globals, and according to the Apple JavaScript Coding Guidelines:
Any variable created without the var
keyword is created at the global scope
and is not garbage collected when the
function returns (because it doesn’t
go out of scope), presenting the
opportunity for a memory leak.
Here's quite a good example of how you can get caught out from not declaring local variables with var:
<script>
one();
function one()
{
for (i = 0;i < 10;i++)
{
two();
alert(i);
}
}
function two()
{
i = 1;
}
</script>
(i is reset at every iteration of the loop, as it's not declared locally in the for loop but globally) eventually resulting in infinite loop
I would say it's better to use var in most situations.
Local variables are always faster than the variables in global scope.
If you do not use var to declare a variable, the variable will be in global scope.
For more information, you can search "scope chain JavaScript" in Google.
Don't use var!
var was the pre-ES6 way to declare a variable. We are now in the future, and you should be coding as such.
Use const and let
const should be used for ~95% of cases. It makes it so the variable reference can't change, thus array, object, and DOM node properties can change and should likely be const.
let should be be used for any variable expecting to be reassigned. This includes within a for loop. If you ever write varName = beyond the initialization, use let.
Both have block level scoping, as expected in most other languages.
another difference
e.g
var a = a || [] ; // works
while
a = a || [] ; // a is undefined error.
Using var is always a good idea to prevent variables from cluttering the global scope and variables from conflicting with each other, causing unwanted overwriting.
Without var - global variable.
Strongly recommended to ALWAYS use var statement, because init global variable in local context - is evil. But, if you need this dirty trick, you should write comment at start of page:
/* global: varname1, varname2... */
This is example code I have written for you to understand this concept:
var foo = 5;
bar = 2;
fooba = 3;
// Execute an anonymous function
(function() {
bar = 100; //overwrites global scope bar
var foo = 4; //a new foo variable is created in this' function's scope
var fooba = 900; //same as above
document.write(foo); //prints 4
document.write(bar); //prints 100
document.write(fooba); //prints 900
})();
document.write('<br/>');
document.write('<br/>');
document.write(foo); //prints 5
document.write(bar); //prints 100
document.write(fooba); //prints 3
#Chris S gave a nice example showcasing the practical difference (and danger) between var and no var. Here's another one, I find this one particularly dangerous because the difference is only visible in an asynchronous environment so it can easily slip by during testing.
As you'd expect the following snippet outputs ["text"]:
function var_fun() {
let array = []
array.push('text')
return array
}
console.log(var_fun())
So does the following snippet (note the missing let before array):
function var_fun() {
array = []
array.push('text')
return array
}
console.log(var_fun())
Executing the data manipulation asynchronously still produces the same result with a single executor:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
var_fun().then(result => {console.log(result)})
But behaves differently with multiple ones:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
Using let however:
function var_fun() {
let array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
As someeone trying to learn this this is how I see it. The above examples were maybe a bit overly complicated for a beginner.
If you run this code:
var local = true;
var global = true;
function test(){
var local = false;
var global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output will read as: false, false, true, true
Because it sees the variables in the function as seperate from those outside of it, hence the term local variable and this was because we used var in the assignment. If you take away the var in the function so it now reads like this:
var local = true;
var global = true;
function test(){
local = false;
global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output is false, false, false, false
This is because rather than creating a new variable in the local scope or function it simply uses the global variables and reassigns them to false.
I see people are confused when declaring variables with or without var and inside or outside the function. Here is a deep example that will walk you through these steps:
See the script below in action here at jsfiddle
a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");
function testVar1(){
c = 1;// Defined inside the function without var
var d = 1;// Defined inside the function with var
alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar1();
alert("Run the 1. function again...");
testVar1();
function testVar2(){
var d = 1;// Defined inside the function with var
alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar2();
alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);
Conclusion
No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.
If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2()
If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.
Inside a code you if you use a variable without using var, then what happens is the automatically var var_name is placed in the global scope eg:
someFunction() {
var a = some_value; /*a has local scope and it cannot be accessed when this
function is not active*/
b = a; /*here it places "var b" at top of script i.e. gives b global scope or
uses already defined global variable b */
}
Besides scopes issue, some folks also mention hoisting, but no one gave an example. Here's one for global scope:
console.log(noErrorCase);
var noErrorCase = "you will reach that point";
console.log(runTimeError);
runTimeError = "you won't reach that point";
Without using "var" variables can only define when set a value. In example:
my_var;
cannot work in global scope or any other scope. It should be with value like:
my_var = "value";
On the other hand you can define a vaiable like;
var my_var;
Its value is undefined ( Its value is not null and it is not equal to null interestingly.).
You should use var keyword unless you intend to have the variable attached to window object in browser. Here's a link that explains scoping and difference between glocal scoping and local scoping with and wihtout var keyword.
When variables get defined without the use of var keyword, what it looks like is a simple “assignment” operation.
When the value is assigned to a variable in javascript, the interpreter first tries to find the “variable declaration” in the same context/scope as that of assignment. When the interpreter executes dummyVariable = 20, it looks up for the declaration of dummyVariable at beginning of the function.
(Since all Variable declarations are moved to the beginning of the context by javascript interpreter and this is called hoisting)
You may also want to look at hoisting in javascript

What is wrong with my javascript recursion loop? [duplicate]

NOTE: This question was asked from the viewpoint of ECMAScript version 3 or 5. The answers might become outdated with the introduction of new features in the release of ECMAScript 6.
What exactly is the function of the var keyword in JavaScript, and what is the difference between
var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;
and
someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;
?
When would you use either one, and why/what does it do?
If you're in the global scope then there's not much difference. Read Kangax's answer for explanation
If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
// These are both globals
var foo = 1;
bar = 2;
function()
{
var foo = 1; // Local
bar = 2; // Global
// Execute an anonymous function
(function()
{
var wibble = 1; // Local
foo = 2; // Inherits from scope above (creating a closure)
moo = 3; // Global
}())
}
If you're not doing an assignment then you need to use var:
var x; // Declare x
There's a difference.
var x = 1 declares variable x in current scope (aka execution context). If the declaration appears in a function - a local variable is declared; if it's in global scope - a global variable is declared.
x = 1, on the other hand, is merely a property assignment. It first tries to resolve x against scope chain. If it finds it anywhere in that scope chain, it performs assignment; if it doesn't find x, only then does it creates x property on a global object (which is a top level object in a scope chain).
Now, notice that it doesn't declare a global variable, it creates a global property.
The difference between the two is subtle and might be confusing unless you understand that variable declarations also create properties (only on a Variable Object) and that every property in Javascript (well, ECMAScript) have certain flags that describe their properties - ReadOnly, DontEnum and DontDelete.
Since variable declaration creates property with the DontDelete flag, the difference between var x = 1 and x = 1 (when executed in global scope) is that the former one - variable declaration - creates the DontDelete'able property, and latter one doesn't. As a consequence, the property created via this implicit assignment can then be deleted from the global object, and the former one - the one created via variable declaration - cannot be deleted.
But this is just theory of course, and in practice there are even more differences between the two, due to various bugs in implementations (such as those from IE).
Hope it all makes sense : )
[Update 2010/12/16]
In ES5 (ECMAScript 5; recently standardized, 5th edition of the language) there's a so-called "strict mode" — an opt-in language mode, which slightly changes the behavior of undeclared assignments. In strict mode, assignment to an undeclared identifier is a ReferenceError. The rationale for this was to catch accidental assignments, preventing creation of undesired global properties. Some of the newer browsers have already started rolling support for strict mode. See, for example, my compat table.
Saying it's the difference between "local and global" isn't entirely accurate.
It might be better to think of it as the difference between "local and nearest". The nearest can surely be global, but that won't always be the case.
/* global scope */
var local = true;
var global = true;
function outer() {
/* local scope */
var local = true;
var global = false;
/* nearest scope = outer */
local = !global;
function inner() {
/* nearest scope = outer */
local = false;
global = false;
/* nearest scope = undefined */
/* defaults to defining a global */
public = global;
}
}
When Javascript is executed in a browser, all your code is surrounded by a with statement, like so:
with (window) {
//Your code
}
More info on with - MDN
Since var declares a variable in the current scope , there is no difference between declaring var inside window and not declaring it at all.
The difference comes when you're not directly inside the window, e.g. inside a function or inside a block.
Using var lets you hide external variables that have the same name. In this way you can simulate a "private" variable, but that's another topic.
A rule of thumb is to always use var, because otherwise you run the risk of introducing subtle bugs.
EDIT:
After the critiques I received, I would like to emphasize the following:
var declares a variable in the current scope
The global scope is window
Not using var implicitly declares var in the global scope (window)
Declaring a variable in the global scope (window) using var is the same as omitting it.
Declaring a variable in scopes different from window using var is not the same thing as declaring a variable without var
Always declare var explicitly because it's good practice
Always use the var keyword to declare variables. Why? Good coding practice should be enough of a reason in itself, but omitting it means it is declared in the global scope (a variable like this is called an "implied" global). Douglas Crockford recommends never using implied globals, and according to the Apple JavaScript Coding Guidelines:
Any variable created without the var
keyword is created at the global scope
and is not garbage collected when the
function returns (because it doesn’t
go out of scope), presenting the
opportunity for a memory leak.
Here's quite a good example of how you can get caught out from not declaring local variables with var:
<script>
one();
function one()
{
for (i = 0;i < 10;i++)
{
two();
alert(i);
}
}
function two()
{
i = 1;
}
</script>
(i is reset at every iteration of the loop, as it's not declared locally in the for loop but globally) eventually resulting in infinite loop
I would say it's better to use var in most situations.
Local variables are always faster than the variables in global scope.
If you do not use var to declare a variable, the variable will be in global scope.
For more information, you can search "scope chain JavaScript" in Google.
Don't use var!
var was the pre-ES6 way to declare a variable. We are now in the future, and you should be coding as such.
Use const and let
const should be used for ~95% of cases. It makes it so the variable reference can't change, thus array, object, and DOM node properties can change and should likely be const.
let should be be used for any variable expecting to be reassigned. This includes within a for loop. If you ever write varName = beyond the initialization, use let.
Both have block level scoping, as expected in most other languages.
another difference
e.g
var a = a || [] ; // works
while
a = a || [] ; // a is undefined error.
Using var is always a good idea to prevent variables from cluttering the global scope and variables from conflicting with each other, causing unwanted overwriting.
Without var - global variable.
Strongly recommended to ALWAYS use var statement, because init global variable in local context - is evil. But, if you need this dirty trick, you should write comment at start of page:
/* global: varname1, varname2... */
This is example code I have written for you to understand this concept:
var foo = 5;
bar = 2;
fooba = 3;
// Execute an anonymous function
(function() {
bar = 100; //overwrites global scope bar
var foo = 4; //a new foo variable is created in this' function's scope
var fooba = 900; //same as above
document.write(foo); //prints 4
document.write(bar); //prints 100
document.write(fooba); //prints 900
})();
document.write('<br/>');
document.write('<br/>');
document.write(foo); //prints 5
document.write(bar); //prints 100
document.write(fooba); //prints 3
#Chris S gave a nice example showcasing the practical difference (and danger) between var and no var. Here's another one, I find this one particularly dangerous because the difference is only visible in an asynchronous environment so it can easily slip by during testing.
As you'd expect the following snippet outputs ["text"]:
function var_fun() {
let array = []
array.push('text')
return array
}
console.log(var_fun())
So does the following snippet (note the missing let before array):
function var_fun() {
array = []
array.push('text')
return array
}
console.log(var_fun())
Executing the data manipulation asynchronously still produces the same result with a single executor:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
var_fun().then(result => {console.log(result)})
But behaves differently with multiple ones:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
Using let however:
function var_fun() {
let array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
As someeone trying to learn this this is how I see it. The above examples were maybe a bit overly complicated for a beginner.
If you run this code:
var local = true;
var global = true;
function test(){
var local = false;
var global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output will read as: false, false, true, true
Because it sees the variables in the function as seperate from those outside of it, hence the term local variable and this was because we used var in the assignment. If you take away the var in the function so it now reads like this:
var local = true;
var global = true;
function test(){
local = false;
global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output is false, false, false, false
This is because rather than creating a new variable in the local scope or function it simply uses the global variables and reassigns them to false.
I see people are confused when declaring variables with or without var and inside or outside the function. Here is a deep example that will walk you through these steps:
See the script below in action here at jsfiddle
a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");
function testVar1(){
c = 1;// Defined inside the function without var
var d = 1;// Defined inside the function with var
alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar1();
alert("Run the 1. function again...");
testVar1();
function testVar2(){
var d = 1;// Defined inside the function with var
alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar2();
alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);
Conclusion
No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.
If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2()
If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.
Inside a code you if you use a variable without using var, then what happens is the automatically var var_name is placed in the global scope eg:
someFunction() {
var a = some_value; /*a has local scope and it cannot be accessed when this
function is not active*/
b = a; /*here it places "var b" at top of script i.e. gives b global scope or
uses already defined global variable b */
}
Besides scopes issue, some folks also mention hoisting, but no one gave an example. Here's one for global scope:
console.log(noErrorCase);
var noErrorCase = "you will reach that point";
console.log(runTimeError);
runTimeError = "you won't reach that point";
Without using "var" variables can only define when set a value. In example:
my_var;
cannot work in global scope or any other scope. It should be with value like:
my_var = "value";
On the other hand you can define a vaiable like;
var my_var;
Its value is undefined ( Its value is not null and it is not equal to null interestingly.).
You should use var keyword unless you intend to have the variable attached to window object in browser. Here's a link that explains scoping and difference between glocal scoping and local scoping with and wihtout var keyword.
When variables get defined without the use of var keyword, what it looks like is a simple “assignment” operation.
When the value is assigned to a variable in javascript, the interpreter first tries to find the “variable declaration” in the same context/scope as that of assignment. When the interpreter executes dummyVariable = 20, it looks up for the declaration of dummyVariable at beginning of the function.
(Since all Variable declarations are moved to the beginning of the context by javascript interpreter and this is called hoisting)
You may also want to look at hoisting in javascript

'setName' is not defined in functional component [duplicate]

NOTE: This question was asked from the viewpoint of ECMAScript version 3 or 5. The answers might become outdated with the introduction of new features in the release of ECMAScript 6.
What exactly is the function of the var keyword in JavaScript, and what is the difference between
var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;
and
someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;
?
When would you use either one, and why/what does it do?
If you're in the global scope then there's not much difference. Read Kangax's answer for explanation
If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
// These are both globals
var foo = 1;
bar = 2;
function()
{
var foo = 1; // Local
bar = 2; // Global
// Execute an anonymous function
(function()
{
var wibble = 1; // Local
foo = 2; // Inherits from scope above (creating a closure)
moo = 3; // Global
}())
}
If you're not doing an assignment then you need to use var:
var x; // Declare x
There's a difference.
var x = 1 declares variable x in current scope (aka execution context). If the declaration appears in a function - a local variable is declared; if it's in global scope - a global variable is declared.
x = 1, on the other hand, is merely a property assignment. It first tries to resolve x against scope chain. If it finds it anywhere in that scope chain, it performs assignment; if it doesn't find x, only then does it creates x property on a global object (which is a top level object in a scope chain).
Now, notice that it doesn't declare a global variable, it creates a global property.
The difference between the two is subtle and might be confusing unless you understand that variable declarations also create properties (only on a Variable Object) and that every property in Javascript (well, ECMAScript) have certain flags that describe their properties - ReadOnly, DontEnum and DontDelete.
Since variable declaration creates property with the DontDelete flag, the difference between var x = 1 and x = 1 (when executed in global scope) is that the former one - variable declaration - creates the DontDelete'able property, and latter one doesn't. As a consequence, the property created via this implicit assignment can then be deleted from the global object, and the former one - the one created via variable declaration - cannot be deleted.
But this is just theory of course, and in practice there are even more differences between the two, due to various bugs in implementations (such as those from IE).
Hope it all makes sense : )
[Update 2010/12/16]
In ES5 (ECMAScript 5; recently standardized, 5th edition of the language) there's a so-called "strict mode" — an opt-in language mode, which slightly changes the behavior of undeclared assignments. In strict mode, assignment to an undeclared identifier is a ReferenceError. The rationale for this was to catch accidental assignments, preventing creation of undesired global properties. Some of the newer browsers have already started rolling support for strict mode. See, for example, my compat table.
Saying it's the difference between "local and global" isn't entirely accurate.
It might be better to think of it as the difference between "local and nearest". The nearest can surely be global, but that won't always be the case.
/* global scope */
var local = true;
var global = true;
function outer() {
/* local scope */
var local = true;
var global = false;
/* nearest scope = outer */
local = !global;
function inner() {
/* nearest scope = outer */
local = false;
global = false;
/* nearest scope = undefined */
/* defaults to defining a global */
public = global;
}
}
When Javascript is executed in a browser, all your code is surrounded by a with statement, like so:
with (window) {
//Your code
}
More info on with - MDN
Since var declares a variable in the current scope , there is no difference between declaring var inside window and not declaring it at all.
The difference comes when you're not directly inside the window, e.g. inside a function or inside a block.
Using var lets you hide external variables that have the same name. In this way you can simulate a "private" variable, but that's another topic.
A rule of thumb is to always use var, because otherwise you run the risk of introducing subtle bugs.
EDIT:
After the critiques I received, I would like to emphasize the following:
var declares a variable in the current scope
The global scope is window
Not using var implicitly declares var in the global scope (window)
Declaring a variable in the global scope (window) using var is the same as omitting it.
Declaring a variable in scopes different from window using var is not the same thing as declaring a variable without var
Always declare var explicitly because it's good practice
Always use the var keyword to declare variables. Why? Good coding practice should be enough of a reason in itself, but omitting it means it is declared in the global scope (a variable like this is called an "implied" global). Douglas Crockford recommends never using implied globals, and according to the Apple JavaScript Coding Guidelines:
Any variable created without the var
keyword is created at the global scope
and is not garbage collected when the
function returns (because it doesn’t
go out of scope), presenting the
opportunity for a memory leak.
Here's quite a good example of how you can get caught out from not declaring local variables with var:
<script>
one();
function one()
{
for (i = 0;i < 10;i++)
{
two();
alert(i);
}
}
function two()
{
i = 1;
}
</script>
(i is reset at every iteration of the loop, as it's not declared locally in the for loop but globally) eventually resulting in infinite loop
I would say it's better to use var in most situations.
Local variables are always faster than the variables in global scope.
If you do not use var to declare a variable, the variable will be in global scope.
For more information, you can search "scope chain JavaScript" in Google.
Don't use var!
var was the pre-ES6 way to declare a variable. We are now in the future, and you should be coding as such.
Use const and let
const should be used for ~95% of cases. It makes it so the variable reference can't change, thus array, object, and DOM node properties can change and should likely be const.
let should be be used for any variable expecting to be reassigned. This includes within a for loop. If you ever write varName = beyond the initialization, use let.
Both have block level scoping, as expected in most other languages.
another difference
e.g
var a = a || [] ; // works
while
a = a || [] ; // a is undefined error.
Using var is always a good idea to prevent variables from cluttering the global scope and variables from conflicting with each other, causing unwanted overwriting.
Without var - global variable.
Strongly recommended to ALWAYS use var statement, because init global variable in local context - is evil. But, if you need this dirty trick, you should write comment at start of page:
/* global: varname1, varname2... */
This is example code I have written for you to understand this concept:
var foo = 5;
bar = 2;
fooba = 3;
// Execute an anonymous function
(function() {
bar = 100; //overwrites global scope bar
var foo = 4; //a new foo variable is created in this' function's scope
var fooba = 900; //same as above
document.write(foo); //prints 4
document.write(bar); //prints 100
document.write(fooba); //prints 900
})();
document.write('<br/>');
document.write('<br/>');
document.write(foo); //prints 5
document.write(bar); //prints 100
document.write(fooba); //prints 3
#Chris S gave a nice example showcasing the practical difference (and danger) between var and no var. Here's another one, I find this one particularly dangerous because the difference is only visible in an asynchronous environment so it can easily slip by during testing.
As you'd expect the following snippet outputs ["text"]:
function var_fun() {
let array = []
array.push('text')
return array
}
console.log(var_fun())
So does the following snippet (note the missing let before array):
function var_fun() {
array = []
array.push('text')
return array
}
console.log(var_fun())
Executing the data manipulation asynchronously still produces the same result with a single executor:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
var_fun().then(result => {console.log(result)})
But behaves differently with multiple ones:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
Using let however:
function var_fun() {
let array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
As someeone trying to learn this this is how I see it. The above examples were maybe a bit overly complicated for a beginner.
If you run this code:
var local = true;
var global = true;
function test(){
var local = false;
var global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output will read as: false, false, true, true
Because it sees the variables in the function as seperate from those outside of it, hence the term local variable and this was because we used var in the assignment. If you take away the var in the function so it now reads like this:
var local = true;
var global = true;
function test(){
local = false;
global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output is false, false, false, false
This is because rather than creating a new variable in the local scope or function it simply uses the global variables and reassigns them to false.
I see people are confused when declaring variables with or without var and inside or outside the function. Here is a deep example that will walk you through these steps:
See the script below in action here at jsfiddle
a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");
function testVar1(){
c = 1;// Defined inside the function without var
var d = 1;// Defined inside the function with var
alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar1();
alert("Run the 1. function again...");
testVar1();
function testVar2(){
var d = 1;// Defined inside the function with var
alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar2();
alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);
Conclusion
No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.
If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2()
If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.
Inside a code you if you use a variable without using var, then what happens is the automatically var var_name is placed in the global scope eg:
someFunction() {
var a = some_value; /*a has local scope and it cannot be accessed when this
function is not active*/
b = a; /*here it places "var b" at top of script i.e. gives b global scope or
uses already defined global variable b */
}
Besides scopes issue, some folks also mention hoisting, but no one gave an example. Here's one for global scope:
console.log(noErrorCase);
var noErrorCase = "you will reach that point";
console.log(runTimeError);
runTimeError = "you won't reach that point";
Without using "var" variables can only define when set a value. In example:
my_var;
cannot work in global scope or any other scope. It should be with value like:
my_var = "value";
On the other hand you can define a vaiable like;
var my_var;
Its value is undefined ( Its value is not null and it is not equal to null interestingly.).
You should use var keyword unless you intend to have the variable attached to window object in browser. Here's a link that explains scoping and difference between glocal scoping and local scoping with and wihtout var keyword.
When variables get defined without the use of var keyword, what it looks like is a simple “assignment” operation.
When the value is assigned to a variable in javascript, the interpreter first tries to find the “variable declaration” in the same context/scope as that of assignment. When the interpreter executes dummyVariable = 20, it looks up for the declaration of dummyVariable at beginning of the function.
(Since all Variable declarations are moved to the beginning of the context by javascript interpreter and this is called hoisting)
You may also want to look at hoisting in javascript

IIFE and Global scope in javascript

Why does the following code result in logging of b while a is still undefined?
(function(){ var a=b=5; })();
console.log('b:'+b);
console.log('a:'+a);
Because var a=b=5; statement defines only local a variable and in fact is interpreted like
var a = (b=5);
which equals to
b = 5;
var a = 5;
which assigns 5 to a global b variable and defines a local a variable.
The proper way to define 2 local variables without value repetition would be
var b = 5, a = b;
In JavaScript if you ommit the var keyword before a variable, it will be considered as global.
So here b is a global variable and a is only a local to that function's scope.
That's why you are getting the error while accessing the a.
Never mind, I figured it out myself as it wouldn't let me sleep.
There are 2 assignments happening within the IIFE whereas only 1 declaration.
The statement var a=b=5; declares the variable a with var but simply does assignment for the other variable b.
b is actually never declared here, just assigned - making it a global variable.
Hence b is accessible to the log statement outside the function, which prints its value as 5.
In other words, under 'strict' mode, the code will look like this:
(function() {
'use strict';
var a = window.b = 5;
})();
console.log(b);
A variable can be defined in 2 ways:
var a= 5 // first
a=5 // Second
In first way, a is a local variable, but in second way, it becomes a global variable.
So, when you do var a=b=5, b is a global variable and hence retains value.

Why variables declared without var statement is global [duplicate]

NOTE: This question was asked from the viewpoint of ECMAScript version 3 or 5. The answers might become outdated with the introduction of new features in the release of ECMAScript 6.
What exactly is the function of the var keyword in JavaScript, and what is the difference between
var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;
and
someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;
?
When would you use either one, and why/what does it do?
If you're in the global scope then there's not much difference. Read Kangax's answer for explanation
If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
// These are both globals
var foo = 1;
bar = 2;
function()
{
var foo = 1; // Local
bar = 2; // Global
// Execute an anonymous function
(function()
{
var wibble = 1; // Local
foo = 2; // Inherits from scope above (creating a closure)
moo = 3; // Global
}())
}
If you're not doing an assignment then you need to use var:
var x; // Declare x
There's a difference.
var x = 1 declares variable x in current scope (aka execution context). If the declaration appears in a function - a local variable is declared; if it's in global scope - a global variable is declared.
x = 1, on the other hand, is merely a property assignment. It first tries to resolve x against scope chain. If it finds it anywhere in that scope chain, it performs assignment; if it doesn't find x, only then does it creates x property on a global object (which is a top level object in a scope chain).
Now, notice that it doesn't declare a global variable, it creates a global property.
The difference between the two is subtle and might be confusing unless you understand that variable declarations also create properties (only on a Variable Object) and that every property in Javascript (well, ECMAScript) have certain flags that describe their properties - ReadOnly, DontEnum and DontDelete.
Since variable declaration creates property with the DontDelete flag, the difference between var x = 1 and x = 1 (when executed in global scope) is that the former one - variable declaration - creates the DontDelete'able property, and latter one doesn't. As a consequence, the property created via this implicit assignment can then be deleted from the global object, and the former one - the one created via variable declaration - cannot be deleted.
But this is just theory of course, and in practice there are even more differences between the two, due to various bugs in implementations (such as those from IE).
Hope it all makes sense : )
[Update 2010/12/16]
In ES5 (ECMAScript 5; recently standardized, 5th edition of the language) there's a so-called "strict mode" — an opt-in language mode, which slightly changes the behavior of undeclared assignments. In strict mode, assignment to an undeclared identifier is a ReferenceError. The rationale for this was to catch accidental assignments, preventing creation of undesired global properties. Some of the newer browsers have already started rolling support for strict mode. See, for example, my compat table.
Saying it's the difference between "local and global" isn't entirely accurate.
It might be better to think of it as the difference between "local and nearest". The nearest can surely be global, but that won't always be the case.
/* global scope */
var local = true;
var global = true;
function outer() {
/* local scope */
var local = true;
var global = false;
/* nearest scope = outer */
local = !global;
function inner() {
/* nearest scope = outer */
local = false;
global = false;
/* nearest scope = undefined */
/* defaults to defining a global */
public = global;
}
}
When Javascript is executed in a browser, all your code is surrounded by a with statement, like so:
with (window) {
//Your code
}
More info on with - MDN
Since var declares a variable in the current scope , there is no difference between declaring var inside window and not declaring it at all.
The difference comes when you're not directly inside the window, e.g. inside a function or inside a block.
Using var lets you hide external variables that have the same name. In this way you can simulate a "private" variable, but that's another topic.
A rule of thumb is to always use var, because otherwise you run the risk of introducing subtle bugs.
EDIT:
After the critiques I received, I would like to emphasize the following:
var declares a variable in the current scope
The global scope is window
Not using var implicitly declares var in the global scope (window)
Declaring a variable in the global scope (window) using var is the same as omitting it.
Declaring a variable in scopes different from window using var is not the same thing as declaring a variable without var
Always declare var explicitly because it's good practice
Always use the var keyword to declare variables. Why? Good coding practice should be enough of a reason in itself, but omitting it means it is declared in the global scope (a variable like this is called an "implied" global). Douglas Crockford recommends never using implied globals, and according to the Apple JavaScript Coding Guidelines:
Any variable created without the var
keyword is created at the global scope
and is not garbage collected when the
function returns (because it doesn’t
go out of scope), presenting the
opportunity for a memory leak.
Here's quite a good example of how you can get caught out from not declaring local variables with var:
<script>
one();
function one()
{
for (i = 0;i < 10;i++)
{
two();
alert(i);
}
}
function two()
{
i = 1;
}
</script>
(i is reset at every iteration of the loop, as it's not declared locally in the for loop but globally) eventually resulting in infinite loop
I would say it's better to use var in most situations.
Local variables are always faster than the variables in global scope.
If you do not use var to declare a variable, the variable will be in global scope.
For more information, you can search "scope chain JavaScript" in Google.
Don't use var!
var was the pre-ES6 way to declare a variable. We are now in the future, and you should be coding as such.
Use const and let
const should be used for ~95% of cases. It makes it so the variable reference can't change, thus array, object, and DOM node properties can change and should likely be const.
let should be be used for any variable expecting to be reassigned. This includes within a for loop. If you ever write varName = beyond the initialization, use let.
Both have block level scoping, as expected in most other languages.
another difference
e.g
var a = a || [] ; // works
while
a = a || [] ; // a is undefined error.
Using var is always a good idea to prevent variables from cluttering the global scope and variables from conflicting with each other, causing unwanted overwriting.
Without var - global variable.
Strongly recommended to ALWAYS use var statement, because init global variable in local context - is evil. But, if you need this dirty trick, you should write comment at start of page:
/* global: varname1, varname2... */
This is example code I have written for you to understand this concept:
var foo = 5;
bar = 2;
fooba = 3;
// Execute an anonymous function
(function() {
bar = 100; //overwrites global scope bar
var foo = 4; //a new foo variable is created in this' function's scope
var fooba = 900; //same as above
document.write(foo); //prints 4
document.write(bar); //prints 100
document.write(fooba); //prints 900
})();
document.write('<br/>');
document.write('<br/>');
document.write(foo); //prints 5
document.write(bar); //prints 100
document.write(fooba); //prints 3
#Chris S gave a nice example showcasing the practical difference (and danger) between var and no var. Here's another one, I find this one particularly dangerous because the difference is only visible in an asynchronous environment so it can easily slip by during testing.
As you'd expect the following snippet outputs ["text"]:
function var_fun() {
let array = []
array.push('text')
return array
}
console.log(var_fun())
So does the following snippet (note the missing let before array):
function var_fun() {
array = []
array.push('text')
return array
}
console.log(var_fun())
Executing the data manipulation asynchronously still produces the same result with a single executor:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
var_fun().then(result => {console.log(result)})
But behaves differently with multiple ones:
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
Using let however:
function var_fun() {
let array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})
As someeone trying to learn this this is how I see it. The above examples were maybe a bit overly complicated for a beginner.
If you run this code:
var local = true;
var global = true;
function test(){
var local = false;
var global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output will read as: false, false, true, true
Because it sees the variables in the function as seperate from those outside of it, hence the term local variable and this was because we used var in the assignment. If you take away the var in the function so it now reads like this:
var local = true;
var global = true;
function test(){
local = false;
global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
The output is false, false, false, false
This is because rather than creating a new variable in the local scope or function it simply uses the global variables and reassigns them to false.
I see people are confused when declaring variables with or without var and inside or outside the function. Here is a deep example that will walk you through these steps:
See the script below in action here at jsfiddle
a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");
function testVar1(){
c = 1;// Defined inside the function without var
var d = 1;// Defined inside the function with var
alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar1();
alert("Run the 1. function again...");
testVar1();
function testVar2(){
var d = 1;// Defined inside the function with var
alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar2();
alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);
Conclusion
No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.
If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2()
If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.
Inside a code you if you use a variable without using var, then what happens is the automatically var var_name is placed in the global scope eg:
someFunction() {
var a = some_value; /*a has local scope and it cannot be accessed when this
function is not active*/
b = a; /*here it places "var b" at top of script i.e. gives b global scope or
uses already defined global variable b */
}
Besides scopes issue, some folks also mention hoisting, but no one gave an example. Here's one for global scope:
console.log(noErrorCase);
var noErrorCase = "you will reach that point";
console.log(runTimeError);
runTimeError = "you won't reach that point";
Without using "var" variables can only define when set a value. In example:
my_var;
cannot work in global scope or any other scope. It should be with value like:
my_var = "value";
On the other hand you can define a vaiable like;
var my_var;
Its value is undefined ( Its value is not null and it is not equal to null interestingly.).
You should use var keyword unless you intend to have the variable attached to window object in browser. Here's a link that explains scoping and difference between glocal scoping and local scoping with and wihtout var keyword.
When variables get defined without the use of var keyword, what it looks like is a simple “assignment” operation.
When the value is assigned to a variable in javascript, the interpreter first tries to find the “variable declaration” in the same context/scope as that of assignment. When the interpreter executes dummyVariable = 20, it looks up for the declaration of dummyVariable at beginning of the function.
(Since all Variable declarations are moved to the beginning of the context by javascript interpreter and this is called hoisting)
You may also want to look at hoisting in javascript

Categories