Переменные. Область видимости переменных функции в JavaScript - Глобальные и локальные переменные Как сделать локальную переменную глобальной javascript
Переменные
Объявление переменныхПрежде чем использовать переменную в 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.
В 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
Последнее обновление: 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 , существует две области видимости: локальная и глобальная. Зависит от того, где объявлена переменная, внутри функции или вне функции.
Если переменная объявлена внутри функции, то она называется локальной, если переменная объявлена вне функции, то она называется глобальной.
Современная концепция программирования, рекомендует чтобы все переменные в скриптах (программах) были локальными , а сама программа состояла лишь из функций, где каждая функция выполняла бы только одну задачу . Например в другом языке web-программирования PHP, вообще отказались от использования глобальных переменных.
Глобальные переменные в JavaScriptГлобальные переменные объявляются вне функций и к ним можно обратиться (получить доступ) из любой функции или строки программы.
Var russia; russia = "Россия"; function getValueRussia() { alert(russia); } getValueRussia();
Здесь russia — это глобальная переменная, так как она объявлена вне функции. Чтобы доказать что переменная глобальная, мы обратились к ней изнутри пользовательской функции getValueRussia() , с помощью функции alert() которая вывела на экран значение переменной russia .
Локальные переменные в JavaScriptЛокальные переменные в JavaScript, объявляются внутри функций. Получить доступ к локальным переменным можно только внутри той функции в которой они объявлены.
Function getValueRussia() { var russia; russia = "Россия"; } alert(russia);
В данном примере, ничего не произойдет (окошко с надписью «Россия» , не появится) , а если просмотреть скрипт через консоль, то он сообщит нам том что переменная russia — не определена (undefined), это означает что функция alert() (размещённая вне функции), не видит переменную russia , которую создали внутри функции.
Function getValueRussia() { var russia; russia = "Россия"; alert(russia); } getValueRussia();
Разместив функцию alert() внутри функции и затем вызвав функцию getValueRussia() , мы увидим окошко с надписью «Россия» . Данные примеры показывают нам, что к локальным переменным можно обращаться только внутри функции, в которой они созданы.
Глобальные переменные в 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), ошибка при обращении