Переменные в JavaScript

В этой главе:

  • Что такое переменная

  • Объявление, определение и инициализация переменной

  • Обращение к значению переменной

  • Область видимости переменной

  • Подъём объявлений переменных

  • Зачем нужны переменные?

  • Константы

Что такое переменная

Когда в программе необходимо сохранить значение, чтобы использовать его позже, это значение присваивается переменной. Переменная - это именованная область в оперативной памяти компьютера, предназначенная для хранения различной информации. Когда переменной присваивается значение, оно записывается в ячейку памяти, связанную с данным именем переменной. Затем, при выполнении программы, когда указывается имя переменной вместо неё подставляется значение. Если говорить простым языком, то переменная определяет символьное имя для значения и обеспечивает возможность обратиться к нему по имени в программе.

Если вы ещё не до конца поняли, что такое переменная, то можно представить переменную в виде обычной коробки, где имя переменной - это название коробки. В каждую коробку можно класть предметы различного типа. Если придерживаться этих аналогий, то процесс присвоения значения переменной - это процесс помещения предмета в коробку. Например, когда нам нужно сохранить число 12 во время работы программы в переменную a1, мы должны взять коробку с надписью a1 и положить туда число 12. Когда нам нужно воспользоваться значением переменной a1, мы берём коробку с надписью, открываем и достаём оттуда положенное ранее число 12.

Переменная получила своё название благодаря тому, что её значение может быть изменено по ходу выполнения программы, иными словами, её содержимое подлежит изменению и не является постоянным.

Объявление, определение и инициализация переменной

Прежде чем использовать переменную в JavaScript, её необходимо объявить. Переменные объявляются с помощью ключевого слова var следующим образом:

1
2
var i;
var sum;

Один раз использовав ключевое слово var, можно объявить несколько переменных, перечислив их через запятую:

1
var i, sum;

После того как переменная объявлена ключевое слово var при использовании переменной указывать не нужно. Присвоить какое-либо значение переменной можно с помощью оператора присваивания, который обозначается символом равно (=). Присвоение начального значения объявленной переменной называется инициализацией:

1
2
3
4
var num, msg;    // Объявление переменной
 
num = 10;        // инициализация - присвоение начального значения
msg = "Hello";

Определение переменной - это одновременное выполнение двух действий: объявление переменной и присвоение ей начального значения (инициализация):

1
2
3
4
// Определение переменных
var num = 10;
var str = "hello";
var i = 0, j = 1, m = 'a';

Переменные в JavaScript не имеют типа, поэтому переменной может быть присвоено значение любого типа, а затем этой же переменной может быть присвоено значение другого типа.

1
2
var x = 10;
x = "текст";

Если при объявлении переменной ей не было присвоено никакого значения, она будет содержать значение undefined (в переводе с англ. не определено), до тех пор, пока ей не будет присвоено другое значение.

1
var x;  // => undefined

Обращение к значению переменной

Чтобы в программе обратиться к значению переменной, надо просто написать имя переменной, интерпретатор JavaScript вместо неё подставит значение, которое хранится в переменной:

1
2
3
4
var x = 10, msg = "Hello";
 
alert(x);
document.write(msg);

Так как вместо имени переменной подставляется её значение, можно копировать значение из одной переменной в другую:

1
2
3
var a = 10, b;
 
b = a;  // тоже самое, что и b = 10;

Область видимости переменной

В JavaScript есть две области видимости переменной: глобальная и локальная. Область видимости переменной – это участок исходного кода программы, в котором эта переменная видна и её можно использовать. Область видимости переменной зависит от того, где была определена переменная. Переменная, которая была объявлена за пределами функции является глобальной переменной - она имеет глобальную область видимости и доступна в любом месте исходного кода. Переменная, объявленная внутри функции называется локальной - она имеет локальную область видимости (область видимости функции) и доступна в любом месте внутри тела функции, в том числе и внутри вложенных функций (текущей функции). Локальная переменная создаётся и уничтожается каждый раз при вызове функции.

Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем, т.е. если объявить локальную переменную или параметр функции с тем же именем, что у глобальной переменной, то глобальная переменная будет скрыта и будет использоваться локальная:

