В JavaScript (в других языках чаще всего не так) переменные, определенные снаружи функции, будут видны внутри этой функции. Такие переменные называются глобальными. Посмотрим на примере:
let num = 1; // переменная снаружи функции
function func() {
alert(num); // переменная num видна внутри функции
}
func(); // выведет 1
На самом деле переменная должна быть определена не перед определением функции, а перед ее вызовом:
function func() {
alert(num);
}
let num = 1; // переменная снаружи функции
func(); // выведет 1
Если менять значение переменной и после этого каждый раз вызывать функцию - алерт каждый раз будет выдавать разные результат:
function func() {
alert(num);
}
let num; // объявим переменную
num = 1; // задаем значение 1
func(); // выведет 1
num = 2; // задаем значение 2
func(); // выведет 2
Если у нас несколько функций, то глобальная переменная будет доступна в каждой из этих функций:
function func1() {
alert(num);
}
function func2() {
alert(num);
}
let num = 1;
func1(); // выведет 1
func2(); // выведет 1
Если в одной из функций произойдут изменения с глобальной переменной, то эта переменная поменяется во всех функциях, использующих эту переменную:
function func1() {
alert(num);
num++; //!! меняем глобальную переменную
}
function func2() {
alert(num);
}
let num = 1;
func1(); // выведет 1
func2(); //!! выведет 2
Так как любая из функций легко может поменять глобальную переменную, то их использование представляет собой рассадник трудноуловимых ошибок. По этой причине использование глобальных переменных в скрипте нужно сводить к минимуму. Желательно, чтобы их вообще не было или было самое минимальное количество.
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
alert(num);
}
func();
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
alert(num);
}
num = 2;
func();
Определите, не запуская код, что выведется на экран:
function func() {
alert(num);
}
let num;
num = 1;
func();
num = 2;
func();
Локальные переменные
Переменные, определенные внутри функции, называются локальными. В отличии от глобальных переменных, локальные переменные видны только внутри функции, и не видны снаружи:
function func() {
let num = 5; // локальная переменная
alert(num);
}
alert(num); // ничего не выведет, а выдаст ошибку в консоль
Определите, не запуская код, что выведется на экран:
function func() {
let num = 5;
return num;
}
alert(num);
Определите, не запуская код, что выведется на экран:
function func() {
let num = 5;
return num;
}
alert(func());
Одноименные локальные и глобальные переменные
Пусть и снаружи функции, и внутри есть переменная
num. В этом случае любые изменения
с локальной переменной num никак не
влияют на глобальную переменную num:
let num = 1; // глобальная переменная
function func() {
let num = 2; // локальная переменная
alert(num);
}
func(); // вызываем функцию, выведет 2
alert(num); // выведет 1 - глобальная переменная не поменялась
Но, если мы забудем объявить локальную переменную
num через let, то внутри функции
не создастся локальная переменная num,
а просто изменится глобальная переменная:
let num = 1;
function func() {
num = 2; // забыли написать let - меняем внешнюю переменную
alert(num);
}
func(); // вызываем функцию, выведет 2
alert(num); // выведет 2 - переменная поменялась
Тут может быть две ситуации: или мы действительно
хотели поменять глобальную переменную (тогда
все ок), или мы забыли let и случайно
поменяли глобальную переменную.
Второй случай является трудноуловимой ошибкой,
ведущей к непредсказуемому поведению скрипта.
Поэтому всегда, вводя новую переменную объявляйте
ее через let.
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
num = 2;
}
func();
alert(num);
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
let num = 2;
}
func();
alert(num);
Нюанс
Учтите, что глобальная переменная будет меняться только в момент вызова функции. Если вызова функции нет - переменная не изменится:
let num = 1;
function func() {
num = 2; // не написан let - меняем внешнюю переменную
alert(num);
}
// func(); - закомментировали вызов функции
alert(num); // выведет 1 - переменная не поменялась
А сейчас продемонстрируем кодом то, что глобальная переменная поменяется только после вызова функции:
let num = 1;
function func() {
num = 2;
}
alert(num); // выведет 1
func(); // меняем переменную
alert(num); // выведет 2
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
num = 2;
}
func();
alert(num);
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
num = 2;
}
alert(num);
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
let num = 2;
}
func();
alert(num);
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
let num = 2;
}
alert(num);
func();
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
num = 2;
}
alert(num);
func();
Определите, не запуская код, что выведется на экран:
let num = 1;
function func() {
num++;
}
func();
func();
func();
alert(num);
Определите, не запуская код, что выведется на экран:
function func() {
num = 2;
}
let num = 1;
alert(num);
func();
Определите, не запуская код, что выведется на экран:
function func() {
num = 2;
}
let num = 1;
func();
alert(num);