تعلم جافا سكريبت في 10 أيام /الدرس الرابع: الفرق بين var و let في جافا سكريبت
يتم استخدام كل من var و let للإعلان عن المتغير في جافا سكريبت ولكن الاختلاف بينهما هو أن:
- var تجعل المتغير ذا نطاق محلي function scoped
- و let تجعل المتغير ذا نطاق على مستوى البلوك block scoped
يمكن القول أن المتغير الذي تم التصريح به باستخدام var يتم تعريفه في جميع أنحاء البرنامج بينما المتغير المصرح عنه باستخدام let محدود الاستخدام.
شرح مفصل للفرق بين var و let في لغة جافا سكريبت JavaScript.
1. var
كانت في البداية الطريقة الأساسية لتعريف المتغيرات في جافا سكريبت قبل إضافة let و const في إصدار (ES6) فالمتغيرات التي تم تعريفها باستخدام var تكون مُرئية في كل الدالة التي تم تعريفها بها كما أن متغيرات var لا تملك قيود على إعادة تعريفها في نفس النطاق، مما يسمح بإعادة تعريف المتغيرات مرارًا وتكرارًا داخل نفس النطاق.
2. let
هي طريقة أحدث لتعريف المتغيرات في جافا سكريبت فالمتغيرات المعرفة باستخدامها تكون مُرئية فقط في الكتلة التي تم تعريفها بها، وليس في داخل الدوال كما يمكن إعادة تعريف متغيرات let في نفس الكتلة مرة واحدة فقط ومحاولة إعادة تعريفهاعدة مرات داخل نفس الكتلة ستؤدي إلى وقوع خطأ.
إذًا يمكن القول أن الفرق الرئيسي بينهما هو نطاق الرؤية وتعاملهما مع إعادة التعريف.
على سبيل المثال إذا كان لدينا الكود التالي
function example1() {
var x = 10;
if (true) {
var x = 20; // يؤثر على x في الدالة الخارجية
}
console.log(x); // سيطبع 20
}
function example2() {
let y = 10;
if (true) {
let y = 20; // لا يؤثر على y في الدالة الخارجية
}
console.log(y); // سيطبع 10
}
في المثال الأول تسبب var في تغيير قيمة المتغير x على مستوى الدالة بأكملها في حين حافظ let في المثال الثاني على نطاق الرؤية المحدود للمتغير y داخل الكتلة.
جدول يوضح الفرق بين var و let
| ||||||||||||||||||||||||||||
مثال عملي يوضح الفرق بين var و let
هذا الكود يقوم بتغيير لون نصوص العناوين في صفحة الويب عند النقر على زر Start كما يلي
عند النقر على زر start تستدعى الدالة startColorChange المسؤولة عن عملية تغيير لون نصوص العناوين في الصفحة فإذا كان لون العنوان الأول أسود سيتم تغييره للأزرق وإذا كان لون العنوان الثاني أسود سيتم تغييره اللأحمر وبالعكس ويتكرر الكود كل 400 ميلي ثانية.
ولدينا عبارة `let col1 = `black لتعريف متغير اللون col1 بقيمة black وعبارة `let col2 = `black لتعريف متغير اللون col2 بقيمة 'black'
الآن جرب تغيير الكود السابق بهذا الكود:
<!DOCTYPE html>
<html>
<head>
<title>Var vs Let</title>
</head>
<body>
<h1 id="var" style="color: black">WAEL IT</h1>
<h1 id="let" style="color: black">WAEL IT</h1>
<button id="btn" onclick="colour()">Start</button>
<script type="text/javascript">
function colour() {
setInterval(function () {
if (document.getElementById("var").style.color == "black")
var col1 = "blue";
else col1 = "black";
if (document.getElementById("let").style.color == "black") {
let col2 = "red";
} else {
col2 = "black";
}
document.getElementById("var").style.color = col1;
document.getElementById("let").style.color = col2;
}, 400);
}
</script>
</body>
</html>
سيعطي هذا الكود خطأ ولن يغير لون العنوان الثاني لأن المتغير المصرح عنه باستخدام var محددة في نطاق الدالة التي تم إنشاؤها بها، بينما المتغير المصرح عنه باستخدام let محددة في نطاق داخل الكتلة الداخلية للشرط if .
,وبالتالي سيؤدي النقر فوق زر start إلى استدعاء دالة تغير لون العنوانين كل 4 ميلي ثانية ويتم الإعلان عن لون العنوان الأول باستخدام var والإعلان عن لون العنوان الثاني باستخدام let. ثم يحاول الكود الوصول إلى كلا المتغيرين خارج كتلة الوظيفة سيعمل var لكن المتغير المعلن باستخدام let سيُظهر خطًأ لأنه غير معروف خارج الكتلة التي عرفته بها.
الخلاصة
في جافا سكريبت، يوجد فارق رئيسي بين var و let حيث يكون متغير var محددًا في نطاق الدالة ويمكن الوصول إليه من أي مكان داخل الدالة، بينما يكون متغير let محددًا بشكل محلي في نطاق كتلة التعليمات البرمجية ويمكن الوصول إليه فقط داخل هذه الكتلة التي تم تعريفه فيها.
يفضل استخدام let قدر المستطاع عند كتابة الكود لتجنب مشكلات نطاق المتغيرات وتحسين هيكلة الشفرة، في حين أن var قد أصبح استخدامه محدودًا في السياقات الحديثة.
