كان هناك وقت استخدمت فيه وفهمت الاستخدام العملي لـ 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 محددان بنطاق الكتلة، مما يعني أنه لا يمكن الوصول إليهما إلا داخل الكتلة (المفصولة بـ {}) التي تم الإعلان عنهما فيها.

مثال مع السماح (نطاق الكتلة)

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 x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

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

• دع لا يمكن إعادة تهيئة ضمن نفس النطاق ولكن يمكن إعادة تعيينها.

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

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

لا يمكن إعادة تعيين
• const؛ يجب أن تتم تهيئته في وقت الإعلان. ومع ذلك، إذا كان const عبارة عن كائن أو مصفوفة، فيمكن تعديل محتويات (خصائص أو عناصر) الكائن أو المصفوفة. ### مثال مع const

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

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

مثال مع كائن const

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

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.