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

Давайте рассмотрим различные сценарии переменных.

Необъявленная переменная

console.log(x);
// ReferenceError: x is not defined

Это прервет выполнение скрипта, и все строки, следующие за ним, не будут выполнены.

Объявлена ​​переменная, но без значения

let y;
console.log(y);   // undefined

Итак, здесь просто печатается значение переменной, которое равно undefined, значению по умолчанию, которое назначается в JavaScript. Это не ошибка или что-то в этом роде. Просто в этом нет никакой ценности. Выполнение скрипта не прерывается.

Область действия переменной

function test() {
  var x = 10;
  console.log(x);    // 10
}

console.log(x);   // ReferenceError: x is not defined

Область x здесь находится в функции. Как только вы выходите из него, x больше нет. Это вызовет ошибку. Это также работает для ключевых слов let и const, но наряду с этим условием их область действия ограничена блоком, который вы можете увидеть ниже.

if (true) {
  let x = 10;
}

console.log(x);   // ReferenceError: x is not defined

Как видите, жизнь x ограничена только блоком if. Вне его нет x. Таким образом, вы не можете пойти и попробовать напечатать его значение. Это вызовет ошибку, и если для них нет ловушки, выполнение скрипта остановится. Это относится и к ключевому слову const. При этом переменная, объявленная с использованием const, не может изменить свое значение.

const x = 10;
x = 20;   // TypeError: Assignment to constant variable

Однако здесь есть одна загвоздка, когда дело доходит до объектов. Для примитивных значений, таких как строки и числа, x относится непосредственно к числу. Таким образом, вы не можете изменить значение. Это напрямую влияет на переменную, тогда как для объектов переменной присваивается ссылка на память. Вы не можете изменить ссылку, но вы можете изменить содержимое объекта, как показано ниже.

const z = {
  name: "bigtimecoding"
};
z.name = "rocks";

console.log(z.name);    // "rocks"

Это называется объект мутация. Ссылка на объект остается прежней, но содержимое изменяется. Это обычно не предлагается, например, в мире ReactJs, где нам нужно явно знать, изменился ли объект. Эти изменения отслеживаются через ссылки на память объекта, а не через его содержимое, поскольку содержимое может быть очень глубоко вложенным.

Спасибо, что дочитали до конца. Пожалуйста, дайте мне знать ваши мысли и предложения. Я скоро опубликую другие концепции. Поддерживать связь. Хорошего дня!