8- ما هي الكلمة المفتاحية let في جافاسكريبت؟

مقدمة

تم تقديم كلمة المفتاح let في إصدار ES6 (2015) من لغة جافاسكريبت. المتغيرات المعلنة باستخدام let تمتلك نطاق كتلة محلي. يجب إعلان المتغيرات المعلنة باستخدام let قبل استخدامها. لا يمكن إعادة إعلان المتغيرات المعلنة باستخدام let داخل نفس النطاق.

نطاق الكتلة

قبل إصدار ES6 (2015)، لم يكن لدى لغة جافاسكريبت نطاق كتلة محلي. كانت تمتلك نطاقًا عالميًا ونطاقًا محليًا داخل الدوال. قدم إصدار ES6 كلمتي المفتاح الجديدتين: let و const. هاتان الكلمتان أضافتا نطاق الكتلة المحلي إلى لغة جافاسكريبت.

مثال

المتغيرات المعلنة داخل كتلة { } لا يمكن الوصول إليها من خارج هذه الكتلة:

{
  let x = 2;
}
// x can NOT be used here

Global Scope

المتغيرات المعلنة باستخدام الكلمة المفتاحية var لها دائماً نطاق عالمي. المتغيرات المعلنة باستخدام الكلمة المفتاحية var لا يمكن أن يكون لها نطاق كتلة:

مثال:

المتغيرات المعلنة باستخدام var داخل كتلة {} يمكن الوصول إليها من خارج الكتلة:

{
  var x = 2;
}
// x CAN be used here

لا يمكن إعادة إعلانها

المتغيرات المعرفة باستخدام let لا يمكن إعادة إعلانها. لا يمكنك إعادة إعلان متغير معلن باستخدام let عن طريق الخطأ. مع let لا يمكنك فعل ذلك:

let x = "John Doe";

let x = 0;

المتغيرات المعرفة باستخدام var يمكن إعادة إعلانها. مع var يمكنك فعل ذلك:

var x = "John Doe";

var x = 0;

إعادة إعلان المتغيرات

إعادة إعلان متغير باستخدام الكلمة المفتاحية var يمكن أن يفرض مشاكل. إعادة إعلان متغير داخل كتلة ستعيد أيضًا إعلان المتغير خارج الكتلة:

مثال:

var x = 10;
// Here x is 10

{
var x = 2;
// Here x is 2
}

// Here x is 2

إعادة إعلان متغير باستخدام الكلمة المفتاحية let يمكن أن يحل هذه المشكلة. إعادة إعلان متغير داخل كتلة لن يعيد إعلان المتغير خارج الكتلة:

مثال:

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

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

ما هو جيد؟

• let و const لهما نطاق كتلة.
• لا يمكن إعادة إعلان let و const.
• يجب إعلان let و const قبل الاستخدام.
• let و const لا يرتبطان بـ this.
• let و const غير مرفوعات.

ما هو غير جيد؟

• var لا يجب أن يتم إعلانه.
• var مرفوع.
• var يرتبط بـ this.

دعم المتصفح

كلمات المفتاح let و const غير مدعومة في Internet Explorer 11 أو إصدارات أقدم. يوضح الجدول التالي أول إصدارات المتصفحات التي تدعمها بالكامل:

إعادة الإعلان (Redeclaring)

يُسمح بإعادة إعلان متغير JavaScript باستخدام var في أي مكان في البرنامج:

مثال:

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

مع let، لا يُسمح بإعادة إعلان متغير في نفس الكتلة:

مثال:

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

يُسمح بإعادة إعلان متغير باستخدام let في كتلة أخرى:

مثال:

let x = 2;   // Allowed

{
let x = 3;   // Allowed
}

{
let x = 4;    // Allowed
}

الرفع (Hoisting)

المتغيرات المُعلنة باستخدام var تُرفع إلى الأعلى ويمكن تهيئتها في أي وقت. أي: يمكنك استخدام المتغير قبل إعلانه:

مثال:

carName = "Volvo";
var carName;

المتغيرات المُعلنة باستخدام let تُرفع أيضًا إلى أعلى الكتلة، ولكنها لا تُهّأ. أي: استخدام متغير let قبل إعلانه سيؤدي إلى خطأ مرجعي (ReferenceError):

مثال:

carName = "Saab";
let carName = "Volvo";