استفسار عن لغة جافاسكربت ماهو الفرق بين let و var و const

توجد ثلاث كلمات رئيسية في JavaScript يمكن استخدامها للإعلان عن المتغيرات: let و var و const. لكل كلمة رئيسية قواعد وتأثيرات مختلفة على كيفية استخدام المتغيرات التي تنشئها.

let: تعلن الكلمة الأساسية let عن متغير محلي محدد النطاق ، وتهيئته اختياريًا إلى قيمة.تعني Block-scoped أن المتغير متاح فقط داخل الكتلة التي تم الإعلان عنها فيها ، والذي يُشار إليه عادةً بأقواس معقوفة {}.

var: الكلمة الأساسية var تعلن عن متغير عام أو نطاق وظيفي ، وتهيئته اختياريًا إلى قيمة.نطاق الوظيفة يعني أن المتغير متاح فقط داخل الوظيفة التي تم الإعلان عنها فيها. المتغيرات العامة متاحة في جميع أنحاء التعليمات البرمجية الخاصة بك.

const: تعلن الكلمة الأساسية const عن متغير ثابت محدد النطاق وغير قابل للتغيير ، أي متغير لا يمكن إعادة تعيينه.تسمى الثوابت أيضًا "المتغيرات غير القابلة للتغيير" ، ولكن هذا تسمية خاطئة نوعًا ما لأنها في الواقع متغيرات - فقط متغيرات لا يمكن إعادة تعيينها.

للمزيد من التفاصيل والمعلومات يفضل الإطلاع على موسوعة حسوب حيث يوجد توثيق لل javascript ويوجد شرح لل  let و var و const من خلال هذا الرابط

var

تستعمل هذه الكلمة لإنشاء متغيرات داخل الكائن العلوي window وهذه المتغيرات إما أن تكون عامة global يمكن الوصول إليها في جميع أنحاء التطبيق أو قد تكون في نطاق محدد وهو نطاق دالة معينة (function-scoped) بحيث لا يمكن الوصول إليها خارج هذه الدالة (private variables). هذه الكلمة المفتاحية موجودة منذ الإصدارات الأولى لجافاسكريبت ولكن الوقت جاء لإضافة بدائل عنها تكون أكثر مرونة وأمانا حتى تساير هذه اللغة الإيقاع السريع الذي يتقدم به مجال برمجيات الويب والجافاسكريبت بصفة عامة. ولهذا ظهر let في الإصدار الأخير من الجافاسكريبت.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // نفس المتغير
    console.log(x); // 2
  }
  console.log(x); // 2
}

let

بعكس var فإن let تمكننا من إنشاء متغيرات تابعة لنطاقات أضيق قد تكون دوال أو فقط تعابير شرطية أو حلقات متكررة وغيرها ولهذا تسمى هذه المتغيرات بالإنجليزية block-scoped أي أنك لا تستطيع الوصول إليها خارج ال block الذي صُرِّح بها فيه.

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // متغير آخر
    console.log(x); // 2
  }
  console.log(x); // 1
}

وعندما تحاول استعمال متغير قبل التصريح به فإنك ستحصل على خطأ جميل في برمجيتك من نوع ReferenceError على عكس ما اعتدنا علينا مع الكلمة المفتاحية var حيث كانت تعطى لكل متغير قيمة افتراضية وهي undefined حتى قبل إنشاء هذا المتغير.

const 

هذه الكلمة تعمل تماما بنفس خصائص let أي أنها block-scoped كذلك إلا أنها، كما يدل على ذلك اسمها، تستعمل فقط للتصريح بالثوابت Constants التي تأخذ قيمة واحدة فقط طيلة حياة البرنامج ولا يمكن تغييرها.

function constTest() {
  let x = true;

  if (x) {
    const P = 3.14;
    console.log(P); // 3.14
  }

  console.log(P); // ReferenceError
}

