Было время, когда я использовал и понимал практическое использование let, const и var в JavaScript, но объяснить это словами было сложно. Если вы оказались в аналогичном затруднительном положении, ключевыми моментами, на которых следует сосредоточиться, являются различия в области действия, подъеме, повторной инициализации и переназначении.

Обзор:

• var имеет область действия функции или глобальную область, если она объявлена ​​вне какой-либо функции.

Пример с var (функция и глобальная область видимости)

function varExample() {
    if (true) {
        var x = 10; // x is function-scoped
    }
    console.log(x); // Outputs: 10
}
varExample();

if (true) {
    var y = 20; // y is globally scoped because it's outside a function
}
console.log(y); // Outputs: 20

• let и const имеют блочную область действия, то есть они доступны только внутри того блока (разделенного {}), в котором они объявлены.

Пример с let (область блока)

function letExample() {
    if (true) {
        let x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
letExample();

if (true) {
    let y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

Пример с const (область действия блока)

function constExample() {
    if (true) {
        const x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
constExample();

if (true) {
    const y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

Подъем

Подъем похож на настройку рабочего пространства перед началом задачи. Представьте, что вы находитесь на кухне и готовитесь приготовить еду. Прежде чем начать готовить, вы кладете все ингредиенты и инструменты на стойку так, чтобы они были под рукой.

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

• Все три (var, let и const) действительно подняты. Однако разница заключается в том, как они инициализируются во время процесса подъема.

• var поднимается и инициализируется с помощью неопределенного значения.
  

console.log(myVar); // Outputs: undefined
var myVar = 10;

• let и const поднимаются, но не инициализируются. Это означает, что они находятся во «временной мертвой зоне» с начала блока до момента обнаружения объявления.

console.log(myLet);
// ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;

console.log(myConst); 
// ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

Переназначение и повторная инициализация:

• var можно повторно инициализировать (объявить повторно) и переназначить (присвоить новое значение). ### Пример с var

var x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

var x = 30; // Reinitialization
console.log(x); // Outputs: 30

• let не может быть повторно инициализирован в той же области, но может быть переназначен.

let y = 10;
y = 20; // Reassignment
console.log(y); // Outputs: 20

let y = 30; // SyntaxError: Identifier 'y' has already been declared

• const нельзя переназначить; он должен быть инициализирован во время объявления. Однако если const является объектом или массивом, содержимое (свойства или элементы) объекта или массива можно изменить. ### Пример с константой

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

const z = 30; // SyntaxError: Identifier 'z' has already been declared

Пример с константным объектом

const obj = { a: 1 };
obj.a = 2; // Allowed, modifies the property
console.log(obj.a); // Outputs: 2

obj = { a: 3 }; // TypeError: Assignment to constant variable.

Пример с константным массивом

const arr = [1, 2, 3];
arr[0] = 4; // Allowed, modifies the element
console.log(arr); // Outputs: [4, 2, 3]

arr = [5, 6, 7]; // TypeError: Assignment to constant variable.