What is the purpose of the var keyword and when should I use it or omit it

Question

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

User · Answer

Besides scopes issue  some folks also mention hoisting  but no one gave an example  Here s one for global scope    x000D   x000D  console log noErrorCase   x000D  var noErrorCase    you will reach that point   x000D   x000D   x000D     x000D   x000D  console log runTimeError   x000D  runTimeError    you won t reach that point   x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt br  gt     document write   lt br  gt     document write foo           prints 5 document write bar           prints 100 document write fooba         prints 3

User · Answer

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

User · Answer

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

User · Answer

Here s quite a good example of how you can get caught out from not declaring local variables with var    lt script gt  one     function one         for  i   0 i  lt  10 i                  two            alert i            function two         i   1     lt  script gt     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

User · Answer

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

User · Answer

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

User · Answer

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      x000D   x000D  function var fun     x000D    let array      x000D    array push  text   x000D    return array x000D    x000D   x000D  console log var fun    x000D   x000D   x000D    So does the following snippet  note the missing let before array     x000D   x000D  function var fun     x000D    array      x000D    array push  text   x000D    return array x000D    x000D   x000D  console log var fun    x000D   x000D   x000D    Executing the data manipulation asynchronously still produces the same result with a single executor    x000D   x000D  function var fun     x000D    array       x000D    return new Promise resolve   gt  resolve    then      gt    x000D      array push  text   x000D      return array x000D       x000D    x000D   x000D  var fun   then result   gt   console log result    x000D   x000D   x000D    But behaves differently with multiple ones    x000D   x000D  function var fun     x000D    array       x000D    return new Promise resolve   gt  resolve    then      gt    x000D      array push  text   x000D      return array x000D       x000D    x000D   x000D   1 2 3  forEach i   gt    x000D    var fun   then result   gt   console log result    x000D     x000D   x000D   x000D    Using let however    x000D   x000D  function var fun     x000D    let array       x000D    return new Promise resolve   gt  resolve    then      gt    x000D      array push  text   x000D      return array x000D       x000D    x000D   x000D   1 2 3  forEach i   gt    x000D    var fun   then result   gt   console log result    x000D     x000D   x000D   x000D

User · Answer

another difference  e g  var a   a            works    while   a   a            a is undefined error

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] What is the purpose of the var keyword and when should I use it (or omit it)?

Examples related to javascript

Examples related to keyword

Examples related to ecmascript-5