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

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

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

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

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

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>
		Для объявления переменной используются ключевые слова var и let.
		Если необходимо объявить сразу несколько переменных, то их имена
		следует перечислить после ключевого слова через запятую.
		При этом разрешается сразу же инициализировать вновь создаваемые 
		переменные, присваивая им требуемые значения.		
	</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);
}

.definition_word{ 
color: blue;
}

















    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     
//Если раскомментировать, будет вызвана ошибка, ведь такая
//переменная не была объявлена в коде скрипта
//Находим абзац по его id
//var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//p_1.innerHTML=bus; 

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

//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет undefined, т.к. переменная не была инициализированна
p_1.innerHTML=orange; 

//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет 5, т.к. мы сразу инициализировали переменную
p_2.innerHTML=apple; 	

//Находим абзац по его id
var p_3=document.getElementById('p_3'); 
//Вставляем в него значение переменной
//Выведет 20, т.к. переменой тоже было присвоено значение
p_3.innerHTML=lime; 

 
//Объявили 2 переменные при помощи оператора let	
let number_1=7, number_2; 

//Находим абзац по его id
var p_4=document.getElementById('p_4'); 
//Вставляем в него значение переменной
//Выведет 7
p_4.innerHTML=number_1; 

//Находим абзац по его id
var p_5=document.getElementById('p_5'); 
//Вставляем в него значение переменной
//Выведет ошибку, т.к. переменная была объявлена при помощи 
//оператора let, но не была инициализированна
//p_5.innerHTML=number_2; 

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

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

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

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>
		Во избежание ошибок всегда объявляйте переменную при помощи ключевых 
		слов var или let и старайтесь избегать бессмысленных повторных 
		объявлений переменных. Также помните, что имена переменных в 
		JavaScript регистрозависимы.	
	</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);
}

.definition_word{ 
color: blue;
}
















    

//Объявили одну переменную и сразу инициализировали ее
var tracks=5; 
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет 5
p_1.innerHTML=tracks; 

//Присвоили ей другое значение, увеличив значение еще на 5		
tracks=tracks+5; 
//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет 10
p_2.innerHTML=tracks; 

//Повторно объявили  переменную, но значение не изменили 
var tracks; 
//Находим абзац по его id
var p_3=document.getElementById('p_3'); 
//Вставляем в него значение переменной
//Выведет 10
p_3.innerHTML=tracks;

//Изменяем значение переменной на строку
tracks='Десять';
//Находим абзац по его id
var p_4=document.getElementById('p_4'); 
//Вставляем в него значение переменной
//Выведет строку 'Десять'
p_4.innerHTML=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. вне функции при помощи оператора var;<br>
		2. вне функции и вне любого блока {...} при помощи оператора let. 
	</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);
}

.definition_word{ 
color: blue;
}

















    
    
    
    
    
    
    
    
    
    
    

//Объявили глобальную переменную при помощи оператора var
var global_var='global var'; 
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет 'global var'
p_1.innerHTML=global_var; 

//Объявили глобальную переменную при помощи оператора let
let global_let='global let'; 
//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет 'global let'
p_2.innerHTML=global_let; 

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

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

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

//Находим абзац по его id
var p_4=document.getElementById('p_4'); 
//Вставляем в него значение переменной
//Выведет строку '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. была объявлена при помощи оператора var внутри функции;<br>
		3. была объявлена при помощи оператора let внутри функции, 
		но вне находящихся в теле функции каких-либо блоков {...}.
	</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);
}

.definition_word{ 
color: blue;
}















    
//Объявили функцию my_func
function my_func(){
	
	//Объявили локальную переменную при помощи var
	//Будет доступна во всем теле функции
	var local_var='local var';
	//Находим абзац по его id
	var p_1=document.getElementById('p_1'); 
	//Вставляем в него значение переменной
	//Выведет 'local var'
	p_1.innerHTML=local_var; 
			
	//Объявили локальную переменную при помощи let
	//Будет доступна во всем теле функции
	let local_let='local let';
	//Находим абзац по его id
	var p_2=document.getElementById('p_2'); 
	//Вставляем в него значение переменной
	//Выведет '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>
		Переменная станет локальной и будет видна только в области 
		видимости своего блока {...}, если она была объявлена при помощи 
		оператора let внутри блока {...}, включая все вложенные блоки {...} 
		циклов, условных операторов и функций. 
	</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);
}

