Найти тему
JavaСкриптизёр

Вне зоны действия? Область видимости и Поднятие в JavaScript.

Область видимости( Scope ) и поднятие( hoisting )
Область видимости( Scope ) и поднятие( hoisting )

Привет!

В статье Javascript или разница между «var», «let» и «const» я уже затрагивал тему области видимости и поднятия в JavaScript и вот, спустя время, решил вынести эту информацию в отдельную статью, на случай если кого-то будет интересовать именно эта тема отдельно.

Что такое область видимости?

Область видимости(Scope) - это правила, определяющее следующие:

  • где переменная может быть помещена
  • как можно использовать переменную
  • к каким переменным у вас есть доступ

Есть два основных вида областей видимости для большинства языков программирования:

Глобальная область видимости (Global Scope) объявляется вне блока, в основном все, что находится за пределами фигурных скобок и функций.

Локальная область видимости (Local Scope) объявляется внутри блока, все, что находится внутри фигурных скобок и функций. Однако есть 2 вида локальной области видимости:

  • Область видимости функции (Function Scope) используется, когда вы объявляете переменные внутри функции, к ней можно получить доступ только внутри, а не снаружи. Он привязан к функциям, и все, что находится между фигурными скобками, является частью этой области видимости. Если вы хотите получить доступ к переменной внутри функции, вы можете сделать это только изнутри функции, а не снаружи.
  • Область видимости блока (Block Scope) используется, когда вы объявляете переменные внутри фигурных скобок {}, например, условные операторы и циклы.
Глобальная и локальные области видимости
Глобальная и локальные области видимости

Пример глобальной и локальной функциональной области видимости:

Пример локальной блочной области видимости с использованием var:

Возможно у вас назрел вопрос, а с какой собственно стати мы получили доступ к переменной, которая на минуточку находится в локальной блочной области видимости условного оператора if?

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

Именно поэтому рекомендуется использовать let, имеющим блочную область видимости.

Так же все переменные действуют по-разному для функциональной и блочной областей видимости. Вот три способа объявления переменной и правила, которые применяются к каждому из этих способов:

Объявление переменной - это записанное ключевое слово и имя переменной: let a.
Определение переменной - это присвоение переменной какого-либо значения: a = 10.

var = можно повторно объявить и переопределить

let = нельзя повторно объявить, но можно переопределить

const = нельзя повторно объявить и нельзя переопределить

Еще одна вещь, которую нужно знать, - это поднятие (hoisting).

Что такое поднятие (hoisting)?

Поднятие - это когда браузер поднимает все объявления, такие как: var, let и const. Перед тем, как что-либо показать браузер отыскивает все объявления и помещает их в верхнюю часть веб-сайта / верх файла. Следовательно, вы можете получить доступ к переменным в любой точке кода.

Попытка обратится к переменной b не вызывает ошибок или исключений, однако значение b при поднятии будет undefined. В то же время при поднятии переменной, объявленной с помощью let или const, будет выбрасываться ошибка ReferenceError: Cannot access 'activities' before initialization.

Собственно это всё, что я хотел рассказать вам по этой теме.

Спасибо за просмотр!

Если вам понравилась статья - можете оценить её, а также написать комментарий, если есть вопросы, я читаю и отвечаю на все.

Если хотите больше контента по JavaScript можете перейти и посмотреть другие статьи на канале. Не забудьте подписаться, чтобы не пропустить новых публикаций.