Область видимости let и var в if-else

Пусть для простоты у нас есть всегда выполняющееся условие:

if (true) { }

Давайте рассмотрим следующий код:

if (true) { let result = '!'; } console.log(result);

Как вы видите, в переменную result должно записаться значение '!'. Однако, если запустить этот код, то в консоль выведется ошибка!

Дело в том, что переменные, объявленные внутри фигурных скобок, видны только внутри этих скобок, и не видны снаружи.

По-научному здесь идет речь об области видимости переменных.

Можно говорить о том, что областью видимости переменных, объявленных внутри фигурных скобок, являются только эти фигурные скобки.

Однако, если переменная объявлена снаружи фигурных скобок, то видна и внутри них, и снаружи:

let result; // переменная объявлена снаружи if (true) { result = '!'; } console.log(result); // выведет '!'

Пример

В следующем примере в переменную result в зависимости от условия записывается либо значение 1, либо значение 2:

let num = 5; if (num >= 0) { let result = 1; } else { let result = 2; } console.log(result);

Однако, если запустить этот код, то в консоль выведется ошибка. Как вы теперь уже понимаете, все дело в видимости переменных.

Для решения проблемы объявим переменную снаружи условия:

let test = true; let result; // объявим переменную снаружи условия if (test) { result = 1; } else { result = 2; } console.log(result); // выведет 1

Автор приведенного ниже кода хотел выполнить проверку возраста на достижение 18 лет.

Код, однако, не работает. Исправьте ошибку автора кода.

Вот проблемный код:

let age = 17; if (age >= 18) { let adult = true; } else { let adult = false; } console.log(adult);

Нюансы

Область видимости переменных обладает некоторым нюансом.

Давайте рассмотрим его на примере.

Давайте объявим снаружи нашего условия переменную result с одним значением, а внутри условия поменяем это значение на другое:

let result = 1; if (true) { result = 2; } console.log(result); // выведет 2

Как вы видите, переменная result поменялась внутри условия.

Все, однако, поменяется, если внутри условия также объявить переменную result через let:

let result = 1; if (true) { let result = 2; // объявим переменную через let } console.log(result); // выведет 1, а не 2!

Здесь все дело в том, что объявление переменой через let внутри условия создало локальную переменную result.

То есть внутри условия существует одна переменная result, а снаружи условия - другая.

Убедится в этом можно, выведя значение переменной в консоль внутри условия:

let result = 1; if (true) { let result = 2; console.log(result); // выведет 2 } console.log(result); // выведет 1

Автор приведенного ниже кода хотел выполнить проверку возраста на достижение 18 лет.

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

Вот проблемный код:

let age = 17; let adult; if (age >= 18) { let adult = true; } else { let adult = false; } console.log(adult);

Автор приведенного ниже кода хотел выполнить проверку возраста на достижение 18 лет.

После проверки кода оказалось, что если возраст равен или больше 18 лет, то в переменную adult записывается true, как и должно быть, однако, если возраст меньше 18, то переменная adult имеет значение undefined.

Исправьте ошибку автора кода.

Вот проблемный код:

let age = 17; let adult; if (age >= 18) { adult = true; } else { let adult = false; } console.log(adult);

Автор приведенного ниже кода хотел выполнить проверку возраста.

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

Вот проблемный код:

let age = 17; let result; if (age >= 18) { if (age <= 23) { let result = 'от 18 до 23'; } else { let result = 'больше 23'; } } else { let result = 'меньше 18'; } console.log(result);

Автор приведенного ниже кода хотел выполнить проверку возраста.

Код, однако, при значение возраста большим 18 лет выводит в консоль значение undefined. Исправьте ошибку автора кода.

Вот проблемный код:

let age = 19; let result; if (age >= 18) { let result; if (age <= 23) { result = 'от 18 до 23'; } else { result = 'больше 23'; } } else { result = 'меньше 18'; } console.log(result);

Область видимости var

В самом начале учебника я рассказывал вам, что переменные можно объявлять либо через let, либо через var.

Эти два способа объявления переменных создают для них разные области видимости.

Посмотрим на примерах.

В следующем примере переменная объявлена через let внутри условия и поэтому не видна снаружи условия:

if (true) { let result = '!'; } console.log(result); // выдаст ошибку

А вот если объявить переменную через var - то переменная будет видна снаружи условия:

if (true) { var result = '!'; } console.log(result); // выведет '!'

Определите, что выведет приведенный код:

let num = 1; if (num == 1) { var result = 'верно'; } else { var result = 'неверно'; } console.log(result);

Определите, что выведет приведенный код:

let num = 1; if (num == 1) { let result = 'верно'; } else { let result = 'неверно'; } console.log(result);

Замечания по поводу let и var

Как я упоминал ранее, объявление переменных через let появилось в JavaScript позже, чем объявление переменных через var.

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