الفرق بين `let` و `const` و `var` في JavaScript

في JavaScript، توجد ثلاثة طرق رئيسية لإعلان المتغيرات: var و let و const. كل طريقة لها استخداماتها وقواعدها الخاصة. في هذا الدليل، سنتناول الفرق بينها بالتفصيل.

1. المتغيرات باستخدام `var`

الوصف:

• var هي الطريقة القديمة لتعريف المتغيرات في JavaScript وكانت تُستخدم قبل ECMAScript 6 (ES6).
• نطاق المتغير: المتغيرات المُعلنة باستخدام var تكون ذات نطاق وظيفي أو عام (Global/Function Scope).
• إعادة التعريف: يمكنك إعادة تعريف المتغيرات المُعلنة باستخدام var دون حدوث أخطاء.

مثال:

var x = 5;
if (true) {
    var x = 10; // إعادة تعريف x
    console.log(x); // 10
}
console.log(x); // 10 (الـ var تم تعريفه بالنطاق العام)

خصائص `var`:

• نطاق الوظيفة: المتغيرات التي يتم تعريفها باستخدام var تكون مرتبطة بالوظيفة إذا كانت داخل دالة، أو تصبح عامة إذا كانت خارج أي دالة.
• رفع المتغير (Hoisting): المتغيرات المُعلنة باستخدام var يتم رفعها إلى أعلى النطاق الوظيفي أو العام قبل تنفيذ الكود. أي يمكن استخدام المتغير قبل أن يتم إعلانه، لكنه سيعطى قيمة undefined.

مثال على رفع المتغير:

console.log(y); // undefined (تم رفع y لكن لم يُعطى قيمة بعد)
var y = 7;

2. المتغيرات باستخدام `let`

الوصف:

• let تم تقديمها في ES6 وهي طريقة أفضل لتعريف المتغيرات مقارنةً بـ var.
• نطاق المتغير: المتغيرات المُعلنة باستخدام let تكون ذات نطاق كتلة (Block Scope).
• إعادة التعريف: لا يمكن إعادة تعريف نفس المتغير باستخدام let داخل نفس النطاق.

مثال:

let a = 5;
if (true) {
    let a = 10; // تعريف جديد داخل كتلة if
    console.log(a); // 10
}
console.log(a); // 5 (القيمة خارج الكتلة لم تتأثر)

خصائص `let`:

• نطاق الكتلة: المتغيرات التي يتم تعريفها باستخدام let تكون محصورة داخل الكتلة التي تم تعريفها فيها (مثل داخل if أو for).
• رفع المتغير: يتم رفع المتغيرات المُعلنة باستخدام let، لكن لا يمكن الوصول إليها قبل الإعلان عنها بشكل صريح؛ أي أن استخدامها قبل الإعلان يؤدي إلى خطأ.

مثال على خطأ الرفع:

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

3. المتغيرات باستخدام `const`

الوصف:

• const تم تقديمها في ES6 وتستخدم لتعريف المتغيرات التي لا تتغير قيمتها بعد الإعلان عنها.
• نطاق المتغير: مثل let، المتغيرات المُعلنة باستخدام const تكون ذات نطاق كتلة.
• إعادة التعيين: لا يمكن إعادة تعيين أو تعديل قيمة المتغير المُعرّف باستخدام const.

مثال:

const PI = 3.14159;
console.log(PI); // 3.14159
PI = 3.14; // TypeError: Assignment to constant variable.

خصائص `const`:

• نطاق الكتلة: المتغيرات المُعلنة باستخدام const تكون محصورة داخل الكتلة التي تم تعريفها فيها.
• الثبات: بعد تعيين قيمة للمتغير المُعلَن باستخدام const، لا يمكن تغيير هذه القيمة.
• المتغيرات المعقدة: بالنسبة للمتغيرات التي تحتوي على كائنات أو مصفوفات، يمكنك تعديل خصائص الكائن أو عناصر المصفوفة، ولكن لا يمكن إعادة تعيين الكائن أو المصفوفة نفسها.

مثال على كائنات ومصفوفات مع `const`:

const myArray = [1, 2, 3];
myArray.push(4); // يمكن تعديل المصفوفة
console.log(myArray); // [1, 2, 3, 4]

const myObject = { name: "John" };
myObject.age = 30; // يمكن تعديل خصائص الكائن
console.log(myObject); // { name: "John", age: 30 }

4. مقارنة عامة بين `var` و `let` و `const`

5. متى تستخدم كل منها؟

• استخدم const عندما تكون متأكدًا أن القيمة لن تتغير بعد التعيين.
• استخدم let عندما تتوقع أن تتغير قيمة المتغير، خاصة داخل نطاق كتلة (مثل الحلقات أو الشروط).
• تجنب استخدام var إذا كان ذلك ممكنًا؛ فهو قد يسبب أخطاء بسبب نطاقه العام وسلوكه مع الرفع.

الخلاصة:

في JavaScript، var، let، و const كل منها لها خصائصها المميزة. var يستخدم بشكل أقل الآن بسبب مشاكله المتعلقة بالنطاق والرفع، بينما let و const يفضل استخدامهما في معظم الحالات. const يُستخدم للثوابت، وlet يُستخدم عندما تتغير قيمة المتغير.

أمثلة عملية:

// استخدام let و const مع الحلقات
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

const name = "John";
if (true) {
    let name = "Doe";
    console.log(name); // Doe
}
console.log(name); // John

بهذا الدليل الشامل، تعرفنا على الفرق بين let و const و var في JavaScript، وقدمنا أفضل الممارسات لاستخدامها في الكود الخاص بك.