1
2
3
4
5
6
var x = "глобальная";   // Глобальная переменная
function checkscope() {
  var x = "локальная"// Локальная переменная с тем же именем, что и у глобальной
  document.write(x);    // Используется локальная переменная, а не глобальная
}
checkscope();           // => "локальная"

Если в функции необходимо использовать глобальную переменную, а не локальную, то просто указываете имя глобальной переменной вместо объявления новой локальной переменной:

1
2
3
4
5
6
7
var x = "глобальная";
function checkscope() {
  x = "локальная";      // изменяем значение глобальной переменной
}
 
checkscope();
document.write(x);      // => "локальная"

Чтобы создать новую глобальную переменную внутри функции ключевое слово var использовать не нужно, иначе будет объявлена локальная переменная. Глобальная переменная объявленная внутри функции создаётся в момент вызова функции, а не при определении функции:

1
2
3
4
5
6
7
function foo() {
  a = 2;
}
 
/* alert(a);  // будет вызвана ошибка, т.к. переменная "a" не объявлена */
foo();
alert(a);     // => 2

Подъём объявлений переменных

В JavaScript объявления переменных неявно "поднимаются" на самый верх относительно своей области видимости. Рассмотрим небольшой пример:

1
2
3
4
5
6
7
var x = 5;
function bar() {
  alert(x);     // => undefined
  var x = 10;
  alert(x);     // => 10
}
bar();

Здесь можно было бы подумать, что первая инструкция внутри функции должна вывести число 5, потому что объявление локальной переменной "x" ещё не было выполнено. Однако, вследствие действия правил области видимости и "поднятия" объявления переменной, выводится совсем другое значение. Таким образом функция выше эквивалентна определению функции приведённой ниже, в которой объявление переменной "поднято" в начало функции, а инициализация переменной выполняется там же, где и раньше:

1
2
3
4
5
6
7
8
var x = 5;
function bar() {
  var x;
  alert(x);     // => undefined
  x = 10;
  alert(x);     // => 10
}
bar();

Зачем нужны переменные?

Переменные помогают сделать программный код понятнее. Рассмотрим небольшой пример:

1
totalPrice = 2.42 + 4.33; // Общая цена

Имеющиеся здесь числа могут означать что угодно. Чтобы стало понятнее, что здесь суммируется, можно присвоить 2.42 в качестве значения переменной candyPrice (цена конфет), а 4.33 - в качестве значения переменной oilPrice (цена масла):

1
totalPrice = candyPrice + oilPrice;

Теперь вместо того, чтобы вспоминать, что эти значения означают, можно увидеть, что в сценарии складывается цена конфет с ценой масла.

Переменные помогают экономить время при написании и отладке сценария. Вместо того, чтобы везде использовать одно и тоже фактическое значение (литерал), его можно присвоить в начале сценария переменной, и далее в остальном коде сценария вместо литерала использовать переменную. Если позднее будет принято решение об изменении значения, то вносить изменения в код придется не в нескольких местах, а только в одном месте - там, где переменной присваивалось значение.

Переменные могут использоваться для сохранения значения пользовательского ввода и его дальнейшего использования в программе:

1
2
var hairColor = prompt("Какой у вас цвет волос", "");
document.write('Мне нравится "' + hairColor + '" цвет'); 

Константы

Для хранения данных, которые никогда не будут меняться, используются константы. Константы определяются аналогично переменным, но вместо ключевого слова var используется ключевое словоconst. Чтобы в коде программы константы отличались от имён переменных, им часто присваивают имена, написанные заглавными буквами:

1
2
3
4
const MAX = 10;
document.write(MAX);
/*  var MAX = 5; // переопределение константы на переменную вызовет ошибку */
/*  MAX = 5;     // присвоение нового значения константе также может вызвать ошибку */

Константа не меняет своё значение в процессе выполнения программы, но если будет необходимо изменить её значение, ничто не мешает поменять его в исходном коде, в том месте, где константа была определена.

Никогда не оставляйте константы без значения. Если не инициализировать константу в момент её создания, она не будет иметь значения - и, что хуже всего, ей будет невозможно его присвоить в процессе выполнения программы. Такие константы являются ошибками кода, хотя браузеры об этом не сообщают.

Примечание: ключевое слово const не поддерживается в IE10 и более ранних версиях.