من خصائص const أنه من الضروري إعطاء قيمة للثابتة فور التصريح بها وهذا الأمر طبيعي كون الثابتة يصرح بها عند الحاجة إليها فقط ولا يمكن تغييرها فيما بعد في ذات النطاق scope الذي أنشأت فيه.

const P = 3.14;
P = 3.142; // Uncaught TypeError

بالإضافة إلى ما تم ذكره، هناك أمر هام يجب معرفته وهو لماذا تم الاستغناء عن var وإعتماد let و const بدلاً منها:

var:

تم استخدام var في السابق لتعريف المتغيرات قبل إضافة let و const في ES6. يمكن استخدام var في أي مكان داخل النطاق الوظيفي الذي تم تعريفه فيه، وإذا تم استخدام var داخل الكتلة block، فإن نطاقه ينتهي عند نهاية الكتلة الحالية. يمكن إعادة تعريف المتغيرات المعرفة ب var داخل نفس النطاق، ويتم تعويض القيمة المخزنة في المتغيرات المعرفة ب var في حالة الارتفاع (hoisting)، وهو سلوك يؤدي إلى رفع تعريف المتغيرات إلى الجزء العلوي من النطاق الحالي.

let:

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

const:

تم إضافة const أيضًا في ES6 وهي تستخدم لتعريف المتغيرات ثابتة القيمة (constant)، أي أن القيمة المخزنة فيها لا يمكن تغييرها. يتم تعريف نطاق const داخل الكتلة، ويجب تعيين القيمة المخزنة في المتغيرات المعرفة ب const عند التعريف ولا يمكن تغييرها لاحقًا. يتم استخدام const عادة عندما يكون من الضروري تعريف قيم ثابتة وغير قابلة للتغيير، مثل القيم الثابتة مثل قيمة عدد ثابت مثل الرقم الثابت PI (3.14) أو قيمة ثابتة مثل عنوان URL الذي يستخدمه التطبيق.

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

وتم استبدال var ب let و const في ES6 لتحسين توضيح ونطاق الحياة للمتغيرات. فباستخدام let و const، يتم تقييد نطاق المتغيرات بمدى الكتلة والتأكد من عدم تعريفها بشكل عشوائي في أي مكان آخر في البرنامج، بينما var يتم تعريف المتغيرات بمدى الدالة أو الملف، مما يمكن أحيانًا من تعريفها دون قصد في أي مكان في البرنامج.

باختصار

1- متى يتم استخدام var و let:

يتم استخدام var في حالات النطاق العام (global scope) أو النطاق الداخلي للدالة (function scope)، بينما يتم استخدام let في حالات النطاق الداخلي للكتل (block scope)، مثل اللوحات التالية:

// نطاق العام (global scope)
var a = 10;

function myFunction() {
  // نطاق الدالة (function scope)
  var b = 20;
  
  if (true) {
    // نطاق الكتل (block scope)
    let c = 30;
  }
}

2- لماذا تم استبدال var ب let و const:

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

مثال:

// مثال استخدام var
var x = 5;
var x = 10;
console.log(x); // النتيجة 10

// مثال استخدام let
let y = 5;
y = 10;
console.log(y); // النتيجة 10

// مثال استخدام const
const z = 5;
z = 10; // سيتم إلقاء خطأ في الكود
console.log(z);

https://io.hsoub.com/javascript/44681-المتغيرات-في-جافاسكربت-بعد-es6

https://io.hsoub.com/javascript/45102-رفع-المتغيرات-في-جافا-سكريبت-javascript-variables-hoisting

بالإضافة إلى ما تم ذكره, يوجد خاصية اخرى في غاية الأهمية وهي خاصية الredeclaration حيث أن var يحتوي على خاصية الredeclaration بينما كلًا من const و let لا يحتويان تلك الخاصية, فعلى سبيل المثال يمكننا فعل التالي

var name = "sharaf"
var name = "ashraf"

بينما لا يمكننا قيام نفس الشئ باستخدام let فلا يمكننا كتابة 

let name = "sharaf"
let name = "ashraf"

حيث لا يمكن تعريف نفس المتغير مرتين الا باستخدام var