Js сделать переменную глобальной. Javascript глобальные и локальные переменные – познай азы языка веб-программирования. Минимизация использования глобальных переменных

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

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

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

Var num = 5; function foo() { console.log(num); } foo(); // 5 console.log(num); // 5 { console.log(num); // 5 }

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

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

Function foo() { var num = 5; console.log(num); } foo(); // 5 console.log(typeof num); // undefined

Локальная переменная имеет преимущество перед глобальной переменной с тем же именем, это означает, что внутри функции будет использоваться локальная переменная, а не глобальная:

Var x = "глобальная"; // Глобальная переменная function checkscope() { var x = "локальная"; // Локальная переменная с тем же именем, что и у глобальной document.write(x); // Используется локальная переменная, а не глобальная } checkscope(); // => "локальная" Попробовать »

Блочные переменные

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

Let num = 0; { let num = 5; console.log(num); // 5 { let num = 10; console.log(num); // 10 } console.log(num); // 5 } console.log(num); // 0

Повторное объявление

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

Var a = 10; var a; console.log(a); // 10

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

Var a = 10; var a = 5; // Тоже самое, что и a = 5; console.log(a); // 5

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

Var a = 10; let a; // Ошибка.

Цепочка областей видимости

Рассмотрим следующий пример:

Var num = 5; function foo() { var num2 = 10; function bar() { var num3 = 15; } }

В этом коде три области видимости: глобальная, область видимости функции foo() и область видимости функции bar() . В глобальной области видимости определены переменная num и функция foo() . В области видимости функции foo() определены переменная num2 и функция bar() , в ней также доступна переменная num из глобальной области видимости. Область видимости функции bar() содержит одну переменную num3 , которая доступна только внутри функции bar() . В области видимости функции bar() также доступны переменные из двух других областей, потому что они являются родительскими по отношению к ней. Цепочка областей видимости для этого примера представлена на рисунке ниже:

На рисунке разные области видимости показаны прямоугольниками разного цвета. Внутренней области видимости в цепочке областей видимости доступно всё из внешних областей, но внешним областям не доступно ничего из внутренних областей видимости.

Цепочка областей видимости упорядочена. Интерпретатор производит поиск идентификаторов в цепочке областей видимости по направлению наружу, но не внутрь. Это означает, что поиск имени начинается с той области видимости, где было выполнено обращение к идентификатору. Если имя идентификатора обнаруживается, поиск прекращается. Если в текущей области видимости найти имя не удалось, выполняется поиск в следующей (во внешней) области видимости и т. д. Таким образом, будет использован идентификатор из той области видимости, в которой был найден. Если идентификатор не будет найден ни в одной из областей видимости JavaScript сгенерирует ошибку:

Var str = "глобальная"; var num = 5; function foo() { var str = "локальная"; // Используется локальная переменная str num = 10; // Используется глобальная переменная num // alert(x); // Ошибка. Переменной x нет ни в одной области видимости } foo(); alert(str); // "глобальная" alert(num); // 10

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

Function foo() { num = 2; } foo(); // Создана новая глобальная переменная num alert(num); // 2

Подъём объявлений

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

Рассмотрим следующий фрагмент кода:

Var str = "глобальная"; function foo() { alert(str); // undefined var str = "локальная"; alert(str); // "локальная" } foo();

Посмотрев на код, можно было бы подумать, что первый alert должен вывести строку "глобальная", потому что объявление локальной переменной str ещё не было выполнено. Однако, на деле выводится значение undefined . Благодаря подъёму объявлений функция выше эквивалентна реализации, приведённой ниже, в которой объявление переменной поднято в начало функции:

Function foo() { var str; // Объявление локальной переменной в начале функции alert(str); // Здесь она доступна, но не инициализирована str = "локальная"; // Здесь она инициализируется alert(str); // А здесь она имеет ожидаемое значение - "локальная" }

Тоже самое касается и глобальной области видимости, переменная объявленная снизу, доступна наверху:

Alert(num); // undefined var num = 10; alert(num); // 10

hello = Hello ; //задаем глобальную переменную и проверяем ее
document . writeln (->1 + hello + every one
); //->1 Hello every one

if(true )
//if(false)
{
var hello = Hello Dolly and ; //это тоже глобальная
world = world ; //глобальная
var cont = , we continue //глобальная
document . writeln (->1.2 + hello + world + cont +
);
//1.2 Hello Dolly and world, we continue
}
document . writeln (->2 + hello + world + cont +
);
//->2 Hello Dolly and world, we continue

->1 Hello every one
->1.2 Hello Dolly and world, we continue
->2 Hello Dolly and world, we continue

Таким образом, получается, что на глобальную область использование var никак не влияет. Переменная, упомянутая в script вне процедур считается глобальной даже, если она заключения в скобочки {} блока if while for и других области останется глобальной даже внутри циклов

Выводы, кратко

• для переменных используемых в зоне глобальной видимости не важно наличие var.
• Блоки после if while for не создают локальной зоны видимости, (как это происходит в других языках)

boy = Jhone ;
did = kills Kenny ; //итак мы имеем 2 глобальных переменных
function doit ()
{
//уже прошла печать --1, и мы меняем данные меняем данные
var boy = Gary ; //создаем локаль
did = helps Anny ; //изменяем глобаль
;
document . writeln (--2 + boy + + did +
);
//--2 Gary helps Anny
;
//теперь внутри функции зададим локальную и глобальные переменные
var good = he was a good boy
; //локаль!
bad = he likes a bad girls
; //глобаль
}
;
document . writeln (--1 + boy + + did +
);
//--1 Jhone kills Kenny
doit ();
//--2 Gary helps Anny
document . writeln (--3 + boy + + did +
);
//--3 Jhone helps Anny
;
if(! true )
//if(!false)
{
document . writeln (--4 + good );
//выполнение этого блока вызовет ошибку.
//мы сейчас находимся вне локальной области видимости
//функции doit(), поэтому для нас заданной через var
//переменной good просто не существует
}
document . writeln (--5 + bad );
//--5 he likes a bad girls

1 Jhone kills Kenny
--2 Gary helps Anny
--3 Jhone helps Anny
--5 he likes a bad girls

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

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

• Яваскрип сильно отличается от си уже тем что только(?) внутри функции возможны локальные переменные.
• использование var или не использование в глобальной области видимости зависит только от вашего личного опыта. Но по мне так лучше не ленится. в перле это называется use strict

Важно. Во-первых, “вары” нельзя удалить (с помощью delete). Во-вторых, их конкретизация происходит на “нулевой строке” (до начала работы “построчно”), где им сразу же присваивается значение undefined, и только потом переменная может получить (а может не получить) новое значение:

var glb_1 = 1;
if (false) {var glb_2 = 2; glb_3 = 3;}

alert(glb_1) // конкретизирована и получила значение 1
alert(glb_2) // конкретизировна и получила значение ‘undefined’
alert(glb_3) // вообще не переменная (нет var), ошибка при обращении

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

Что есть глобальные переменные: переменные "видимые" в любой точке выполнения программы, везде из можно прочитать и перезаписать.
Обычно глобальные переменные определяются в самом начале программы, вне всяких блоков ({})
в случае Js, они задаются после script, или все всяких функций

hello = "Hello"; //задаем глобальную переменную и проверяем ее
document.writeln("->1 "+ hello +" every one
");//->1 Hello every one

If(true)
//if(false)
{
var hello = "Hello Dolly and "; //это тоже глобальная
world = "world"; //глобальная
var cont = ", we continue" //глобальная
document.writeln("->1.2 " + hello + world + cont+"
");
//1.
}
document.writeln("->2 " + hello + world + cont+"
");
//->2 Hello Dolly and world, we continue

При условии true мы получаем ответ

->1 Hello every one
->1.2 Hello Dolly and world, we continue
->2 Hello Dolly and world, we continue

Выполнение обрывается

Таким образом, получается, что на глобальную область использование var никак не влияет. Переменная, упомянутая в script вне процедур считается глобальной даже, если она заключения в скобочки {} блока if while for и других области останется глобальной даже внутри циклов

Выводы, кратко

* для переменных используемых в зоне глобальной видимости не важно наличие var.
* Блоки после if while for не создают локальной зоны видимости, (как это происходит в других языках)

Локальные переменные- переменные задаваемые внутри исполняемого блока (функции) и не виляют на другие функции. и внешнюю среду, т.е. глобальную область.

Boy = "Jhone";
did = "kills Kenny"; //итак мы имеем 2 глобальных переменных
function doit()
{
//уже прошла печать --1, и мы меняем данные меняем данные
var boy = "Gary"; //создаем локаль
did = "helps Anny"; //изменяем глобаль
;
document.writeln("--2 " + boy + " " + did + "
");
//--2 Gary helps Anny
;
//теперь внутри функции зададим локальную и глобальные переменные
var good = "he was a good boy
";//локаль!
bad = "he likes a bad girls
";//глобаль
}
;
document.writeln("--1 " + boy + " " + did + "
");
//--1 Jhone kills Kenny
doit();
//--2 Gary helps Anny
document.writeln("--3 " + boy + " " + did + "
");
//--3 Jhone helps Anny
;
if(!true)
//if(!false)
{
document.writeln("--4 " + good);
//выполнение этого блока вызовет ошибку.
//мы сейчас находимся вне локальной области видимости
//функции doit(), поэтому для нас заданной через var
//переменной good просто не существует
}
document.writeln("--5 " + bad);
//--5 he likes a bad girls

Результат:

1 Jhone kills Kenny
--2 Gary helps Anny
--3 Jhone helps Anny
--5 he likes a bad girls

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

* var работает внутри функции, объявляя локальную переменную. Это основная его задача

* Яваскрип сильно отличается от си уже тем что только(?) внутри функции возможны локальные переменные.
* использование var или не использование в глобальной области видимости зависит только от вашего личного опыта. Но по мне так лучше не ленится. в перле это называется use strict

>>>для переменных используемых в зоне глобальной видимости не важно наличие var

Важно. Во-первых, “вары” нельзя удалить (с помощью delete). Во-вторых, их конкретизация происходит на “нулевой строке” (до начала работы “построчно”), где им сразу же присваивается значение undefined, и только потом переменная может получить (а может не получить) новое значение:

Var glb_1 = 1;
if (false) {var glb_2 = 2; glb_3 = 3;}

Alert(glb_1) // конкретизирована и получила значение 1
alert(glb_2) // конкретизировна и получила значение ‘undefined’
alert(glb_3) // вообще не переменная (нет var), ошибка при обращении

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

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

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

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

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

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

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

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

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

Чтобы создать переменную нужно вначале написать ключевое слово var , а после само имя. Вот так это выглядит:

var text = “Hello, user!”

После этого обращение к text происходит без «var»:

text = “New text.”

В этом случае значение перезапишется.

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

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

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

Подводные камни и область видимости

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

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. Тогда все объекты будут объявляться явно и создаваться новые.

Вот исправленный пример:

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”

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

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

В данном уроке из четырех частей затрагиваются вопросы написания качественного кода 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();

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