شرح Let فى JavaScript | الفرق بين الـ let و var

سنتناقش فى هذا الفصل “JavaScript Let” تعريف المتغيرات بإستخدام المعرفة let، وتوضيح الفرق بين الـ let و var بالتفصيل مع بعض الأمثلة التوضيحية.

JavaScript Let

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

في جافا سكريبت، let هي كلمة أساسية تُستخدم للإعلان عن متغير نطاق الكتلة block scoped.

لا يتم دعم الكلمة الأساسية let بشكل كامل في Internet Explorer 11 أو إصدار أقدم.

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

var y = 3.14;
var y = "Hello!";

console.log(y); // outputs: "Hello!"

لكن المتغيرات المعرفة بـ let لا يمكن إعادة تعريفها:

let y = 3.14;
let y = "Hello!";

console.log(y); // SyntaxError: redeclaration of let y

نطاق الكتلة – Block Scope

المتغيرات التي تم الإعلان عنها بواسطة let لها نطاقها في الكتلة التي تم الإعلان عنها ، وكذلك في أي كتل فرعية مضمنة.

في ES5 ، عندما تقوم بتعريف متغير باستخدام الكلمة الأساسية var ، يكون نطاق المتغير إما عام Global أو محلي Local. إذا قمت بتعريف متغير خارج دالة ، فسيكون نطاق المتغير عام global. عندما تقوم بتعريف متغير داخل دالة ، يكون نطاق المتغير محليًا local.

قدم ES6 كلمتين رئيسيتين مهمتين لجافا سكريبت: let و const. توفر هاتان الكلمتان الأساسيتان Block Scope في JavaScript.

مثال للتوضيح (var):

// Variable Example
{
  var y = 10;
}

console.log(y);  // outputs: 10

مثال للتوضيح (let):

// Let Example
{
  let y = 10;
}

console.log(y);  // no outputs

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

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

في هذا المثال ، سنعلن عن متغير يحمل نفس الاسم في كتل مختلفة ونعرض قيمته:

var num = 20;

{
var num = 30;
console.log(num); // outputs: 30
}

var num = 40;
console.log(num); // outputs: 40

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

{
var num = 30;
console.log(num); // outputs: 30
}

var num = 40;
console.log(num); // outputs: 40

إعادة التصريح – Redeclaring

تؤدي إعادة تعريف نفس المتغير داخل نفس الوظيفة أو نطاق الكتلة إلى ظهور خطأ في بناء الجملة SyntaxError:

{
  let num = 20;
  let num = 30; // SyntaxError
}

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

var num = 20;
console.log(num); // outputs: 20

{
var num = 30;
console.log(num); // outputs: 30
}

var num = 40;
console.log(num); // outputs: 40

Let Hoisting

بينما يتم رفع المتغيرات المعلنة باستخدام كلمة var (تهيئتها بـ undefined قبل تشغيل الكود) مما يعني أنه يمكن الوصول إليها في نطاقها المرفق حتى قبل إعلانها:

console.log(myName); // outputs: undefined

myName = "Hamed Esam";
console.log(myName); // outputs: Hamed Esam

var myName = "Hamed Esam";
console.log(myName ); // outputs: Hamed Esam

المتغيرات المعرفة بـ let يتم رفعها أيضًا إلى أعلى الـ block، لكن لم تتم تهيئتها (اى استخدام متغير let قبل التصريح عنه سيؤدي إلى خطأ مرجعى reference error):

console.log(myName); // outputs: SyntaxError

myName = "Hamed Esam";
console.log(myName); // outputs: SyntaxError

let myName = "Hamed Esam";
console.log(myName ); // outputs: Hamed Esam