Javascript Global Varibles - локальные и глобальные переменные в javascript. Javascript глобальные и локальные переменные – познай азы языка веб-программирования Константы в JavaScript

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

Пишите код с расчетом, что его надо будет поддерживать

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

• Время на изучение и понимание проблемы.
• Время на понимание кода, который является источником проблемы.

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

Другим фактом, связанным с разработкой программного обеспечения, является то, что обычно больше времени занимает чтение кода, а не его создание. При первоначальной постановке задачи разработчик фокусируется и погружается в вопрос, а затем садится и может за один вечер создать существенный по объему код. Затем код, вероятно, работает, но, по естественной натуре программных продуктов, возникают ситуации, требующие повторных пересмотров кода. Например:

• Выявляются ошибки.
• Новые функции добавляются в проект.
• Приложение надо запустить в новом окружении (например, появился новый браузер).
• Меняется назначение кода.
• Код нужно полностью переписать или портировать на другую архитектуру или язык программирования.

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

Легко поддерживаемый код имеет следующие признаки:

• Он легко читается.
• Он хорошо структурирован, и части согласованы между собой.
• Он предсказуем.
• Выглядит так, как будто написан одним человеком.
• Документирован.

Минимизация использования глобальных переменных

JavaScript использует функции для управления контекстом. Переменные, объявляемые внутри функций, являются локальными для них и недоступны вне функций. Глобальные переменные объявляются вне функций или просто используются без объявления.

Каждое окружение JavaScript имеет глобальный объект, который используется вне функций. Каждая глобальная переменная, которую вы создаете, становится свойством глобального объекта. В браузерах для удобства существует дополнительное свойство глобального объекта, которое называется window , и которое (обычно) указывает на сам глобальный объект. Следующий код показывает пример создания и доступа к глобальным переменным в окружении браузера:

Var myglobal = "hello"; console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello"

Проблемы с глобальными переменными

Проблемы с глобальными переменными заключаются в том, что они будут доступны во всем коде JavaScript вашего приложения или страницы. Они находятся в глобальном пространстве имен, и всегда есть шанс для коллизий именования, когда две разных части приложения определяют глобальные переменные с одинаковым именем, но для разных целей.

Также, обычно, веб страница включает код, написанный другими разработчиками. Например:

• Другие библиотеки JavaScript.
• Скрипты партнеров по рекламе.
• Код для отслеживания пользователей и аналитики.
• Разные виджеты, кнопки и плагины.

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

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

К сожалению, очень просто непроизвольно создать глобальную переменную в JavaScript из-за двух его особенностей. Во-первых, вы можете использовать переменную без ее объявления. Во-вторых, JavaScript имеет определение подразумеваемого глобального, которое означает, что любая переменная без объявления становится свойством глобального объекта (и будет доступна как правильно объявленная глобальная переменная). Например:

