Доброго времени суток, поклонники JavaScript-а и мои верные подписчики. В сегодняшней публикации я подробно расскажу вам о том, как создаются в JavaScript глобальные переменные и локальные. Я обязательно дам определения важным терминам, расскажу про особенности объявления и инициализации переменных, опишу, что такое область видимости и как в ней функционируют созданные элементы.
Все это относится к самым начальным, базовым знаниям языка. Без понимания всего этого вы не сможете двигаться дальше и развивать свои навыки программирования в js. К тому же ключевые понятия вам пригодятся не только в данной специализации, а еще и вообще в IT-шной области. Ну что ж, приступим!
Что из себя представляет переменная и как она создается?
Переменная – это такой элемент языка программирования, под который выделяется область памяти и в которой хранятся некие значения.
Переменных может быть огромное количество и все они должны быть с уникальным именем.
Существует два вида переменных: глобальные и локальные. Их разница состоит только в различной области видимости переменных. Так, глобальные элементы видны на протяжении всего кода, а локальные – только в небольшой области, где были объявлены.
Кстати, старайтесь с самого первого дня, с первого вашего кода называть элементы логичными и понятными именами. Потому что далее, когда вы будете работать с увесистыми программами, спустя какой-то промежуток времени вы не вспомните, что означает, к примеру, «aa1» или «perem3».
А из названия абсолютно ничего не ясно! Тут еще полбеды, все-таки в своей писанине не так сложно разобраться. А что вы будете делать, если вам дадут задание закончить таски в другой программе, о который даже раньше не слышали? С такими названиями разбор программной реализации убьет уйму полезного времени.
Нотацию прочитал, теперь вернемся к объявлению переменных.
Чтобы создать переменную нужно вначале написать ключевое слово var, а после само имя. Вот так это выглядит:
var text = “Hello, user!”
После этого обращение к text происходит без «var»:
text = “New text.”
В этом случае значение перезапишется.
Для лучшего понимания рассмотрите пример, в котором создается одна переменная. К ее значению мы обратимся до и после перезаписи.
1 2 3 4 | var text = “Hello, user!”; alert(text); // выведет “Hello, user!” text= “New text!”; alert(text); // выведет “New text!” |
Особенности глобальных объектов
Все созданные объекты в js-коде делятся на глобальные и локальные. Выше я объяснил, в чем заключается разница между ними. А теперь подробнее разберем глобальные объекты.
Ими являются все функции и переменные, которые объявлены в основном полотне кода, т.е. не внутри каких-то функций. Все они в js автоматически становятся свойствами глобального объекта, который в браузерах явно доступен под словом window. Рассмотрим пример.
var price = 145; // создаем глобальную переменную
alert (window.price); // ответ: 145
Пока все просто, но приготовьтесь к подводным камням. Иногда, не зная особенностей сохранения и перезаписи значений переменных можно затереть очень важные параметры. Такие ошибки достаточно тяжело отследить и нереально найти при помощи компиляторов. Поэтому хорошенько разберите следующий материал.
Подводные камни и область видимости
Для лучшего понимания проблемы я сначала покажу небольшую программу, где в функции создам локальную переменную, а после вне ее границ – глобальную.
1 2 3 4 5 6 7 8 9 | function test() {
p = 2;
return p;
}
alert(p); // undefined
p = “важный текст”;
alert(p); // выведет «важный текст»
test(); // вызываем функцию
alert(p); // выведет 2 |
Изначально в функции test я инициализировал локальную переменную со значением 2, а после создал глобальную текстовую переменную, хранящую в себе какие-то важные данные.
И вот тут выскакивает вот та «подводная глыба».
Во-первых, из-за того, что я воспользовался созданием элементов по правилам устаревшего стандарта JavaScript, все переменные “p” были созданы только в момент присвоения (при использовании директивы var переменные создаются сразу со значением undefined, а во время инициализации через «=» значение перезаписывается).
Во-вторых, в этом случае для присвоения значения неявно созданным элементам в js используется существующая или создается новая глобальная переменная. Поэтому в приведенном примере после вызова функции test значение глобальной «p» затерлось.
Во избежание «крушения» всегда используйте ключевое слово var. Тогда все объекты будут объявляться явно и создаваться новые.
Вот исправленный пример:
1 2 3 4 5 6 7 8 9 10 | function test() {
var p = 2;
alert (p);
return p;
}
alert(p); // undefined
var p = "важный текст";
alert(p); // выведет «важный текст»
test(); // вызываем функцию, в этом случае выведет 2
alert(p); // выведет «важный текст» |
Вот теперь код отрабатывает верно. Как вы заметили, область видимости локальной «p» находится в пределах функции test, а глобальной – во всем остальном коде.
Несколько слов о константах
Как и во всех других языках программирования, в JavaScript есть константы. Для тех, кто не знает, что это такое, я прикреплю определение.
Константа – это вид переменной, значение которой неизменное.
По правилам синтаксиса в js их название всегда пишется строчными (большими) буквами. Например,
var MAIN_COLOR = “#fff”
В скриптовом языке нет технических средств, которые делали бы константу по-настоящему константой. На самом деле они являются обычными переменными, которые можно перезаписывать. Однако по правилам разработчики используют эти элементы с заглавными буквами в имени как константы и в ходе написания кода не меняют их значение.
Главное предназначение констант – сохранение в себе сложных строк, важных чисел или других значений, в которых при повторном написании легко сделать опечатку или ни в коем случае нельзя менять, или же для упрощения кода. Например, в константах можно хранить часто повторяющийся запросы для сайта.
На этом статья подошла к своему логическому концу. Надеюсь она была очень интересной и полезной. Жду ваших заявок на подписку и непременно буду рад новым читателям. Пока-пока!
С уважением, Роман Чуешов
