В Javascript можно определять переменные, используя ключевые слова var, let или const.

var a=10;
let b=20;
const PI=3.14;

var: область действия переменной определенной с помощью ключевого слова «var», ограничена «функцией», в которой она определена. Если он определен вне какой-либо функции, область действия переменной является глобальной.
var — это «function scoped».

let: область действия переменной, определенной с помощью ключевого слова «let» или «const», ограничена «блоком», определенным фигурными скобками, т.е. {}.
«Let» и «const» являются «block scoped».

const: область действия переменной, определенной с помощью ключевого слова «const», ограничена блоком, определенным фигурными скобками. Однако, если переменная определена с ключевым словом const, она не может быть переназначена.
«Const» не может быть переназначен на новое значение. Однако это МОЖЕТ быть видоизменено.

Function scoped vs. Block scoped

Давайте поймем это на некоторых примерах кода

Block Scope

В Javascript вы можете определить блок кода с помощью фигурных скобок, т.е. {}.
Рассмотрим следующий код, который имеет 2 кодовых блока, каждый из которых разделен с {}.

{
  var a=10;
  console.log(a);
} //block 1
{
  a++;
  console.log(a);
} //block 2
/* 
Поскольку мы используем «var a=10», 
область действия «a» ограничена функцией, в которой он определен. 
В этом случае это находится в глобальной области действия функции 
*/

В приведенном выше примере, поскольку мы используем ключевое слово var для определения переменной a, область действия a ограничена функцией, в которой она определена. Поскольку a не определено в какой-либо функции, область действия переменной a является глобальной, что означает, что a распознается в блоке 2.

В действительности, если переменная определена с ключевым словом var, Javascript не распознает {} в качестве разделителя области действия. Вместо этого переменная должна быть заключена в «функцию», чтобы ограничить область ее действия этой функцией.

Давайте перепишем код выше, используя ключевое слово let.
Ключевое слово let было введено как часть синтаксиса ES6 как альтернатива var для определения переменных в Javascript.

{
 let a=10;
 console.log(a);
} //block 1
{
  a++;
  console.log(a);
} //block 2
/* Поскольку мы используем «let a=10», область действия «a» ограничена блоком 1, а «a» не распознается в блоке 2 2 */

Обратите внимание, что теперь, когда вы запустите приведенный выше код, вы получите ошибку, переменная a не распознана в block2. Это потому, что мы определили переменную a с помощью ключевого слова let, которое ограничивает область действия переменной a блоком кода, в котором она была определена.

Function Scope

В Javascript вы ограничиваете область действия переменной, определяя ее внутри функции. Это известно как область действия функции (function scoped).

Ключевое слово var — это область действия функции, т.е. Оно не распознает фигурные скобки, т.е. {}, Как разделители. Вместо этого он распознает тело функции как разделитель.

Если мы хотим определить переменную с помощью var и предотвратить ее определение в глобальном пространстве имен, вы можете переписать ее, добавляя блоки кода в функции.

function block1() {
var a=10;
 console.log(a);
} //function scope of block 1
function block2() {
  a++;
  console.log(a);
} //function scope of block 2
/* Поскольку мы добавили block1 и block2 в отдельные функции, область действия «var a = 10» ограничена блоком 1, а «a» не распознается в блоке 2 */

Приведенный выше код в действительности такой же, как если бы мы использовали let a = 10 вместо var a = 10. Область действия переменной a ограничена функцией, в которой она определена, и a больше не находится в глобальном пространстве имен.

Почему мы должны выбрать «let» вместо «var»

При программировании на Javascript рекомендуется не определять переменные как глобальные переменные. Это потому, что можно случайно изменить глобальную переменную из любого места в коде Javascript. Чтобы предотвратить это, необходимо убедиться, что область действия переменных ограничена блоком кода, в котором они должны быть выполнены.

В прошлом, прежде чем ключевое слово let было введено как часть ES6, чтобы обойти проблему переменной области видимости с помощью var, программисты использовали шаблон IIFE для предотвращения загрязнения глобального пространства имен. Однако после введения let шаблон IIFE больше не требуется, и область действия переменной, определенной с помощью let, ограничена блоком кода, в котором он определен.

The “const” keyword

Если переменная определяется с помощью ключевого слова const, ее область действия ограничена областью действия блока. Кроме того, переменная не может быть переназначена на другое значение.

{
 const PI=3.14;
 console.log(PI);
} //block 1
{
  console.log(PI);
} //block 2
/* Поскольку мы используем «const PI = 3.14», область действия «PI» ограничена блоком 1, а «PI» не распознается в блоке 2 */

Обратите внимание, что важно понимать, что const НЕ означает, что значение является фиксированным и неизменным. Это распространенное заблуждение среди многих разработчиков Javascript, и они неправильно упомянули, что значение, определенное ключевым словом const, является неизменным (то есть оно не может быть изменено).
В следующем примере мы можем показать, что значение переменной, определенной в ключевом слове const, является изменчивым, то есть может быть изменено.

{
 const a = [1,2,3];
 const b = {name: "hello"};
 a.push(4,5);     //мутирует значение константы "а"
 b.name="World";  //мутирует значение константы "b"

 console.log(a); //покажет [1,2,3,4,5]
 console.log(b); //покажет {name: "World"}
 
}
/* Этот код будет работать без каких-либо ошибок, и показывает, что мы МОЖЕМ изменить значения, которые определены как "const" */

Однако обратите внимание, что эти переменные, определенные const, не могут быть переназначены.

{
 const name = "Mike";
 const PI = 3.14; 
 const a = [1,2,3];
 const b = {name: "hello"};
 
 name="Joe"; 
//это выдаст ошибку, так как мы пытаемся переназначить «name» на другое значение.
 PI = PI + 1; 
//это выдаст ошибку, так как мы пытаемся переназначить PI на другое значение.
 a = [1,2,3,4,5];
//это выдаст ошибку, так как мы пытаемся переназначить "a" на другое значение.
 b = {name: "hello"};
//это выдаст ошибку, так как мы пытаемся переназначить "b" на другое значение.
}

About the Author

Ergashev Lazizbek

Добрый день, дорогие мои читатели, позвольте мне рассказать вам немного о себе. Я Лазизбек Эргашев, я веб-разработчик из Узбекистана. В основном я использую laravel/php для бэкэнда и vuejs/javascript для фронтэнда. Основная цель моего блога - поделиться с вами своим опытом и знаниями.

View All Articles