Переменные и константы в JavaScript
http://belarusweb.net
Основы создания сайтов

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

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

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

Таким образом, переменная представляет собой просто имя и выделенную под это имя область памяти, в которой хранятся значения данной переменной. Однако прежде, чем использовать переменную, ее нужно сперва объявить, т.к. обращение к необъявленной переменной вызовет ошибку. Делается это при помощи ключевых слов var (от англ. variable) или let (если данный оператор используется внутри блока {...}, то переменная будет доступна только внутри данного блока). Если нужно объявить сразу несколько переменных, то их имена следует перечислять после данных ключевых слов через запятую (см. пример 1.1.7.1). При этом разрешается сразу же инициализировать вновь создаваемые переменные, присваивая им требуемые значения. Если во время объявления переменной она не инициализируется, то по умолчанию ей присваивается специальное значение undefined.

//Если раскомментировать, будет вызвана ошибка, ведь такая
//переменная не была объявлена в коде скрипта
//alert(bus);	

//Объявили одну переменную	
var orange; 
//Объявили 2 переменные и одну сразу же инициализировали		
var apple=5, lime; 
//Инициализируем переменную отдельно		
lime=20;

//Выведет undefined, т.к. переменная не была инициализированна
alert(orange);	
//Выведет 5, т.к. мы сразу инициализировали переменную
alert(apple);		
//Выведет 20, т.к. переменой тоже было присвоено значение
alert(lime);
 
//Объявили 2 переменные при помощи оператора let	
let number_1=7, number_2; 
//Выведет 7
alert(number_1);
//Выведет undefined, т.к. переменная не была инициализированна
alert(number_2);

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

После того, как переменная будет создана, к ней можно обращаться по имени для использования хранящегося в ней значения. Чтобы изменить текущее значение переменной, ей нужно просто присвоить новое значение (см. пример 1.1.7.2). Более того, поскольку при объявлении переменных их тип не указывается, то переменным можно присваивать значения любых типов. Например, переменной можно изначально присвоить число, а позже изменить значение на строку.

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

//Объявили одну переменную и сразу инициализировали ее
var tracks=5; 
//Выведет 5
alert(tracks);

//Присвоили ей другое значение, увеличив значение еще на 5		
tracks=tracks+5; 
//Выведет 10
alert(tracks);

//Повторно объявили  переменную, но значение не изменили 
var tracks; 
//Выведет 10
alert(tracks);

//Изменяем значение переменной на строку
tracks='Десять';
//Выведет строку 'Десять'
alert(tracks);	

Пример 1.1.7.2 Обращение к переменным в JavaScript  

Во избежание ошибок всегда объявляйте переменную при помощи ключевых слов var или let и старайтесь избегать бессмысленных повторных объявлений переменных. Также помните, что имена переменных в JavaScript регистрозависимы, поэтому, например, Name и name являются именами совершенно разных переменных.

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

Область видимости переменной - это та часть программы, в которой переменная определена и доступна для использования.

В JavaScript принято выделять глобальную и локальную области видимости переменных. При чем локальную область видимости также подразделяют на область видимости функции и область видимости блока. Если переменная была объявлена вне функции или блока {...} в коде верхнего уровня, то ее называют глобальной переменной. Глобальная переменная становится доступной в любом месте скрипта. Если же переменная была объявлена внутри функции или при помощи оператора let внутри блока {...}, то ее называют локальной переменной.

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

  • вне функции при помощи оператора var;
  • вне функции и вне любого блока {...} при помощи оператора let.
//Объявили глобальную переменную при помощи оператора var
var global_var='global var'; 
//Выведет 'global var'
alert(global_var);

//Объявили глобальную переменную при помощи оператора let
let global_let='global let'; 
//Выведет 'global let'
alert(global_let);

//Объявили функцию my_func
function my_func(){
		
	//Выведет 'global var', т.к. глобальные
	//переменные доступны в любом месте скрипта
	alert(global_var);
		
	//Выведет 'global let', т.к. глобальные
	//переменные доступны в любом месте скрипта
	alert(global_let);
}

//Вызываем функцию
my_func();

//Объявляем переменные в блоке условного оператора 
if(true){
	//Объявили переменную при помощи var
	var if_var='if var';
}

//Выведет строку 'if var', ведь переменная является
//глобальной, т.к. была объявлена вне функции при
//помощи оператора var
alert(if_var);

Пример 1.1.7.3 Объявление глобальных переменных  

Переменная станет локальной (см. пример 1.1.7.4) и будет видна только в области видимости функции (т.е. во всем теле функции, включая находящиеся в нем блоки {...} циклов, условных операторов, а также других функций), если она:

  • является аргументом функции;
  • была объявлена при помощи оператора var внутри функции;
  • была объявлена при помощи оператора let внутри функции, но вне находящихся в теле функции каких-либо блоков {...}.