Function sum(x, y) { // плохо: подразумеваемое глобальное result = x + y; return result; }

В данном коде переменная result используется без объявления. Код отлично работает, но после вызова функции вы получите еще одну переменную result в глобальном пространстве имен, что может привести к проблемам.

Правило минимизации заключается в определении переменных с помощью директивы var . Ниже приводится улучшенная версия функции sum() :

Function sum(x, y) { var result = x + y; return result; }

Еще один плохой вариант для создания подразумеваемых глобальных - это цепочное присваивание значения в рамках объявления var. В следующем примере переменная a будет локальной, а переменная b станет глобальной, что наверняка не входит в список целей создателя кода:

// плохо, не надо использовать function foo() { var a = b = 0; // ... }

Если вы удивлены происходящим, то дело здесь в вычислениях справа-налево. Сначала выполняется выражение b = 0 , и поэтому переменная b не будет объявлена. Возвращаемое значение выражения будет 0, и оно присваивается новой локальной переменной a , которая объявлена директивой var. Такое определение переменных эквивалентно следующей записи:

Var a = (b = 0);

Если вы уже объявили переменные, то цепочное представление будет отлично работать и не создаст нежелательных глобальных переменных:

Function foo() { var a, b; a = b = 0; // обе переменных являются локальными }

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

Побочный эффект забытой декларации var

Есть небольшая разница между явно определенной и подразумеваемой глобальными переменными. Она заключается в возможности удаления переменной с помощью оператора delete:

• Глобальная переменная, объявленная декларацией var (созданная в программе вне функций) не может быть удалена.
• Подразумеваемая глобальная переменная, созданная без объявления (вне зависимости от места создания) может быть удалена.

Технически, подразумеваемая глобальная переменная является свойством глобального объекта, а не переменной. Свойства могут быть удалены с помощью оператора delete, а переменные - нет:

// определяем три глобальных переменных var global_var = 1; global_novar = 2; // плохо (function () { global_fromfunc = 3; // плохо }()); // Пробуем удалить delete global_var; // false delete global_novar; // true delete global_fromfunc; // true // Проверка удаления typeof global_var; // "number" typeof global_novar; // "undefined" typeof global_fromfunc; // "undefined"

Доступ к глобальному объекту

В браузерах глобальный объект доступен в любой точке кода через свойство window (до тех пор, пока вы не сделаете что-нибудь специальное или неожиданное, например, объявите локальную переменную с именем window). Но в других средах окружения данное удобное свойство может быть доступно другим способом (или даже вообще недоступно программисту). Если вам нужен доступ к глобальному объекту без использования идентификатора window , то вы можете использовать следующий способ на любом уровне вложенного пространства имен функции:

Var global = (function () { return this; }());

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

Шаблон одного объявления var

Использование одного объявления var вверху вашей функции является очень полезной практикой. Такой метод имеет следующие преимущества:

• Обеспечивается единственное место для объявления всех локальных переменных функции.
• Предотвращаются логические ошибки, когда переменная используется раньше, чем она объявляется.
• Помогает помнить об объявлении локальных переменных и, следовательно, сокращает количество глобальных переменных.

Шаблон с одним объявлением var выглядит следующим образом:

Function func() { var a = 1, b = 2, sum = a + b, myobject = {}, i, j; // Код функции... }

Вы используете одну декларацию var для объявления нескольких переменных, разделенных запятой. Отличным дополнением будет инициализация переменных исходными данными при их объявлении. Так предотвращаются логические ошибки (все неинициализированные переменные по умолчанию получают значение undefined) и улучшается читабельность кода. Когда вы позже будете просматривать код, как вы сможете определить назначение переменной по ее начальному значению (например, сразу будет видно, что это объект или целое число).

Также можно выполнить операцию при объявлении переменной, например, sum = a + b из предыдущего кода примера. Другим рабочим примером служит оперирование с DOM. Вы можете назначать ссылки на элементы DOM локальным переменным при объявлении:

Function updateElement() { var el = document.getElementById("result"), style = el.style; // выполняем операции с el и style... }

Подъем: проблема с разбросанными декларациями var

JavaScript допускает использование нескольких деклараций var в любом месте функции, и они действуют одинаково, вне зависимости от места размещения. Данная особенность известна как "подъем". Такое функционирование может привести к логическим ошибкам, когда вы используете переменную, а затем объявляете ее для дальнейшего кода функции. Для JavaScript, так как переменная находится в одном пространстве имен (в одной функции), предполагается ее объявление, даже если они используется до директивы var . Например

// плохо myname = "global"; // глобальная переменная function func() { alert(myname); // "undefined" var myname = "local"; alert(myname); // "local" } func();

В данном примере ожидается, что первый вызов функции alert() выдаст сообщение “global”, а второй - “local.” Разумное ожидание, так как при первом вызове локальная переменная myname не объявлена, и функция должна использовать глобальную переменную myname . Но в действительности все работает иначе. Первый вызов функции alert() выдаст “undefined” потому, что myname рассматривается как объявленная локальная переменная в функции (хотя объявление будет позже). Все объявления переменных поднимаются вверх функции. Следовательно, чтобы избежать такого типа ошибок, нужно объявлять все переменные вверху функции.

Предыдущий пример будет действовать так, как если бы он был реализован следующим образом:

Myname = "global"; // глобальная переменная function func() { var myname; // то же, что и -> var myname = undefined; alert(myname); // "undefined" myname = "local"; alert(myname); // "local" } func();

Стоит упомянуть, что в действительности реализация кода более сложная. Есть две стадии обработки кода. На первой стадии создаются переменные, объявления функций и формальные параметры, а также определяется контекст. На второй стадии выполняется код, вычисление функций и создаются неквалифицированные идентификаторы (необъявленные переменные). Но для практического применения можно использовать концепцию подъема, которая хорошо описывает поведение кода.

Переменные служат "контейнерами" для хранения информации.

Вы Помните Школьную Алгебру?

Вы помните школьную алгебру? x=5, y=6, z=x+y

Вы помните, что буква (например x) могла бы использоваться для хранения значения (например 5), и что вы могли бы использовать информацию выше, чтобы вычислить, что значение z равно 11?

Эти буквы называются переменными , и переменные могут использоваться для хранения значений (x=5) или выражений (z=x+y).

Переменные JavaScript

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

Переменная может иметь короткое имя, например x, или более информативное имя, например carname (название автомобиля).

Правила для имен переменных JavaScript:

• Имена переменных чувствительны к регистру (y и Y это две разных переменных)
• Имена переменных должны начинаться с буквы или символа подчеркивания

Замечание: Поскольку JavaScript чувствителен к регистру, имена переменных также чувствительны к регистру.

Пример

Значение переменной может изменяться во время выполнения скрипта. Вы можете ссылаться на переменную по ее имени для отображения или изменения ее значения.

Объявление (Создание) Переменных JavaScript

Создание переменных в JavaScript более часто называют "объявлением" переменных.

Вы объявляете переменные JavaScript с помощью ключевого слова var :

После выполнения предложений выше, переменная x будет содержать значение 5 , и carname будет содержать значение Мерседес .

Замечание: Когда вы присваиваете текстовое значение переменной, заключайте его в кавычки.

Замечание: Если вы объявляете переменную повторно, она не потеряет свое значение.

Локальные Переменные JavaScript

Переменная, объявленная внутри функции JavaScript становится ЛОКАЛЬНОЙ и будет доступна только в пределах этой функции. (переменная имеет локальную область видимости).

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

Локальные переменные уничтожаются при выходе из функции.

Вы узнаете больше о функциях в последующих уроках JavaScript.

Глобальные Переменные JavaScript

Переменные объявленные вне функции становятся ГЛОБАЛЬНЫМИ , и все скрипты и функции на странице могут к ним обращаться.

Глобальные переменные уничтожаются когда вы закрываете страницу.

Если вы объявляете переменную, не используя "var", переменная всегда становится ГЛОБАЛЬНОЙ .

Присваивание Значений Необъявленным Переменным JavaScript

Если вы присваиваете значения переменным, которые еще не были объявлены, переменные будут объявлены автоматически как глобальные переменные.

Эти предложения:

Вы узнаете больше об операторах в следующем уроке JavaScript.

Последнее обновление: 05.04.2018

Все переменные в JavaScript имеют определенную область видимости, в пределах которой они могут действовать.

Глобальные переменные

Все переменные, которые объявлены вне функций, являются глобальными:

var x = 5; let d = 8; function displaySquare(){ var z = x * x; console.log(z); }

Здесь переменные x и d являются глобальными. Они доступны из любого места программы.

А вот переменная z глобальной не является, так как она определена внутри функции.

Локальные переменные

Переменная, определенная внутри функции, является локальной:

Function displaySquare(){ var z = 10; console.log(z); let b = 8; console.log(b); }

Переменные z и b являются локальными, они существуют только в пределах функции. Вне функции их нельзя использовать:

Function displaySquare(){ var z = 10; console.log(z); } console.log(z); //ошибка, так как z не определена

Когда функция заканчивает свою работу, то все переменные, определенные в функции, уничтожаются.

Сокрытие переменных

Что если у нас есть две переменных - одна глобальная, а другая локальная, которые имеют одинаковое имя:

Var z = 89; function displaySquare(){ var z = 10; console.log(z); // 10 } displaySquare(); // 10

В этом случае в функции будет использоваться та переменная z, которая определена непосредственно в функции. То есть локальная переменная скроет глобальную.

var или let

При использовании оператора let каждый блок кода определяет новую область видимости, в которой существует переменная. Например, мы можем одновременно определить переменную на уровне блока и на уровне функции:

Let z = 10; function displayZ(){ let z = 20; { let z = 30; console.log("Block:", z); } console.log("Function:", z); } displayZ(); console.log("Global:", z);

Здесь внутри функции displayZ определен блок кода, в котором определена переменная z. Она скрывает глобальную переменную и переменную z, определенную на уровне функции. В реальной программе блок мог быть предеставлять вложенную функцию, блок цикла for или конструкции if. Но в любом случае такой блок определяет новую область видимости, вне которого переменная не существует.

И в данном случае мы получим следующий консольный вывод:

Block: 30 Function: 20 Global: 10

С помощью оператора var мы не можем определить одновременно переменную с одним и тем же именем и в функции, и в блоке кода в этой функции:

Function displaySquare(){ var z = 20; { var z = 30; // Ошибка! Переменная z уже определена console.log("Block:", z); } console.log("Function:", z); }

То есть с помощью var мы можем определить переменную с одним именем либо на уровне функции, либо на уровне блока кода.

Константы

Все, что относится к оператору let, относится и к оператору const, который позволяет определить константы. Блоки кода задают область видимости констант, а константы, определенные на вложенных блоках кода, скрывают внешние константы с тем же именем:

Const z = 10; function displayZ(){ const z = 20; { const z = 30; console.log("Block:", z); // 30 } console.log("Function:", z); // 20 } displayZ(); console.log("Global:", z); // 10

Необъявленные переменные

Если мы не используем это ключевое слово при определении переменной в функции, то такая переменная будет глобальной. Например:

Function bar(){ foo = "25"; } bar(); console.log(foo); // 25

Несмотря на то, что вне функции bar переменная foo нигде не определяется, тем не менее она доступна вне функции во внешнем контексте.

Иначе было бы если бы мы не только присваивали значение переменной, но и определяли бы ее:

Function bar(){ var foo = "25"; } bar(); console.log(foo); // ошибка

strict mode

Определение глобальных переменных в функциях может вести к потенциальным ошибкам. Чтобы их избежать используется строгий режим или strict mode:

"use strict"; function bar(){ foo = "25"; } bar(); console.log(foo);

В этом случае мы получим ошибку SyntaxError: Unexpected identifier , которая говорит о том, что переменная foo не определена.

Установить режим strict mode можно двумя способами:

добавить выражение "use strict" в начало кода JavaScript, тогда strict mode будет применяться для всего кода

добавить выражение "use strict" в начало тела функции, тогда strict mode будет применяться только для этой функции

Переменные

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

Прежде чем использовать переменную в JavaScript, ее необходимо объявить. Переменные объявляются с помощью ключевого слова var следующим образом:

Var i; var sum;

Один раз использовав ключевое слово var, можно объявить несколько переменных:

Объявление переменных можно совмещать с их инициализацией:

Var message = "привет"; var i = 0, j = 0, k = 0;

Если начальное значение в инструкции var не задано, то переменная объявляется, но ее начальное значение остается неопределенным (undefined), пока не будет изменено программой.

Если вы имеете опыт использования языков программирования со статическими типами данных, таких как C# или Java, то можете заметить, что в объявлениях переменных в языке JavaScript отсутствует объявление типа. Переменные в языке JavaScript могут хранить значения любых типов. Например, в JavaScript допускается присвоить некоторой переменной число, а затем этой же переменной присвоить строку:

Var i = 10; i = "hello";

С помощью инструкции var можно объявить одну и ту же переменную несколько раз. Если повторное объявление содержит инициализатор, то оно действует как обычная инструкция присваивания.

Если попытаться прочитать значение необъявленной переменной, JavaScript сгенерирует ошибку. В строгом режиме, предусмотренном стандартом ECMAScript 5, ошибка также возбуждается при попытке присвоить значение необъявленной переменной. Однако исторически и при выполнении не в строгом режиме, если присвоить значение переменной, не объявленной с помощью инструкции var, то JavaScript создаст эту переменную как свойство глобального объекта, и она будет действовать практически так же, как корректно объявленная переменная. Это означает, что глобальные переменные можно не объявлять. Однако это считается дурной привычкой и может явиться источником ошибок, поэтому всегда старайтесь объявлять свои переменные с помощью var.

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

Область видимости (scope) переменной - это та часть программы, для которой эта переменная определена. Глобальная переменная имеет глобальную область видимости - она определена для всей JavaScript-программы. В то же время переменные, объявленные внутри функции, определены только в ее теле. Они называются локальными и имеют локальную область видимости. Параметры функций также считаются локальными переменными, определенными только в теле этой функции.

Внутри тела функции локальная переменная имеет преимущество перед глобальной переменной с тем же именем. Если объявить локальную переменную или параметр функции с тем же именем, что у глобальной переменной, то фактически глобальная переменная будет скрыта:

Var result = "global"; function getResult() { var result = "local"; return result; }; console.log(getResult()); // Отобразит "local"

Объявляя переменные с глобальной областью видимости, инструкцию var можно опустить, но при объявлении локальных переменных всегда следует использовать инструкцию var.