Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Javascript глобальные и локальные переменные – познай азы языка веб-программирования

Доброго времени суток, поклонники JavaScript-а и мои верные подписчики. В сегодняшней публикации я подробно расскажу вам о том, как создаются в JavaScript глобальные переменные и локальные. Я обязательно дам определения важным терминам, расскажу про особенности объявления и инициализации переменных, опишу, что такое область видимости и как в ней функционируют созданные элементы.

Все это относится к самым начальным, базовым знаниям языка. Без понимания всего этого вы не сможете двигаться дальше и развивать свои навыки программирования в js. К тому же ключевые понятия вам пригодятся не только в данной специализации, а еще и вообще в IT-шной области. Ну что ж, приступим!

Что из себя представляет переменная и как она создается?

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

Переменных может быть огромное количество и все они должны быть с уникальным именем.

Существует два вида переменных: глобальные и локальные. Их разница состоит только в различной области видимости переменных. Так, глобальные элементы видны на протяжении всего кода, а локальные – только в небольшой области, где были объявлены.

Кстати, старайтесь с самого первого дня, с первого вашего кода называть элементы логичными и понятными именами. Потому что далее, когда вы будете работать с увесистыми программами, спустя какой-то промежуток времени вы не вспомните, что означает, к примеру, «aa1» или «perem3».

Перемене в javascript

А из названия абсолютно ничего не ясно! Тут еще полбеды, все-таки в своей писанине не так сложно разобраться. А что вы будете делать, если вам дадут задание закончить таски в другой программе, о который даже раньше не слышали? С такими названиями разбор программной реализации убьет уйму полезного времени.

Нотацию прочитал, теперь вернемся к объявлению переменных.

Чтобы создать переменную нужно вначале написать ключевое слово 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”

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

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

На этом статья подошла к своему логическому концу. Надеюсь она была очень интересной и полезной. Жду ваших заявок на подписку и непременно буду рад новым читателям. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 31 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: