​Что такое область видимости переменных

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

Чтож, область видимости переменных в вашей программе - это та область, откуда переменная доступна. И тут нужно понимать, что видимость переменных распространяется исключительно наследовательным путем (в виде дерева, графа). Это значит, что переменные из области родителя доступны в детях, но не наоборот. Что за дети и родители?
Рассмотрим пример:

const fib = [ 1, 1, 2, 3 ]

const sayHello = (name) => {
  const surname = "Putnov"
  console.log(`Hello, ${name} ${surname}`)
}

{
  const channel = {
    name: "progway",
    theme: "blog"
  }
}

fib // [ 1, 1, 2, 3 ]
surname // Error: is not defined
channel // Error: is not defined

В данном случае мы видим, как области видимости создаются внутри файла.
Области видимости тут:
— весь файл
— функция sayHello
— область внутри { } с объявлением объекта channel

Если совсем упростить, то можно сказать, что область видимости в JavaScript создаётся внутри { фигурных скобок }. Если понять этот концепт тут, то в нормальных языках всё будет ещё проще.

Внизу мы пытаемся обратиться к переменным. Массив чисел Фибоначчи доступен, а вот переменные surname и channel недоступны. Это из-за того, что объявлены они в дочерних областях видимости. В обратную сторону доступ сработает, например: 

const identificators = [11, 24, 93, 8]

function foo() {
  console.log(identificators[0]) // 11 
}

foo()

Ошибки не будет, так как вызов переменной идет из области видимости родителя.

Но, JavaScript имеет разные спецификации синтаксиса и в примерах выше я использовал ES6 синтаксис. При объявлении переменной через let и const переменная не покидает пределы своей области видимости.
А теперь попробуем использовать var:

{
  var name = "progway"
  const age = "less than 1 year"
}

name // "progway"
age // Error: is not defined

Вот так вот неожиданно переменная, объявленная через ключевое слово var появляется в глобальной области видимости, чего, например, с const не происходит.

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

Спасибо за прочтение, это правда важно для меня.

#javascript #theory