//Объявили функцию my_func
function my_func(){
	
	//Объявили локальную переменную при помощи var
	//Будет доступна во всем теле функции
	var local_var='local var';
	//Выведет 'local var'
	alert(local_var);
		
	//Объявили локальную переменную при помощи let
	//Будет доступна во всем теле функции
	let local_let='local let';
	//Выведет 'local let'
	alert(local_let);
	
}//Здесь заканчивается тело функции

//Вызываем функцию
my_func();

//Вызовет ошибку, т.к. переменные видны только
//внутри функции, где были объявлены
//alert(local_var);
//alert(local_let);

Пример 1.1.7.4 Локальные переменные в области видимости функции  

Переменная станет локальной и будет видна только в области видимости своего блока {...}, если она была объявлена при помощи оператора let внутри блока {...}, включая все вложенные блоки {...} циклов, условных операторов и функций (см. пример 1.1.7.5).

//Объявили функцию my_func
function my_func(){
		
	//Объявляем переменные в блоке условного оператора 
	if(true){
		
		//Объявили переменную при помощи var
		//Будет доступна во всем теле функции
		var if_local_var='if local var';
		//Выведет 'if local var'
		alert(if_local_var);
		
		//Объявили переменную при помощи let
		//Будет доступна только внутри блока if
		let if_local_let='if local let';
		//Выведет 'if local let'
		alert(if_local_let);
	}
	
	//Выведет 'if local var'
	alert(if_local_var);	
	//Получим ошибку, т.к. переменная доступна
	//только внутри блока if и всех вложенных блоках
	//alert(if_local_let);	
	
}//Здесь заканчивается тело функции

//Вызываем функцию
my_func();

Пример 1.1.7.5 Локальные переменные в области видимости блока  

В локальной области видимости, будь то область видимости функции или блока, локальная переменная с тем же именем, что и глобальная переменная, будет иметь приоритет (см. пример 1.1.7.6).

//Объявляем глобальные переменные
var a=5;
let b=7;

//Объявили функцию my_func
function my_func(){
    
   //Объявили локальную переменную a
   var a=55;
   //Выведет 55
   alert(a);
      
   //Объявили локальную переменную b
   let b=77;
   //Выведет 77
   alert(b);   
}
 
//Вызываем функцию
my_func();

if(true){
   //Объявили локальную переменную b
   let b=777;
   //Выведет 777
   alert(b);   	
}

//А здесь локальные переменные уже недоступны
//Выведет 5
alert(a);
//Выведет 7
alert(b);

Пример 1.1.7.6 Локальные и глобальные переменные с одинаковыми именами  

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

Сравнение операторов var и let

Следует отметить, что оператор let появился в JavaScript совсем недавно. Это позволило создавать локальные переменные, видимые только в области видимости конкретного блока, чего ранее нельзя было сделать при помощи оператора var. Однако это отличие не единственное. Так обращение к переменной до ее объявления при помощи оператора let приведет к ошибке, в то время как при объявлении переменной при помощи оператора var ошибки не будет, просто переменная будет иметь значение undefined (см. пример 1.1.7.7). Кроме того, повторное объявление переменной при помощи оператора let в том же блоке также приведет к ошибке.

//Выведет undefined
alert(apples);
//Будет ошибка, т.к. объявления переменных 
//при помощи let не поднимаются вверх
//alert(oranges);
		
//Объявили переменную при помощи var
var apples='5 apples';
//Объявили переменную при помощи let
let oranges='10 oranges';

//Выведет '5 apples'
alert(apples);
//Выведет '10 oranges'
alert(oranges);

//Повторное объявление при помощи let 
//в том же блоке недопустимо
//let oranges;

Пример 1.1.7.7 Сравнение операторов var и let  

Константы в JavaScript

Иногда в ходе выполнения скриптов некоторые значения должны оставаться постоянными на протяжении всего выполнения данного скрипта. В таких случаях используются константы, которые представляют собой именованные контейнеры для хранения неизменяемых (постоянных) значений. Имена констант должны соответствовать общим правилам, установленным для идентификаторов в JavaScript. Однако по принятому соглашению, имена констант принято писать в верхнем регистре (хотя, повторюсь, разрешается применять имена в любом регистре).

Создаются константы при помощи ключевого слова const, после чего изменить значение константы уже не получится (см пример 1.1.7.8). Также следует иметь в виду, что в отличие от переменных константы при объявлении должны быть сразу же инициализированы.

//Вызовет ошибку, т.к. константа еще не объявлена
//alert(APPLES);

//Создаем константу и не забываем инициализировать ее
const APPLES=5;
//Выведет 5
alert(APPLES);

//Повторно объявлять константы, а также
//изменять их значения нельзя
//APPLES=10;

if(true){
	//Создаем константу в области видимости блока
	const APPLES=10;
	//Ошибки не будет, выведет 10
	alert(APPLES);
}

Пример 1.1.7.8 Использование констант в JavaScript  

Как видно из примера, обращение к константе до ее объявления вызовет ошибку. Кроме того, для констант характерна блочная область видимости (аналогично переменным, объявленным при помощи оператора let). Поэтому, если объявить константу с таким же именем вне блока или в другом блоке, ошибки не возникнет.