Difference between variable declaration syntaxes in Javascript including global variables

Question

Is there any difference between declaring a variable   var a 0    1      this way   a 0    2      or   window a 0    3   in global scope

User · Answer

Keeping it simple    a   0   The code above gives a global scope variable  var a   0    This code will give a variable to be used in the current scope  and under it  window a   0    This generally is same as the global variable

User · Answer

Bassed on the excellent answer of T J  Crowder   Off-topic  Avoid cluttering window   This is an example of his idea   Html   lt  DOCTYPE html gt   lt html gt     lt head gt       lt script type  text javascript  src  init js  gt  lt  script gt       lt script type  text javascript  gt        MYLIBRARY init   firstValue   2   thirdValue          lt  script gt       lt script src  script js  gt  lt  script gt     lt  head gt      lt body gt       lt h1 gt Hello   lt  h1 gt     lt  body gt       lt  html gt    init js  Based on this answer   var MYLIBRARY   MYLIBRARY     function        var  args          private      return           init   function Args                 args   Args                 some other initialising                    helloWorld   function i                return  args i                            script js     Here you can use the values defined in the html as if it were a global variable var a    Hello World     MYLIBRARY helloWorld 2    alert a     Here s the plnkr  Hope it help

User · Answer

lt title gt Index html lt  title gt   lt script gt      var varDeclaration   true      noVarDeclaration   true      window hungOnWindow   true      document hungOnDocument   true   lt  script gt   lt script src  external js  gt  lt  script gt      external js     console info varDeclaration    true      could be  log  alert etc    returns false in IE8  console info noVarDeclaration    true      could be  log  alert etc    returns false in IE8  console info window hungOnWindow    true      could be  log  alert etc    returns true in IE8  console info document hungOnDocument    true      could be  log  alert etc    returns     in IE8  untested     I personally find this more clugy than hanging off window obj   Is there a global object that all vars are hung off of by default  eg   globals noVar declaration

User · Answer

