الفرق بين var و let و const في JavaScript للمبتدئين: متى تستخدم كل واحدة مع أمثلة واضحة

تخيّل أنك غيّرت قيمة متغير في جزء من الكود، ثم اكتشفت أن النتيجة تغيّرت في مكان بعيد لا تتوقعه. غالباً السبب ليس في العملية نفسها، بل في اختيارك بين var وlet وconst.

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

الفرق السريع بين var و let و const

قاعدة عملية للمبتدئ: ابدأ بـ const. إذا احتجت تغيير القيمة لاحقاً، بدّلها إلى let. اترك var للحالات القديمة فقط.

1) لماذا var تسبب مشاكل في JavaScript؟

المتغيرات بـ var يمكن إعادة تعريفها بسهولة، ونطاقها (Scope) أقل وضوحاً في الكتل {}، وهذا يسبب أخطاء صعبة التتبع في المشاريع الكبيرة.

مثال var (إعادة تعريف بدون تحذير واضح)

var x = 5;
var x = 10; // مسموح
console.log(x); // 10

ماذا يفعل هذا الكود؟ يعيد تعريف نفس المتغير في نفس النطاق باستخدام var.

النتيجة المتوقعة: القيمة النهائية تصبح 10 بدون خطأ.

خطأ شائع: إعادة تعريف متغير بالخطأ ثم ضياع السبب أثناء debugging.

مثال Scope: الفرق داخل if

if (true) {
  var a = 'var value';
  let b = 'let value';
}

console.log(a); // works
// console.log(b); // Error

ماذا يفعل هذا الكود؟ يقارن نطاق var مع let داخل كتلة if.

النتيجة المتوقعة: a متاحة خارج الكتلة، بينما b غير متاحة.

خطأ شائع: توقع أن var محصورة داخل الأقواس مثل let.

2) متى أستخدم let في JavaScript؟

استخدم let عندما تتوقع تغيير القيمة لاحقاً (مثل عداد أو حالة متغيرة).

let counter = 0;
counter = counter + 1;
console.log(counter); // 1

ماذا يفعل هذا الكود؟ يعرّف عداداً يمكن تحديثه.

النتيجة المتوقعة: طباعة 1 بعد زيادة القيمة.

خطأ شائع: استخدام const مع قيمة تحتاج تحديثاً لاحقاً.

مثال آخر على let مع حلقة

for (let i = 0; i < 3; i++) {
  console.log('Step:', i);
}

ماذا يفعل هذا الكود؟ يستخدم let لمتغير يتغير في كل دورة.

النتيجة المتوقعة: طباعة 0 ثم 1 ثم 2.

خطأ شائع: نسيان أن المتغير i خاص بنطاق الحلقة.

3) متى أستخدم const في JavaScript؟

استخدم const للقيم التي لا تريد إعادة تعيينها. هذا يعطي أماناً أعلى للكود.

const siteName = 'DevArabi';
// siteName = 'Another'; // Error

ماذا يفعل هذا الكود؟ يثبت مرجع المتغير فلا يمكن إعادة تعيينه.

النتيجة المتوقعة: أي محاولة لإعادة التعيين تعطي خطأ.

خطأ شائع: اعتبار const اختياراً مزعجاً ثم الرجوع لـ let بلا حاجة.

معلومة مهمة عن const مع Objects/Arrays

const تمنع إعادة تعيين المتغير نفسه، لكنها لا تمنع تعديل محتوى الكائن أو المصفوفة.

const user = { name: 'Ali' };
user.name = 'Sara'; // مسموح
// user = {}; // غير مسموح

ماذا يفعل هذا الكود؟ يوضح أن تعديل الخصائص مسموح، لكن إعادة تعيين الكائن بالكامل غير مسموح.

النتيجة المتوقعة: تغيير name ينجح، وتغيير user نفسه يفشل.

خطأ شائع: الاعتقاد أن const تجعل الكائن "مجمداً" بالكامل.

4) مثال مبسط على Hoisting

console.log(oldVar); // undefined
var oldVar = 'var value';

// console.log(newLet); // ReferenceError
let newLet = 'let value';

ماذا يفعل هذا الكود؟ يبين الفرق في السلوك قبل التصريح بين var وlet.

النتيجة المتوقعة: var تظهر كـ undefined، بينما let تعطي خطأ قبل تعريفها.

خطأ شائع: الاعتماد على hoisting بدل ترتيب الكود بشكل واضح.

Story قصيرة: Bug بسبب var

مطور مبتدئ استخدم var total داخل شرط، ثم استُخدمت القيمة خارج الشرط في حساب آخر. المشروع عمل أحياناً وفشل أحياناً حسب مسار التنفيذ. بعد استبدال var بـ let/const وتقسيم النطاق بوضوح، اختفى الخطأ.

let score = 10;
score = 15;
const level = 'beginner';
console.log(score, level);

أفضل ممارسة احترافية في JavaScript

• ابدأ دائماً بـ const.
• حوّل إلى let فقط إذا احتجت تغيير القيمة.
• تجنب var في الكود الحديث.

Checklist سريعة قبل اختيار نوع المتغير

• هل سأعيد تعيين القيمة لاحقاً؟ إذا لا: استخدم const.
• هل القيمة ستتغير أثناء التنفيذ؟ إذا نعم: استخدم let.
• هل أعمل على كود حديث؟ تجنب var غالباً.
• هل نطاق المتغير واضح داخل block/function؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: العمليات الحسابية في JavaScript ثم عمليات المقارنة في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

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

الفرق الأساسي في النطاق Scope وإمكانية إعادة التعريف/التعيين. في الكود الحديث يفضل غالباً const وlet.

هل يجب تجنب var في JavaScript؟

نعم في أغلب الحالات الحديثة، لأن let وconst أوضح وأقل تسبباً في أخطاء صيانة.

متى أستخدم const ومتى أستخدم let؟

استخدم const كافتراضي، واستخدم let فقط عندما تحتاج تغيير القيمة لاحقاً.

هل const تمنع تعديل object أو array؟

لا. هي تمنع إعادة تعيين المتغير نفسه، لكن تعديل المحتوى الداخلي يظل ممكناً.

ما أول خطوة بعد فهم var/let/const؟

ابدأ بالعمليات الحسابية ثم المقارنات لتبني شروطاً ومنطقاً صحيحاً فوق متغيراتك.

للمتابعة مباشرة: ابدأ بدرس العمليات الحسابية في JavaScript ثم انتقل إلى عمليات المقارنة في JavaScript.