var

  • Revision slug: JavaScript/Reference/Statements/var
  • Revision title: JavaScript/Reference/Statements/var
  • Revision id: 265015
  • Created:
  • Creator: shulbert
  • Is current revision? No
  • Comment fix typo; 1 words added, 1 words removed

Revision Content

Summary

Declares a variable, optionally initializing it to a value.

Version Information

Statement
Implemented in: JavaScript 1.0, NES 2.0
ECMA Version: ECMA-262

Syntax

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

Parameters

varnameN
Variable name. It can be any legal identifier.
valueN
Initial value of the variable. It can be any legal expression.

Description

The scope of a variable declared with var is the enclosing function or, for variables declared outside a function, the global scope (which is bound to the global object).

Using var outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (also a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.

var a = 1;
b = 2;

delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b;

console.log(a, b); // Throws a ReferenceError. Since the 'b' property doesn't exist in the global object,
// the 'b' variable stops being a variable

Consequently, it is recommended to always declare your variables, regardless of being in the global scope or in a function

Failure to declare the variable in these cases will very likely lead to unexpected results. For that reason, in ECMAScript 5 strict mode, assigning a value an undeclared variable inside a function throws an error.

var hoisting

In JavaScript, variable can be declared after being used.

bla = 2
var bla;
// ...

// is implicitly understood as:

var bla;
bla = 2;

For that reason, it is recommended to always declare variable at the top of functions. Otherwise, it may lead to confusing cases:

var cells = document.getElementsByTagName('td');

for(var i=0; i<cells.length; i++){
  var cell = cells[i];
  cell.addEventListener('click', function(){
    cell.style.backgroundColor = '#00F'; // which 'cell' ?
  }, false);
}

Here, while the intention is to capture the 'local' cell within the loop, what happened is the following:

var i, cell;
var cells = document.getElementsByTagName('td');

for(i=0; i<cells.length; i++){
  cell = cells[i];
  cell.addEventListener('click', function(){
    cell.style.backgroundColor = '#00F';
  }, false);
}

The 'cell' captured in the event listener is the global 'cell' variable which, at the end of the loop contains the last cell traversed in the loop. Consequently, clicking on any cell will only affect the last cell.

Examples

Declaring and initializing two variables:

var a = 0, b = 0;

Assigning 2 variables with single string value.

var a = "A";
var b = a;

// Equivalent to:

var a, b = a = "A";

Be careful of the order though:

var x = y, y = 'A';
console.log(x + y); // undefinedA

// Here, x is declared. y declaration (but not initialisation!) is hoisted
// so, at the time of "x = y", y is declared (no ReferenceError is thrown) and its value is 'undefined'
// then, y is assigned its value.
// Consequently, after the first line, x === undefined && y === 'A'. Hence the concatenation

Be careful of initialization of several variables:

var x = 0;

function f(){
  var x = y = 1; // x is declared locally. y is not!
}
f();

console.log(x, y); // 0, 1
// x is the global one as expected
// y leaked outside of the function, though!

See also

{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Sentencias/var", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/var", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/var", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Polecenia/var" } ) }}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>Declares a variable, optionally initializing it to a value.</p>
<h2 id="Version_Information">Version Information</h2>
<table class="standard-table"> <tbody> <tr> <td class="header" colspan="2">Statement</td> </tr> <tr> <td>Implemented in:</td> <td>JavaScript 1.0, NES 2.0</td> </tr> <tr> <td>ECMA Version:</td> <td>ECMA-262</td> </tr> </tbody>
</table>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p><code>var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</code></p>
<h2 id="Parameters" name="Parameters">Parameters</h2>
<dl> <dt><code>varnameN</code></dt> <dd>Variable name. It can be any legal identifier.</dd>
</dl>
<dl> <dt><code>valueN</code></dt> <dd>Initial value of the variable. It can be any legal expression.</dd>
</dl>
<h2 id="Description" name="Description">Description</h2>
<p>The scope of a variable declared with <code>var</code> is the enclosing function or, for variables declared outside a function, the global scope (which is bound to the global object).</p>
<p>Using <code>var</code> outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (also a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.</p>
<pre class="brush: js">var a = 1;
b = 2;

delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b;

console.log(a, b); // Throws a ReferenceError. Since the 'b' property doesn't exist in the global object,
// the 'b' variable stops being a variable
</pre>
<p>Consequently, it is recommended to always declare your variables, regardless of being in the global scope or in a function</p>
<p>Failure to declare the variable in these cases will very likely lead to unexpected results. For that reason, in ECMAScript 5 <a href="/en/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>, assigning a value an undeclared variable inside a function throws an error.</p>
<h3 id="var_hoisting">var hoisting</h3>
<p>In JavaScript, variable can be declared after being used.</p>
<pre class="brush: js">bla = 2
var bla;
// ...

// is implicitly understood as:

var bla;
bla = 2;
</pre>
<p>For that reason, it is recommended to always declare variable at the top of functions. Otherwise, it may lead to confusing cases:</p>
<pre class="brush: js">var cells = document.getElementsByTagName('td');

for(var i=0; i&lt;cells.length; i++){
  var cell = cells[i];
  cell.addEventListener('click', function(){
    cell.style.backgroundColor = '#00F'; // which 'cell' ?
  }, false);
}
</pre>
<p>Here, while the intention is to capture the 'local' cell within the loop, what happened is the following:</p>
<pre class="brush: js">var i, cell;
var cells = document.getElementsByTagName('td');

for(i=0; i&lt;cells.length; i++){
  cell = cells[i];
  cell.addEventListener('click', function(){
    cell.style.backgroundColor = '#00F';
  }, false);
}
</pre>
<p>The 'cell' captured in the event listener is the global 'cell' variable which, at the end of the loop contains the last cell traversed in the loop. Consequently, clicking on any cell will only affect the last cell.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<p>Declaring and initializing two variables:</p>
<pre class="brush: js">var a = 0, b = 0;
</pre>
<p>Assigning 2 variables with single string value.</p>
<pre class="brush: js">var a = "A";
var b = a;

// Equivalent to:

var a, b = a = "A";
</pre>
<p>Be careful of the order though:</p>
<pre class="brush: js">var x = y, y = 'A';
console.log(x + y); // undefinedA

// Here, x is declared. y declaration (but not initialisation!) is hoisted
// so, at the time of "x = y", y is declared (no ReferenceError is thrown) and its value is 'undefined'
// then, y is assigned its value.
// Consequently, after the first line, x === undefined &amp;&amp; y === 'A'. Hence the concatenation
</pre>
<p>Be careful of initialization of several variables:</p>
<pre class="brush: js">var x = 0;

function f(){
  var x = y = 1; // x is declared locally. y is not!
}
f();

console.log(x, y); // 0, 1
// x is the global one as expected
// y leaked outside of the function, though!
</pre>
<h2 id="See_also" name="See_also">See also</h2>
<ul> <li><a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a></li> <li><code><a href="/en/JavaScript/Reference/Statements/const" title="en/Core_JavaScript_1.5_Reference/Statements/const">const</a></code></li> <li><a class="external" href="http://blog.safeshepherd.com/post/12175941935/how-one-missing-var-ruined-our-launch" title="http://blog.safeshepherd.com/post/12175941935/how-one-missing-var-ruined-our-launch">How One Missing `var` Ruined our Launch</a>.</li>
</ul>
<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Sentencias/var", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/var", "ja": "ja/Core_JavaScript_1.5_Reference/Statements/var", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Polecenia/var" } ) }}</p>
Revert to this revision