Yes  there are a couple of differences  though in practical terms they re not usually big ones   There s a fourth way  and as of ES2015  ES6  there s two more  I ve added the fourth way at the end  but inserted the ES2015 ways after  1  you ll see why   so we have   var a   0         1 let a   0         1 1  new with ES2015  const a   0       1 2  new with ES2015  a   0             2 window a   0      3 this a   0        4   Those statements explained   1 var a   0   This creates a global variable which is also a property of the global object  which we access as window on browsers  or via this a global scope  in non-strict code   Unlike some other properties  the property cannot be removed via delete   In specification terms  it creates an identifier binding on the object Environment Record for the global environment  That makes it a property of the global object because the global object is where identifier bindings for the global environment s object Environment Record are held  This is why the property is non-deletable  It s not just a simple property  it s an identifier binding   The binding  variable  is defined before the first line of code runs  see  When var happens  below    Note that on IE8 and earlier  the property created on window is not enumerable  doesn t show up in for  in statements   In IE9  Chrome  Firefox  and Opera  it s enumerable      1 1 let a   0   This creates a global variable which is not a property of the global object  This is a new thing as of ES2015   In specification terms  it creates an identifier binding on the declarative Environment Record for the global environment rather than the object Environment Record  The global environment is unique in having a split Environment Record  one for all the old stuff that goes on the global object  the object Environment Record  and another for all the new stuff  let  const  and the functions created by class  that don t go on the global object   The binding is created before any step-by-step code in its enclosing block is executed  in this case  before any global code runs   but it s not accessible in any way until the step-by-step execution reaches the let statement  Once execution reaches the let statement  the variable is accessible   See  When let and const happen  below       1 2 const a   0   Creates a global constant  which is not a property of the global object   const is exactly like let except that you must provide an initializer  the   value part   and you cannot change the value of the constant once it s created  Under the covers  it s exactly like let but with a flag on the identifier binding saying its value cannot be changed  Using const does three things for you    Makes it a parse-time error if you try to assign to the constant  Documents its unchanging nature for other programmers  Lets the JavaScript engine optimize on the basis that it won t change       2 a   0   This creates a property on the global object implicitly  As it s a normal property  you can delete it  I d recommend not doing this  it can be unclear to anyone reading your code later  If you use ES5 s strict mode  doing this  assigning to a non-existent variable  is an error  It s one of several reasons to use strict mode   And interestingly  again on IE8 and earlier  the property created not enumerable  doesn t show up in for  in statements   That s odd  particularly given  3 below      3 window a   0   This creates a property on the global object explicitly  using the window global that refers to the global object  on browsers  some non-browser environments have an equivalent global variable  such as global on NodeJS   As it s a normal property  you can delete it   This property is enumerable  on IE8 and earlier  and on every other browser I ve tried      4 this a   0   Exactly like  3  except we re referencing the global object through this instead of the global window  This won t work in strict mode  though  because in strict mode global code  this doesn t have a reference to the global object  it has the value undefined instead      Deleting properties  What do I mean by  deleting  or  removing  a  Exactly that  Removing the property  entirely  via the delete keyword   window a   0  display   a  in window        a  in window       displays  true  delete window a  display   a  in window        a  in window       displays  false    delete completely removes a property from an object  You can t do that with properties added to window indirectly via var  the delete is either silently ignored or throws an exception  depending on the JavaScript implementation and whether you re in strict mode    Warning  IE8 again  and presumably earlier  and IE9-IE11 in the broken  compatibility  mode   It won t let you delete properties of the window object  even when you should be allowed to  Worse  it throws an exception when you try  try this experiment in IE8 and in other browsers   So when deleting from the window object  you have to be defensive   try       delete window prop    catch  e        window prop   undefined      That tries to delete the property  and if an exception is thrown it does the next best thing and sets the property to undefined   This only applies to the window object  and only  as far as I know  to IE8 and earlier  or IE9-IE11 in the broken  compatibility  mode   Other browsers are fine with deleting window properties  subject to the rules above     When var happens  The variables defined via the var statement are created before any step-by-step code in the execution context is run  and so the property exists well before the var statement   This can be confusing  so let s take a look   display  foo in window        foo  in window       displays  true  display  window foo       window foo               displays  undefined  display  bar in window        bar  in window       displays  false  display  window bar       window bar               displays  undefined  var foo    f   bar    b   display  foo in window        foo  in window       displays  true  display  window foo       window foo               displays  f  display  bar in window        bar  in window       displays  true  display  window bar       window bar               displays  b    Live example    x000D   x000D  display  foo in window        foo  in window       displays  true  x000D  display  window foo       window foo               displays  undefined  x000D  display  bar in window        bar  in window       displays  false  x000D  display  window bar       window bar               displays  undefined  x000D  var foo    f   x000D  bar    b   x000D  display  foo in window        foo  in window       displays  true  x000D  display  window foo       window foo               displays  f  x000D  display  bar in window        bar  in window       displays  true  x000D  display  window bar       window bar               displays  b  x000D   x000D  function display msg    x000D    var p   document createElement  p    x000D    p innerHTML   msg  x000D    document body appendChild p   x000D    x000D   x000D   x000D    As you can see  the symbol foo is defined before the first line  but the symbol bar isn t  Where the var foo    f   statement is  there are really two things  defining the symbol  which happens before the first line of code is run  and doing an assignment to that symbol  which happens where the line is in the step-by-step flow  This is known as  var hoisting  because the var foo part is moved   hoisted   to the top of the scope  but the foo    f  part is left in its original location   See Poor misunderstood var on my anemic little blog      When let and const happen  let and const are different from var in a couple of ways  The way that s relevant to the question is that although the binding they define is created before any step-by-step code runs  it s not accessible until the let or const statement is reached   So while this runs   display a         undefined var a   0  display a         0   This throws an error   display a         ReferenceError  a is not defined let a   0  display a     The other two ways that let and const differ from var  which aren t really relevant to the question  are    var always applies to the entire execution context  throughout global code  or throughout function code in the function where it appears   but let and const apply only within the block where they appear  That is  var has function  or global  scope  but let and const have block scope  Repeating var a in the same context is harmless  but if you have let a  or const a   having another let a or a const a or a var a is a syntax error    Here s an example demonstrating that let and const take effect immediately in their block before any code within that block runs  but aren t accessible until the let or const statement   var a   0  console log a   if  true      console log a      ReferenceError  a is not defined   let a   1    console log a       Note that the second console log fails  instead of accessing the a from outside the block     Off-topic  Avoid cluttering the global object  window   The window object gets very  very cluttered with properties  Whenever possible  strongly recommend not adding to the mess  Instead  wrap up your symbols in a little package and export at most one symbol to the window object   I frequently don t export any symbols to the window object   You can use a function to contain all of your code in order to contain your symbols  and that function can be anonymous if you like    function         var a   0      a  is NOT a property of  window  now      function foo             alert a        Alerts  0   because  foo  can access  a                In that example  we define a function and have it executed right away  the    at the end    A function used in this way is frequently called a scoping function  Functions defined within the scoping function can access variables defined in the scoping function because they re closures over that data  see  Closures are not complicated on my anemic little blog

User · Answer

In global scope there is no semantic difference   But you really should avoid a 0 since your setting a value to an undeclared variable   Also use closures to avoid editing global scope at all   function           do stuff locally        Hoist something to global scope    window someGlobal   someLocal         Always use closures and always hoist to global scope when its absolutely neccesary  You should be using asynchronous event handling for most of your communication anyway   As  AvianMoncellor mentioned there is an IE bug with var a   foo only declaring a global for file scope  This is an issue with IE s notorious broken interpreter  This bug does sound familiar so it s probably true   So stick to window globalName   someLocalpointer

[javascript] Difference between variable declaration syntaxes in Javascript (including global variables)?

Examples related to javascript