Про контекст в JavaScript

Про контекст в JavaScript

Контекст в JavaScript достаточно часто является сложной темой для понимания, особенно у начинающих разработчиков. Собственно, в этой статье я немного пройдусь по основам использования контекста, чтобы и начинающие программисты могли узнать что-то новое, и я себе лишний раз упорядочил знания.

В целом, контекст — это набор правил, которые описывают как получать значение для переменной. Или же можно еще по другому дать определение контексту — набор переменных, которые видны некоторой части программы.

В javascript используется лексический контекст (lexical scope) — т.е. значение переменной определяется тем, где была написана переменная. Есть еще второй вид контектса — динамический — когда значение переменной определяется в месте вызова.

Разные виды контекста в JS

В js можно разделить контекст по следующим категориям — глобальный контекст (window в браузере), контекст функции (все, что внутри function) и контекст блока ({}).

По сути, все что было определено вне функции или let/const вне {} — будет являться переменной из глобального контекста.

Для контекста блока можно использовать только const и let, а var — всегда имеет контекст функции (если не является глобальной переменной).

Особенности, связанные с контекстом в JavaScript

Переменная, объявленная как var будет доступна в пределах всей функции. Т.е. даже если вы объявите переменную var в конце функции, то ее объявление всплывает на самый верх (hoisting, всплытие переменной). В свою очередь, let & const не всплывают и не будут доступны до момента их объявления.

Следующей особенностью является то, что при поиске значения перменной js будет проходиться по всем доступным контекстам (начиная с текущего). Таким образом мы можем получить ситуацию, когда переменные из какого-либо вложенного контекста будут перекрывать\переопределять значения для глобального контекста. Это может быть особенно неожиданным при работе с var. Например:

var name = 'Roger'

function run() {
  console.log(`${name}`) // undefined
  var name = 'Flavio'
}

run()

Т.е. здесь мы получаем undefined, т.к. переменная name из функции run «всплыла» и у нее было значение undefined. Соответственно это значение перекрыло переменную из внешней области видимости и вывелся тот результат, который мы бы не хотели. Поэтому, лучше всего объявлять все переменные var в самом начале файла, чтобы случайно не пропустить ошибку.

Кстати, а то, что мы можем получать доступ из внутренней области видимости к внешней, называется замыканием (closure).


Помимо текущей статьи по программированию, на этом блоге вы можете найти такие статьи как — использование «гибких» (responsive) картинок в html, будущее lazy-loading изображений, детальное описание hooks в react.js и многое другое.

Ну а сам блог изначально создавался как travel-блог. Так что здесь есть еще и статьи\обзоры\отзывы после разных путешествий, например — мой отзыв по посещению Шри-Ланки, достопримечательности Лиссабона, пляж Сэнди Бэй (мой любий пляж в Айя-Напе) и много других полезных отзывов.