0Pricing
Frontend Academy · درس

المتغيرات: let وconst وvar والنطاق

صرّح بالمتغيرات باستخدام let وconst وvar. افهم نطاق الكتلة ونطاق الدالة، ولماذا يُفضّل const لمعظم القيم.

المتغيرات: let وconst وvar والنطاق درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لماذا نستخدم المتغيرات؟

تخزن المتغيرات القيم، بحيث يمكنكم إعادة استخدامها وتحديثها ومنحها أسماء ذات معنى. يوفّر JavaScript ثلاث طرق لتصريح المتغيرات: var (قديمة)، وlet (حديثة وقابلة لإعادة الإسناد)، وconst (حديثة وربطها ثابت).

const — الخيار الافتراضي

صرّحوا باستخدام const عندما لا تريدون إعادة إسناد المتغير. فهذا يوضح القصد ويمنع إعادة الإسناد غير المقصودة. ملاحظة: تمنع const إعادة الربط، لكنها لا تجعل الكائنات أو المصفوفات غير قابلة للتغيير.

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — عند الحاجة إلى إعادة الإسناد

استخدموا let عندما تتغير القيمة، مثل عدادات الحلقات والمجاميع التراكمية ومتغيرات الحالة. يمتلك let نطاقًا كتليًا، أي إنه لا يوجد إلا داخل أقرب { } محيط به.

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — التصريح القديم

يمتلك var نطاقًا على مستوى الدالة (وليس نطاقًا كتليًا)، وتُرفع تصريحاته إلى أعلى الدالة. وقد يسبب ذلك أخطاء دقيقة. تجنبوا var في JavaScript الحديثة، وفضّلوا const وlet.

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

النطاق: أين تعيش المتغيرات

النطاق العام: يُصرَّح بالمتغير خارجه أي دالة أو كتلة، ويمكن الوصول إليه من أي مكان. نطاق الدالة: يُصرَّح بالمتغير داخل دالة، ولا يمكن الوصول إليه إلا داخل تلك الدالة. النطاق الكتلي: متغيرات let/const داخل { }، ولا يمكن الوصول إليها إلا داخل تلك الكتلة.

رفع التصريحات

ينقل رفع التصريحات التصريحات إلى أعلى نطاقها في وقت الترجمة. تُرفع تصريحات var وتُهيَّأ إلى undefined. أما let وconst فتُرفع تصريحاتهما، لكن لا تتم تهيئتهما، ويؤدي الوصول إليهما قبل التصريح إلى حدوث خطأ في المنطقة الزمنية الميتة.

تسمية المتغيرات

استخدموا أسماء وصفية. استخدموا camelCase للمتغيرات والدوال (مثل userName)، وUPPER_SNAKE_CASE للثوابت (مثل MAX_RETRIES)، وPascalCase للفئات (مثل UserProfile). تجنبوا الأحرف المفردة إلا في الحلقات (مثل i وj).

التصريح عن عدة متغيرات

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

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

المنطقة الزمنية الميتة (TDZ)

يؤدي الوصول إلى متغير let أو const قبل التصريح عنه في الشيفرة إلى إطلاق ReferenceError. وتُسمى المنطقة الواقعة بين بداية الكتلة والتصريح المنطقة الزمنية الميتة، أو TDZ.

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

استخدام const مع المصفوفات والكائنات

تمنع const إعادة إسناد المتغير، لكن لا يزال من الممكن تغيير القيمة المشار إليها. استخدموا Object.freeze() لإنشاء كائن غير قابل للتغيير بشكل سطحي، أو استخدموا أنماطًا غير قابلة للتغيير لتحقيق عدم القابلية للتغيير العميق.

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

لماذا نفضّل const على let؟

يجعل اعتماد const كخيار افتراضي فهم الشيفرة أسهل، إذ تعرفون أن المتغير لن يُعاد إسناده في مكان آخر. انتقلوا إلى let فقط عند الحاجة الفعلية إلى إعادة الإسناد. تقلل هذه العادة الأخطاء وتحسن قابلية القراءة.

تحقق سريع

ما الفرق الأساسي بين let وvar؟

مراجعة: المتغيرات والنطاق

فضّلوا const للقيم التي لن يُعاد إسنادها. استخدموا let للقيم القابلة للتغيير. تجنبوا var. يحافظ النطاق الكتلي (let/const) على حصر المتغيرات. في رفع التصريحات: تُهيَّأ var إلى undefined، بينما يسبب الوصول إلى let/const في وقت مبكر جدًا خطأ TDZ.

الأسئلة الشائعة

هل درس «المتغيرات: let وconst وvar والنطاق» مجاني؟

نعم — نص درس «المتغيرات: let وconst وvar والنطاق» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «المتغيرات: let وconst وvar والنطاق»؟

صرّح بالمتغيرات باستخدام let وconst وvar. افهم نطاق الكتلة ونطاق الدالة، ولماذا يُفضّل const لمعظم القيم. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «المتغيرات: let وconst وvar والنطاق»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. المتغيرات: let وconst وvar والنطاق
  2. أنواع البيانات: string وnumber وboolean وnull وundefined
  3. الدوال: التصريحات والتعابير والدوال السهمية
  4. تدفق التحكم: if وelse وswitch وfor وwhile
← العودة إلى Frontend Academy