Переменные в JavaScript. Глобальные и локальные переменные, объявление, инициализация

JavaScript, Клиентский JavaScript, Возможности и ограничения, структура языка, Основы JavaScript, Циклы, Функции, Объекты, Массивы

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

» » Сообщение:

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

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

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

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

Объявление переменных

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

Код: Выделить всё Развернуть
var i;
var sum;

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

Код: Выделить всё Развернуть
var i, sum;

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

Код: Выделить всё Развернуть
var num = 10, str = "Hello!";

После того как переменная объявлена ключевое слово var при использовании переменной указывать не нужно:

Код: Выделить всё Развернуть
var num1 = 10, num2 = 5;

alert(num);
var sum = num1 + num2;

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

Код: Выделить всё Развернуть
var x = 10;
x = "текст";

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

Код: Выделить всё Развернуть
var x;
alert(x);

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

Код: Выделить всё Развернуть
var a = 10;

var a = 5; // Тоже самое, что и a = 5;

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

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

Код: Выделить всё Развернуть
var x = 10, msg = "Hello";

alert(x);
document.write(msg);

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

Код: Выделить всё Развернуть
var a = 10, b;

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

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

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

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

Код: Выделить всё Развернуть
var x = "глобальная";   // Глобальная переменная
function checkscope() {
var x = "локальная";  // Локальная переменная с тем же именем, что и у глобальной
document.write(x);    // Используется локальная переменная, а не глобальная
}
checkscope();           // => "локальная"

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

Код: Выделить всё Развернуть
var x = "глобальная";
function checkscope() {
x = "локальная";      // изменяем значение глобальной переменной
}

checkscope();
document.write(x);      // => "локальная"

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

Код: Выделить всё Развернуть
function foo() {
a = 2;
}

/* alert(a);  // будет вызвана ошибка, т.к. переменная "a" не объявлена */
foo();
alert(a);     // => 2

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

Код: Выделить всё Развернуть
var scope = "глобальная";

function checkScope() {
var scope = "локальная 1";
function nested() {
var scope = "локальная 2";
return scope;
}
return nested();
}

var x = checkScope();
alert(x);

Область видимости и подъем

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

Код: Выделить всё Развернуть
var str = "глобальная";
function foo() {
alert(str);         // undefined
var str = "локальная";
alert(str);         // "локальная"
}
foo();

Можно было бы подумать, что первая инструкция внутри функции должна вывести строку "глобальная", потому что объявление локальной переменной "str" еще не было выполнено. Однако, вследствие действия правил области видимости выводится совсем другое значение. Локальная переменная определена во всем теле функции, а это значит, что глобальная переменная с тем же именем оказывается скрытой для всей функции. Хотя локальная переменная определена во всем теле функции, она остается неинициализированной до выполнения инструкции var. Таким образом функция выше эквивалентна реализации, приведенной ниже, в которой объявление переменной "поднято" в начало функции, а инициализация переменной выполняется там же, где и раньше:

Код: Выделить всё Развернуть
function foo() {
var str;            // Объявление локальной переменной в начале функции
alert(str);         // Здесь она доступна, но имеет значение undefined
str = "локальная";  // Здесь она инициализируется
alert(str);         // А здесь она имеет ожидаемое значение - "локальная"
}

Тоже самое касается и глобальной области видимости, т. е. переменная объявленная снизу, доступна наверху:

Код: Выделить всё Развернуть
document.write(x); // Если убрать объявление переменной внизу, то при обращении
var x = 10;     // к переменной будет вызвана ошибка ReferenceError

Переменные как свойства

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

Код: Выделить всё Развернуть
var num = 10;

var del = delete num;  // false, переменная не была удалена
document.write(del + "\n" +num);

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

Код: Выделить всё Развернуть
num = 10;

var del = delete num;  // true, переменная была удалена

document.write(del);
document.write(num);   // ошибка ReferenceError, обращение к несуществующей переменной

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

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

Код: Выделить всё Развернуть
totalPrice = 2.42 + 4.33; // Общая цена

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

Код: Выделить всё Развернуть
totalPrice = candyPrice + oilPrice;

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

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

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

Код: Выделить всё Развернуть
var hairColor = prompt("Какой у вас цвет волос", "");
document.write('Мне нравится "' + hairColor + '" цвет');

Константы

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

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

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

Примечание: ключевое слово const не поддерживается в IE10 и более ранних версиях.
переменные javascript, объявление переменных, инициализация переменной, var, имена переменных, обращение к переменным, облась видимости, именованная область, delete



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0648JavaScript. Логические операторы и ...
Сообщение от: Admin
0929Обход child nodes - потомков элемен...
Сообщение от: Admin
0634Колонки одинаковой высоты - лучшее ...
Сообщение от: Admin
0560Замена прямых кавычек на “ёлочки”. ...
Сообщение от: Admin
151431Re: Рейтинг материалов +/- (плюс/ми...
Сообщение от: kinouser