.definition_word{ 
color: blue;
}

















    
  
  
  
  
    
    
        

//Объявили функцию my_func
function my_func(){
		
	//Объявляем переменные в блоке условного оператора 
	if(true){
		
		//Объявили переменную при помощи var
		//Будет доступна во всем теле функции
		var if_local_var='if local var';
		//Находим абзац по его id
		var p_1=document.getElementById('p_1'); 
		//Вставляем в него значение переменной
		//Выведет 'if local var'
		p_1.innerHTML=if_local_var; 
				
		//Объявили переменную при помощи let
		//Будет доступна только внутри блока if
		let if_local_let='if local let';
		//Находим абзац по его id
		var p_2=document.getElementById('p_2'); 
		//Вставляем в него значение переменной
		//Выведет 'if local let'
		p_2.innerHTML=if_local_let; 
	}
		
	//Находим абзац по его id
	var p_3=document.getElementById('p_3'); 
	//Вставляем в него значение переменной
	//Выведет '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);
}

.definition_word{ 
color: blue;
}

















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

//Объявили функцию my_func
function my_func(){
    
   //Объявили локальную переменную a
   var a=55;
	//Находим абзац по его id
	var p_1=document.getElementById('p_1'); 
	//Вставляем в него значение переменной
	//Выведет 55
	p_1.innerHTML=a;    

   //Объявили локальную переменную b
   let b=77;
	//Находим абзац по его id
	var p_2=document.getElementById('p_2'); 
	//Вставляем в него значение переменной
	//Выведет 77
	p_2.innerHTML=b; 
}
 
//Вызываем функцию
my_func();

if(true){
   //Объявили локальную переменную b
   let b=777;
	//Находим абзац по его id
	var p_3=document.getElementById('p_3'); 
	//Вставляем в него значение переменной
	//Выведет 777
	p_3.innerHTML=b; 
}

//А здесь локальные переменные уже недоступны
//Находим абзац по его id
var p_4=document.getElementById('p_4'); 
//Вставляем в него значение переменной
//Выведет 5
p_4.innerHTML=a; 

//Находим абзац по его id
var p_5=document.getElementById('p_5'); 
//Вставляем в него значение переменной
//Выведет 7
p_5.innerHTML=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>
		Обращение к переменной до ее объявления при помощи оператора let 
		приведет к ошибке, в то время как при объявлении переменной при 
		помощи оператора var ошибки не будет, просто переменная будет 
		иметь значение undefined. 
	</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);
}

.definition_word{ 
color: blue;
}

















  
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет undefined
p_1.innerHTML=apples; 

//Находим абзац по его id
//var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Будет ошибка, т.к. объявления переменных 
//при помощи let не поднимаются вверх
//p_2.innerHTML=oranges; 
		
//Объявили переменную при помощи var
var apples='5 apples';
//Объявили переменную при помощи let
let oranges='10 oranges';

//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение переменной
//Выведет '5 apples'
p_2.innerHTML=apples; 

//Находим абзац по его id
var p_3=document.getElementById('p_3'); 
//Вставляем в него значение переменной
//Выведет '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="definition_word">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);
}

.definition_word{ 
color: blue;
}













  
//Находим абзац по его id
//var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Вызовет ошибку, т.к. константа еще не объявлена
//p_1.innerHTML=APPLES; 

//Создаем константу и не забываем инициализировать ее
const APPLES=5;
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение переменной
//Выведет 5
p_1.innerHTML=APPLES; 


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

if(true){
	//Создаем константу в области видимости блока
	const APPLES=10;
	//Находим абзац по его id
	var p_2=document.getElementById('p_2'); 
	//Вставляем в него значение переменной
	//Ошибки не будет, выведет 10
	p_2.innerHTML=APPLES; 
}

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

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

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