Часто кажется, что разработчик путает концепцию области действия,

Здесь у нас есть то, что не будет забыто или перепутано.

Для каждой задачи в реальном мире есть ограничение, в рамках которого ее можно выполнить, это же относится и к javascript.

Эти ограничения известны как области действия, javascript имеет дело со следующими областями:

  1. Глобальный охват.
  2. Локальная область или область действия.
  3. Область действия блока.

Давайте начнем с каждого из них,

  1. Глобальный охват:

Когда переменная используется без ключевого слова var, let или const, она попадает в глобальную область видимости, что означает, что эту переменную можно использовать в любом месте вашего приложения.

Пример:

imGlobal = 123;

const getGlobalVariable = () => imGlobal

console.log(getGlobalVariable());

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

Пример:

const setGlobalVaraible = () => {
   imGlobal = 321;
}
console.log(imGlobal);

Выполнив приведенный выше код, вы увидите, что переменная imGlobal была обновлена.

2. Местный охват:

Чтобы решить глобальную переменную, мы используем область, называемую локальной/функциональной областью.

Пример:

var scopeVar = 321
const getLocalVariable = () => {
  var scopeVar = 123;
  return scopeVar;
}
console.log(getLocalVariable()); // This will return local value. 123
console.log(scopeVar); // This will point to global value. 321

Выполнение приведенного выше кода даст вам значение области действия функции, когда мы выполним getLocalVariable(), и аналогично после первого журнала консоли мы получим scopeVar как 321, это означает, что локальное значение не изменилось.

3. Область блокировки:

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

{

// Область блока

}

const blockScopeExample = () => {
  let imBlock = 123;
  {
    let imBlock = 321;
    console.log(imBlock); // 321
  }
  console.log(imBlock); //123
}

Посмотрите на приведенный выше пример, где у нас есть переменная imBlock в начале функции, а внутри блока мы можем определить переменную области блока со значением 321, переменная области действия блока ограничена только ключевыми словами let и const.

Если бы мы использовали var вместо let в приведенном выше примере, мы бы получили 321 в обоих журналах консоли. (функциональный объем).

Вот и все, это некоторые основные концепции области видимости в javascript. Спасибо. :)