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

Если функция содержит внутри другую функцию - переменные внешней функции видны во внутренней:

function test() { let num = 1; // переменная внешней функции function func() { alert(num); // выведет 1 } func(); // вызываем внутреннюю функцию } test(); // вызываем внешнюю функцию

Также во внутренней функции будут видны переменные, определенные снаружи внешней функции:

let num = 1; // глобальная переменная function test() { function func() { alert(num); // выведет 1 } func(); // вызываем внутреннюю функцию }; test(); // вызываем внешнюю функцию

Определите, не запуская код, что выведется на экран:

function test() { let num = 1; function func() { alert(num); } func(); } test();

Определите, не запуская код, что выведется на экран:

function test() { let num = 1; function func() { alert(num); } } test();

Определите, не запуская код, что выведется на экран:

function test() { let num = 1; function func() { alert(num); } func(); }

Определите, не запуская код, что выведется на экран:

function test() { let num; function func() { alert(num); } num = 1 func(); num = 2 func(); } test();

Параметры

Параметры внешней функции также будут доступны во внутренней:

function test(num) { function func() { alert(num); // выведет 1 } func(); // вызываем внутреннюю функцию }; test(1); // передаем параметром число

Определите, не запуская код, что выведется на экран:

function test(num1, num2) { function func() { alert(num1 + num2); } func(); } test(1, 2);

Определите, не запуская код, что выведется на экран:

function test(num1, num2) { function func() { alert(num1 + num2); } num1 = 2; func(); } test(1, 2);

Параметры

Давайте сделаем так, чтобы и внешняя функция и внутренняя принимали параметры:

function test(num) { function func(localNum) { alert(localNum); } }

Передадим параметр внешней функции в вызов внутренней функции:

function test(num) { function func(localNum) { alert(localNum); // выведет 1 } func(num); //!! передаем параметр } test(1); // передаем параметром число

Получается, что во внутренней функции будет доступна переменная num как внешняя переменная из родительской функции и переменная localNum, являющаяся локальной переменной внутренней функции.

Обе эти переменные будут иметь одинаковые значения:

function test(num) { function func(localNum) { alert(num); // выведет 1 alert(localNum); // выведет 1 } func(num); } test(1);

Разница между ними будет в следующем: если во внутренней функции изменить переменную num - она поменяется и во внешней функции:

function test(num) { function func(localNum) { num = 2; //!! меняем переменную num } func(num); // передаем параметр alert(num); // выведет 2 } test(1); // передаем параметром число

А переменная localNum будет локальной. Ее изменения не будут приводить ни к каким изменениям во внешней функции. Да и сама переменная localNum не будет видна снаружи внутренней функции:

function test(num) { function func(localNum) { localNum = 2; //!! меняем переменную num } func(num); // передаем параметр } test(1); // передаем параметром число

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { alert(localNum); } func(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { alert(localNum); } func(num + 1); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { alert(num); } func(num + 1); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { localNum = 2; } func(num); alert(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { localNum = 2; } func(num); alert(localNum); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(localNum) { num = 2; } func(num); alert(num); } test(1);

Одноименные параметры

Пусть теперь внешняя и внутренняя функция имеют одноименные параметры:

function test(num) { function func(num) { alert(num); // выведет 1 } func(num); }; test(1);

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

function test(num) { function func(num) { num = 2; // меняем локальную переменную num } func(num); alert(num); // выведет 1 - ничего не поменялось } test(1);

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

function test(num) { function func(num) { // тут нельзя получить доступ в внешней переменной num } func(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(num) { alert(num); } func(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(num) { num = 2; } func(num); alert(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(num) { alert(num); } num = 2; func(num); } test(1);

Определите, не запуская код, что выведется на экран:

function test(num) { function func(num) { alert(num); } func(num); num = 2; } test(1);