path: root/files/ru/web/javascript/reference/statements/var/index.html

---
title: var
slug: Web/JavaScript/Reference/Statements/var
translation_of: Web/JavaScript/Reference/Statements/var
---
<div>{{jsSidebar("Statements")}}</div>

<p>Оператор <strong>var </strong>объявляет переменную, инициализируя ее, при необходимости.</p>

<p>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre>

<dl>
 <dt><code>varnameN</code></dt>
 <dd>Имя переменной. Может использоваться любой допустимый идентификатор.</dd>
</dl>

<dl>
 <dt><code>valueN</code></dt>
 <dd>Значение переменной. Любое допустимое выражение. По-умолчанию значение <em>undefined.</em></dd>
</dl>

<h2 id="Описание">Описание</h2>

<p>Объявление переменной всегда обрабатывается до выполнения кода, где бы она ни находилась. Область видимости переменной, объявленной через <code>var</code>, это её текущий <em>контекст выполнения</em>.<em> </em>Который может ограничиваться функцией или быть глобальным, для переменных, объявленных за пределами функции.</p>

<p>Присвоение значения необъявленной переменной подразумевает, что она будет создана как глобальная переменная (переменная становится свойством глобального объекта) после выполнения присваивания значения. Различия между объявленной и необъявленной переменными следующие:</p>

<p>1. Объявленные переменные ограничены контекстом выполнения, в котором они были объявлены. Необъявленные переменные всегда глобальны.</p>

<pre class="brush: js">function x() {
  y = 1; // возбудит ReferenceError в "строгом режиме"
  var z = 2;
}

x();

console.log(y); // выведет "1"
console.log(z); // возбудит ReferenceError: z не определён вне x
</pre>

<p>2. Объявленные переменные инициализируются до выполнения любого кода. Необъявленные переменные не существуют до тех пор, пока к ним не выполнено присваивание.</p>

<pre class="brush: js">console.log(a);    // Возбудит ReferenceError.
console.log('still going...'); // Не выполнится.</pre>

<pre class="brush: js">var a;
console.log(a);                // Выведет "undefined" или "", в зависимости от браузера.
console.log('still going...'); // Выведет "still going...".</pre>

<p>3. Объявленные переменные, независимо от контекста выполнения, являются ненастраиваемыми свойствами. Необъявленные переменные это настраиваемые свойства (т.е. их можно удалять).</p>

<pre class="brush: js">var a = 1;
b = 2;

delete this.a; // Возбудит TypeError в "строгом режиме". В "нестрогом режиме" будет ошибка без уведомления.
delete this.b;

console.log(a, b); // Возбудит ReferenceError.
// Свойство 'b' было удалено и больше не существует.</pre>

<p>Из-за перечисленных различий, использование необъявленных переменных может привести к непредсказуемым последствиям. <strong>Рекомендовано всегда объявлять переменные, вне зависимости, находятся они внутри функции или в глобальном контексте.</strong> Присваивание значения необъявленной переменной в <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">строгом режиме</a> ECMAScript 5 возбуждает ошибку.</p>

<h3 id="Поднятие_переменных">Поднятие переменных</h3>

<p>Объявление переменных (как и любые другие объявления) обрабатываются до выполнения кода. Где бы не находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода. Это значит, что переменная становится доступной до того, как она объявлена. Такое поведение называется "поднятием" (в некоторых источниках "всплытием").</p>

<pre class="brush: js">bla = 2
var bla;
// ...

// читается как:

var bla;
bla = 2;
</pre>

<p>Поэтому объявление переменных рекомендовано выносить в начало их области видимости (в начало глобального кода или в начало функции). Это даёт понять какие переменные принадлежат функции (т.е. являются локальными), а какие обрабатываются в цепи областей видимости (т.е. являются глобальными).</p>

<p>Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию ее значения. Значение присваивается при выполнении оператора присваивания:</p>

<pre class="brush: js">function do_something() {
  console.log(bar); // выведет undefined
  var bar = 111;
  console.log(bar); // выведет 111
}

// ...неявно понимается как:

function do_something() {
  var bar;
  console.log(bar); // выведет undefined
  bar = 111;
  console.log(bar); // выведет 111
}</pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Объявление_и_инициализация_двух_переменных">Объявление и инициализация двух переменных</h3>

<pre class="brush: js">var a = 0, b = 0;
</pre>

<h3 id="Присвоение_двум_переменным_одного_строкового_значения">Присвоение двум переменным одного строкового значения</h3>

<pre class="brush: js">var a = "A";
var b = a;

// Равнозначно:

var a, b = a = "A";
</pre>

<p>Следите за порядком присвоения значений переменным</p>

<pre class="brush: js">var x = y, y = 'A';
console.log(x + y); // undefinedA
</pre>

<p>В примере, <code>x</code> и <code>y</code> объявлены до выполнение кода, присвоение выполняется позже. Когда происходит присваивание "<code>x = y</code>", <code>y</code> уже существует со значением '<code>undefined</code>', так что ошибка <code>ReferenceError</code> не генерируется. И переменной <code>x</code> присваивается неопределённое значение. Потом переменной <code>y</code> присваивается значение 'A'. Получается, что после выполнения первой строки кода <code>x === undefined &amp;&amp; y === 'A'</code>, отсюда и результат.</p>

<h3 id="Инициализация_нескольких_переменных">Инициализация нескольких переменных</h3>

<pre class="brush: js">var x = 0;

function f(){
  var x = y = 1; // x - объявляется локально. y - глобально!
}
f();

console.log(x, y); // 0, 1
// значение x взято из глобальной переменной, как и ожидалось
// значение переменной y доступно глобально</pre>

<p>Такой же пример, но в строгом режими:</p>

<pre class="brush: js">'use strict';

var x = 0;
function f() {
  var x = y = 1; // Throws a ReferenceError in strict mode.
}
f();

console.log(x, y);</pre>

<h3 id="Неявные_глобальные_переменные_и_внешняя_область_видимости">Неявные глобальные переменные и внешняя область видимости</h3>

<p>Переменные могут ссылаться на переменные внешней области видимости функции, и это может выглядеть неявно:</p>

<pre class="brush: js">var x = 0;  // x объявлена глобально, затем присваивается значение 0

console.log(typeof z); // undefined, пока еще z не существет

function a() { // когда функция a вызванна,
  var y = 2;   // y объявляется локально в функции a, затем присваивается 2

  console.log(x, y);   // 0 2

  function b() {       // когда функция b вызванна
    x = 3;  // присваивается 3 существующей глобальной x
    y = 4;  // присваивается 4 существующей внешней y
    z = 5;  // создается новая глобальная переменная z и присваивается значение 5.
  }         // (Порождает ReferenceError в strict mode(<em>строгом</em> режиме).)

  b();     // вызов b создает z как глобальную переменную
  console.log(x, y, z);  // 3 4 5
}

a();                   // вызов a также вызывает b
console.log(x, z);     // 3 5
console.log(typeof y); // undefined, так как y это локальная переменная для функции a</pre>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Начальное определение. Имплементировано в JavaScript 1.0</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>



<div id="compat-mobile">{{Compat("javascript.statements.var")}}</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{jsxref("Statements/let", "let")}}</li>
 <li>{{jsxref("Statements/const", "const")}}</li>
 <li><a class="external" href="http://blog.safeshepherd.com/23/how-one-missing-var-ruined-our-launch/">How One Missing `var` Ruined our Launch</a></li>
</ul>