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

Вообще создавать сложные области видимости (scope) - это плохая практика, в идеале нужно пользоваться в основном только local scope и не создавать непредсказуемых мутаций на глобальном уровне.

Типы областей видимости

• Global scope - объявление на самом верху
• Block scope - внутри блока { ... } - на var не распространяется (лучше избегать var)
• Function scope - внутри функций (scope chain)

Global scope

Будут доступны отовсюду снизу, если нет “Затенение” (shadowing) — когда имена объявленных переменных внутри блоков или функций совпадают

var a = 1;
const b = 2;

const showGlobalVars = () => {
  console.log(a, b);
};

showGlobalVars(); // 1 2

---

Block scope

if (true) {
  var a = 10;
  let b = 20;
}
console.log(a); // 10
// console.log(b); // ReferenceError

---

Function scope

Объявление переменной внутри, Shadowing (затенение имени)

let a = 0;

// функция будет изменять внутреннюю переменную
const someFunc = () => {
  // console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = -1;
  a = 5;

  return a;
};

someFunc(); // 5
a; // 0

---

Объявление переменной снаружи

let a = 0;

// функция будет изменять внешнюю переменную
const someFunc = () => {
  console.log(a); // 0
  a = 5;

  return a;
};

someFunc(); // 5
a; // 5

---

Переменная как параметр

В таком случае переменная а не изменится, так при передаче её в качестве параметра, мы просто присваиваем значение этому параметру, а сам параметр будет являться локально переменной у функциию

let a = 1;

console.log(a); // 1
const plus = (a: number) => a += 1;

plus(a); // 2 - просто вернули значение параметра
console.log(a); // 1 - переменная а не изменилась

---

Плохая практика

Длинная цепочка вызовов функции

Каждая вложенная функция создаёт свой локальный scope, и если их становиться много, то их уже сложно отслеживать.

let a = 0;

function func1() {
  a = 1;
  return function func2() {
    a = 2;
    return function func3() {
      // let a = 1; // если создать одноимённую лок. переменную,
      // то она изменит поведение
      a = 3;
      console.log(a);
    };
  };
}

// тройной вызов
func1()()();

a; // 3

---

Создание глобальной переменной

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

function f() {
  x = 5; // (обычно) создаст глобальную переменную
}

f();

console.log(x); // 5