тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Область видимости переменных в функциях JavaScript

Давайте рассмотрим область видимости переменных при работе с функциями.

Пусть у нас есть вот такая функция func:

function func() { }

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

let num = 1; // переменная снаружи функции function func() { }

В 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);