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

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

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

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Переменные в JavaScript</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	
	<p>
		Для объявления переменной используются ключевые слова 
		<span class="blue_letter">var</span> и 
		<span class="blue_letter">let</span>.
		Если необходимо объявить сразу несколько переменных, то их имена
		следует перечислить после ключевого слова через запятую.
		При этом желательно сразу же инициализировать вновь создаваемые 
		переменные, присваивая им требуемые значения.		
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}














	
	
	
	
	
	
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4');

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

//Выведет undefined, т.к. переменная не была инициализированна
p_1.innerHTML='orange == '+orange; 
//Выведет 5, т.к. мы сразу инициализировали переменную
p_2.innerHTML='apple == '+apple; 	
//Выведет 20, т.к. переменой тоже было присвоено значение
p_3.innerHTML='lime == '+lime; 

//Если раскомментировать, будет вызвана ошибка, ведь 
//переменная bus не была объявлена в коде скрипта
//p_3.innerHTML=bus; 
 
//Объявили 2 переменные при помощи оператора let	
let num_1=7, num_2; 

//Выведет 7
p_4.innerHTML='num_1 == '+num_1; 


//Выведет ошибку, т.к. переменная была объявлена при помощи оператора 
//let, но в момент обращения к ней еще не была инициализированна
//p_4.innerHTML=num_2;

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

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Переменные в JavaScript</title>
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	
	<p>
		Во избежание ошибок всегда объявляйте переменную при помощи 
		ключевых слов <span class="blue_letter">var</span> или 
		<span class="blue_letter">let</span> и старайтесь избегать 
		бессмысленных повторных объявлений переменных. Также помните, 
		что имена переменных в 
		<span class="blue_letter">JavaScript</span> регистрозависимы.	
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}



















  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4');
var p_5=document.getElementById('p_5');


//Объявили одну переменную и сразу инициализировали ее
var tracks=5; 
//Выведет 5
p_1.innerHTML='tracks=5 => tracks == '+tracks; 

//Присвоили ей другое значение, увеличив значение еще на 5		
tracks=tracks+5; 
//Выведет 10
p_2.innerHTML='tracks=tracks+5 => tracks == '+tracks; 

//Повторно объявили  переменную, но значение не изменили 
var tracks; 
//Значение останется прежним. Выведет 10
p_3.innerHTML='Объявили повторно => tracks == '+tracks;

//Изменяем значение переменной на строку
tracks='Десять';
//Выведет строку 'Десять'
p_4.innerHTML='tracks=\'Десять\' => tracks == '+tracks;

//Это новая переменная, т.к. имена регистрозависимы
var Tracks=15; 
//Выведет 15
p_5.innerHTML='Tracks=15 => Tracks == '+Tracks;
	
	

Пример №2. Обращение к переменным в JavaScript

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

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

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

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

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

  • вне функции при помощи оператора var;
  • вне функции и вне любого блока {...} при помощи оператора let.
HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Объявление глобальных переменных</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	
	<p>
		Переменная станет глобальной, если она будет объявлена: <br>
		1. вне функции при помощи оператора 
		<span class="blue_letter">var</span>;<br>
		2. вне функции и вне любого блока {...} при помощи оператора
		<span class="blue_letter">let</span>. 
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
	
	
	
	
		
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}











	
	
	
	
	
	
	
	
	
	
	
		
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4');

//Объявили глобальную переменную при помощи оператора var
var global_var='global var'; 
//Выведет 'global var'
p_1.innerHTML=global_var; 

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

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

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

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

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

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

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

  • является аргументом функции;
  • была объявлена при помощи оператора var внутри функции;
  • была объявлена при помощи оператора let внутри функции, но вне находящихся в теле функции каких-либо блоков {...}.
HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<!--  Не забываем про заголовок документа  -->
	<title>Локальные переменные в области видимости функции</title>
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>

	<p>
		Переменная станет локальной в области видимости функции, если она:<br>
		1. является аргументом функции;<br>
		2. была объявлена при помощи оператора 
		<span class="blue_letter">var</span> внутри функции;<br>
		3. была объявлена при помощи оператора 
		<span class="blue_letter">let</span> внутри функции, 
		но вне находящихся в теле функции каких-либо блоков {...}.
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}
















  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');


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

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


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

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Локальные переменные в области видимости блока</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	
	<p>
		Переменная станет локальной и будет видна только в области 
		видимости своего блока {...}, если она была объявлена при помощи 
		оператора <span class="blue_letter">let</span> 
		внутри блока {...}, включая все вложенные блоки {...} циклов, 
		условных операторов и функций. 
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>	
	
	
	
		
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}












	
	
	
	
	
	
	

  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');

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

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

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Использование локальных и глобальных переменных с одинаковыми именами</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>	
	<p id="p_5"></p>
	
	<p>
		Несмотря на то, что в глобальной области видимости локальные переменные 
		и не видны, в локальной области видимости они будут иметь приоритет над 
		глобальными переменными с теми же именами.
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>

	
	


	
	
	
	
	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}








	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4');
var p_5=document.getElementById('p_5');

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

//Объявили функцию my_func
function my_func(){
    
	//Объявили локальную переменную a
	var a=55;
	//Выведет 55
	p_1.innerHTML='Внутри ф-ции: var a=55; => a=='+a;    

	//Объявили локальную переменную b
	let b=77;
	//Выведет 77
	p_2.innerHTML='Внутри ф-ции: var b=77; => b=='+b; 
}
 
//Вызываем функцию
my_func();

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

//А здесь локальные переменные уже недоступны
//Выведет 5
p_4.innerHTML='Вне ф-ции и блока => a=='+a; 

//Выведет 7
p_5.innerHTML='Вне ф-ции и блока => b=='+b;  

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

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

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Сравнение операторов var и let</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	
	<p>
		Обращение к переменной до ее объявления при помощи оператора 
		<span class="blue_letter">let</span> приведет к ошибке, в то 
		время как при объявлении переменной при помощи оператора 
		<span class="blue_letter">var</span> ошибки не будет, просто 
		переменная будет иметь значение 
		<span class="blue_letter">undefined</span>. 
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>		
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}

















  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');

//Выведет undefined, а не ошибку, т.к.
//переменная объявлена ниже при помощи var
p_1.innerHTML=apples; 

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

//Выведет '5 apples'
p_2.innerHTML=apples; 

//Выведет '10 oranges'
p_3.innerHTML=oranges; 

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

Пример №7. Сравнение операторов var и let

Константы в JavaScript

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

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

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Константы в JavaScript</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	
	<p>
		Создаются константы при помощи ключевого слова 
		<dfn class="blue_letter">const</dfn>. 
		Инициализироваться константы должны в момент объявления.		
	</p>

	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}













  
//Находим на странице элементы 'p' по их  id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');

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

//Создаем константу и не забываем инициализировать ее
const APPLES=5;
//Выведет 5
p_1.innerHTML='const APPLES=5; => APPLES=='+APPLES; 


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

if(true){
	//Создаем константу в области видимости блока
	const APPLES=10;
	//Ошибки не будет, выведет 10
	p_2.innerHTML='В блоке: const APPLES=10; => APPLES=='+APPLES; 
} 
	
	
	
	
	

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

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

Быстрый переход к другим страницам