JavaScript :: null и undefined
http://belarusweb.net
Основы создания сайтов

JavaScript :: Примитивные значения null и undefined

Примитивное значение null

Значение null является единственным представителем одноименного примитивного типа данных, не имеет собственных свойств и методов и обычно используется в смысле 'пустое значение'. По сути null является литералом, который удобно присваивать объявленным переменным или свойствам объектов, а также аргументам функций и методов, когда их тип и значение еще не известны либо должны быть намеренно 'обнулены'. В результате программист получает дополнительную возможность контроля ситуаций, в которых требуется использовать идентификаторы без значений. Короче, рассматривать null следует как признак вполне ожидаемого (контролируемого программистом) отсутствия значения (см. пример №1, а также пример с диалоговым окном метода prompt()).

Записывать null нужно именно в нижнем регистре, т.к. JavaScript чувствителен к регистру символов (т.е. использовать записи Null или NULL недопустимо).

Следует отметить, что проверка значения null на принадлежность к типу оператором typeof возвращает 'object', что скорее всего является багом JavaScript, т.к. по логике вещей ответом должно быть 'null'.

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Значение null</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>
		Значение <dfn class="definition_word">null</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;
}














  
//Объявляем переменную и присваиваем ей стартовое значение null
var x=null; 
 
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение возвращаемое оператором typeof
//Выведет object, хотя должно было бы возвращать null (баг js)
p_1.innerHTML = 'Тип: ' + typeof x;

//Если х равно null (так оно и есть)
if(x==null){
	//Находим абзац по его id
	var p_2=document.getElementById('p_2'); 
	//Вставляем строку (обратный слеш позволяет расположить строку на 2-х строчках)
	p_2.innerHTML = 'Переменной еще не было присвоено какое-то\
					определенное (не нулевое) значение, но все под контролем!';	
}

//Присвоим переменной новое значение
x=5;

//Если х не равно null (так оно и есть, т.к. мы присвоили х число 5)
if(x!=null){
	//Находим абзац по его id
	var p_3=document.getElementById('p_3'); 
	//Вставляем в него значение переменной (выведет 5)
	p_3.innerHTML = 'Было присвоено значение ' + x;	
}
	

Пример №1. Примитивное значение null

Примитивное значение undefined

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

Значение undefined генерируют, например, следующие ситуации:

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

Как видим, значение undefined в большей степени предназначено для генерации именно самим интерпретатором (а не для использования программистами в качестве инструмента назначения 'пустого' значения переменным), являясь при этом признаком неожиданного (неконтролируемого программистом) или ошибочного отсутствия значения.

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

Записывать значение undefined следует в нижнем регистре (т.е. использовать записи Undefined или UNDEFINED недопустимо). Кроме того, на данный момент undefined не является зарезервированным словом, а значит может использоваться в локальных областях видимости в качестве идентификатора. Но делать этого конечно же не рекомендуется не только во избежание путаницы, но и еще и потому, что со временем такое положение вещей может измениться.

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Значение undefined</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">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;
}

















  
//Объявляем переменную, но не инициализируем ее
var x; 
 
//Находим абзац по его id
var p_1=document.getElementById('p_1'); 
//Вставляем в него значение возвращаемое оператором typeof
//Выведет undefined
p_1.innerHTML = 'Тип: ' + typeof x;

//Если значение x равно undefined, т.е. x не была 
//инициализирована значением отличным от undefined
if(x==undefined){
	//Находим абзац по его id
	var p_2=document.getElementById('p_2'); 
	//Выводим сообщение
	p_2.innerHTML = 'Инициализируйте переменную!';	
}

//Объявляем и сразу инициализируем переменную
var y=5;

//Если значение y не равно undefined, т.е. y была 
//инициализирована значением отличным от undefined
if(y!=undefined){
	//Находим абзац по его id
	var p_3=document.getElementById('p_3'); 
	//Вставляем значение
	p_3.innerHTML = 'Переменная у имеет значение ' + y;	
}


	

Пример №2. Примитивное значение undefined

Различия между null и undefined

Несмотря на схожее предназначение и поведение null и undefined имеют ряд различий.

  • В то время как null является литералом, задаваемым одноименным ключевым словом, undefined представляет собой доступное только для чтения значение предопределенной глобальной переменной undefined.
  • Если сравнение этих двух значений при помощи знака нестрогого равенства возвращает true (в этом случае интерпретатор считает их равными), то знак строгого равенства однозначно отличает эти два значения, возвращая false (см. пример №3).
  • Когда в программе возникает небходимость в передаче 'пустого' значения переменной, свойству объекта или аргументу функции, то практически всегда целесообразнее присваивать значение null. Если же нужно узнать была ли переменная инициализированна, то в большинстве случаев используется значение undefined (обычно это проверки при помощи знака нестрогого равенства).
  • null больше является признаком вполне ожидаемого (контролируемого программистом) отсутствия значения, а значение undefined наоборот, чаще выступает признаком неожиданного (неконтролируемого программистом) или ошибочного отсутствия значения.
HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Сравнение null и undefined</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></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;
}








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


//Теперь проверяем на строгое равенство 
rez = (null===undefined).toString(); 
 
//Находим абзац по его id
var p_2=document.getElementById('p_2'); 
//Вставляем в него значение возвращаемое в результате
//строгого сравнения (выведет false)
p_2.innerHTML = '(null===undefined) => '+rez;
	
	
	
	

Пример №3. Сравнение null и undefined

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