Let vs. Var في JavaScript: إزالة الغموض عن النطاق والمناطق الميتة المؤقتة

تم تقديم بيان السماح في ECMAScript 6، وقد أثار ارتباكًا بين المطورين ، وخاصة كيف تختلف عن الكلمة الأساسية var المحددة. تتعمق هذه المقالة في الفروق الدقيقة بين هذين الإعلانين المتغيرين، مع تسليط الضوء على قواعد تحديد النطاق الخاصة بهما وأفضل حالات الاستخدام.

النطاق

يكمن التمييز الأساسي في سلوك تحديد النطاق. تقتصر المتغيرات المعلنة باستخدام var على الوظيفة التي تم تعريفها فيها (نطاق الوظيفة)، بينما تقتصر متغيرات Let على الكتلة المحصورة داخلها (نطاق الكتلة). وهذا يعني السماح للمتغيرات بنطاق أضيق بكثير، مما يمنعها من التفاعل مع المتغيرات المحددة خارج الكتلة المباشرة الخاصة بها.

مثال:

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

في المثال أعلاه، يظل المتغير var moo قابلاً للوصول حتى خارج الكتلة الخاصة به، بينما المتغير Let baz يلقي خطأ مرجعي عند الوصول إليه خارج الكتلة الخاصة به.

Temporal المناطق الميتة

هناك اختلاف آخر وهو المناطق الميتة المؤقتة (TDZ). بالنسبة لمتغيرات السماح، يوجد TDZ من نقطة التصريح حتى نهاية الكتلة التي تم تعريفها فيها. خلال هذه الفترة، يؤدي الوصول إلى متغير السماح دون التهيئة إلى خطأ مرجعي.

مثال :

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

في هذا الكود، الوصول إلى المتغير Let foo قبل تهيئته يؤدي إلى خطأ مرجعي بسبب TDZ.

متى يجب استخدام Let vs.Var

بشكل عام، يفضل استخدام Let للمتغيرات داخل الكتل لتجنب تلويث النطاق العام ومنع تضارب أسماء المتغيرات. لا يزال var مفيدًا للمتغيرات التي يجب الوصول إليها عبر كتل أو وظائف متعددة.