المتغيرات في جافاسكريبت JavaSript variables ,let,var, const
Understanding JavaScript Variables: var, let, and const
مقدمة: مفهوم المتغيرات في JavaScript
JavaScript هي لغة برمجة قوية ومرنة تستخدم على نطاق واسع في تطوير الويب. أحد أهم الأساسيات التي يجب على كل مطور JavaScript فهمها هو مفهوم المتغيرات. المتغيرات تلعب دورًا حاسمًا في تخزين البيانات والتحكم في تداول المعلومات في الشيفرة.
تعتبر المتغيرات في JavaScript محوريّة لفهم كيفية تخزين واسترجاع القيم، وتوفير نطاق للتحكم في مدى وجود وصلاحيات البيانات في الشيفرة. في هذا الدرس، سنستعرض ثلاثة أنواع من المتغيرات: var، let، و const، ونستكشف كيف يختلف سلوك كل منها وكيف يمكن استخدامها بشكل فعّال في تطوير التطبيقات.
نتناول في هذا الدرس النطاقات وخصائص الرفع وثبات القيم، ونقدم أمثلة عملية لتوضيح استخدام كل نوع من المتغيرات. ستساعدك هذه المفاهيم على فهم أفضل لكيفية التعامل مع المتغيرات في JavaScript وتحسين جودة وفعالية شيفرتك. تفضل بمتابعة الدرس لاكتساب رؤية أوسع حول هذا الموضوع الأساسي.
هيا بنا نفهم المتغيرات في لغة البرمجة JavaScript والفروق بين var، let، و const.
var:
var كانت الطريقة التقليدية لتعريف المتغيرات في JavaScript قبل إضافة ES6 (ECMAScript 2015).
يتميز var بأنه يعتبر متغيرًا يمتلك نطاق (scope) واسع، حيث يكون متاحًا في كل مكان داخل الدالة التي تم تعريفه فيها.
إذا قمت بتعريف متغير باستخدام var خارج نطاق الدالة، فإنه يصبح متاحًا على مستوى الـ “global scope” (النطاق العام).
var x = 10;
function example() {
var y = 5;
console.log(x); // يمكن الوصول إلى x هنا
}
console.log(y); // سيؤدي إلى خطأ، لأن y ليس متاحًا هنا خارج الدالة
let:
تم إضافة let في ES6 لتحسين إدارة المتغيرات وتحديد نطاقاتها بشكل أفضل.
let يمتلك نطاق محدد يسمى “block scope”، وهو محدود داخل السطر الذي تم فيه تعريفه.
يمكن إعادة تعريف قيمة متغير let في نفس النطاق.
let a = 20;
if (true) {
let a = 30;
console.log(a); // سيكون القيمة هنا 30
}
console.log(a); // سيكون القيمة هنا 20
const:
يستخدم const لتعريف متغيرات ذات قيمة ثابتة (constant) التي لا يمكن إعادة تعيينها.
يمتلك const أيضًا نطاق “block scope”.
يجب تعيين قيمة لمتغير const عند تعريفه، ولا يمكن إعادة تعيينه لاحقًا.
const pi = 3.14;
if (true) {
const pi = 3.1415;
console.log(pi); // سيكون القيمة هنا 3.1415
}
console.log(pi); // سيظل القيمة هنا 3.14
باختصار، يمكن استخدام var في حالات قليلة، ولكن يُفضل استخدام let لتجنب مشاكل نطاق المتغيرات، بينما يُفضل استخدام const عندما تكون قيمة المتغير ثابتة ولا تحتاج إلى تغيير.
مثال كامل في صفحة ويب عن كل نوع مع الشرح
مثال كامل على صفحة ويب يستخدم كل نوع من المتغيرات var، let، و const مع الشرح:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Variables Example</title>
</head>
<body>
<script>
// مثال باستخدام var
var globalVar = "I am a global variable";
function varExample() {
var localVar = "I am a local variable";
document.write(globalVar); // يمكن الوصول إلى globalVar هنا
document.write(localVar); // يمكن الوصول إلى localVar هنا
}
//console.log(localVar); // سيؤدي إلى خطأ، لأن localVar ليس متاحًا خارج الدالة
// مثال باستخدام let
let x = 10;
function letExample() {
let y = 5;
if (true) {
let x = 20; // يمكن إعادة تعريف x في هذا النطاق
console.log(x); // سيكون القيمة هنا 20
console.log(y); // يمكن الوصول إلى y هنا
}
console.log(x); // سيكون القيمة هنا 10
//console.log(y); // سيؤدي إلى خطأ، لأن y ليس متاحًا هنا
}
// مثال باستخدام const
const PI = 3.14;
function constExample() {
const PI = 3.1415;
console.log(PI); // سيكون القيمة هنا 3.1415
// PI = 4; // سيؤدي إلى خطأ، لأنه لا يمكن إعادة تعيين قيمة const
}
// استدعاء الأمثلة
varExample();
letExample();
constExample();
</script>
</body>
</html>
في هذا المثال:
يظهر المتغير globalVar كمتغير var على المستوى العام.
تظهر المتغيرات x و y كمتغيرات let داخل دالة letExample() مع قدرتها على إعادة تعريف x داخل الكتلة.
يظهر المتغير PI كمتغير const ويُظهر أنه لا يمكن إعادة تعيين قيمته.
يرجى ملاحظة أن هذا المثال يمكن تشغيله في متصفح الويب، ولكن يفضل استخدام أدوات تطوير المتصفح (مثل وحدة تحكم المطورين) لرؤية السجل في وحدة التحكم لفهم تنفيذ الشيفرة.
خصائص كل نوع من let , var, const
دعنا نشرح خصائص كل نوع من المتغيرات في JavaScript: let، var، و const.
var:
نطاق النطاق (Scope): يتميز var بأنه يكون له نطاق واسع ويكون متاحًا في كل مكان داخل الدالة التي تم تعريفه فيها، أو على مستوى النطاق العام إذا كان خارج أي دالة.
Hoisting (الرفع): يتم رفع تعريف المتغيرات var إلى أعلى النطاق، مما يعني أنه يمكنك استخدام المتغير قبل تعريفه في الشيفرة.
let:
نطاق النطاق (Scope): let يأتي مع نطاق “block scope”، وهو محدود داخل السطر (الكتلة) التي تم فيها تعريفه.
Hoisting (الرفع): let لا يُرفَع إلى أعلى النطاق، ولذلك لا يمكنك استخدام المتغير قبل تعريفه.
إعادة التعريف (Reassignment): يمكن إعادة تعريف قيمة المتغير let في نفس النطاق.
const:
نطاق النطاق (Scope): const يشترك في نفس نطاق “block scope” كـ let.
Hoisting (الرفع): كـ let، const لا يُرفَع إلى أعلى النطاق، وبالتالي لا يمكن استخدام المتغير قبل تعريفه.
ثبات القيمة (Value immutability): تُستخدم const لتعريف متغيرات ثابتة، وهي التي لا يمكن إعادة تعيين قيمتها بعد التعريف.
ملاحظات عامة:
يُفضل استخدام let لتعريف المتغيرات إذا كنت تحتاج إلى إعادة تعريف القيمة.
يُفضل استخدام const عندما تكون القيمة ثابتة ولا تحتاج للتغيير.
يُفضل تجنب استخدام var في الأكواد الحديثة نظرًا لقيود نطاق النطاق وسلوك الرفع الذي قد يؤدي إلى سلوك غير متوقع.
على سبيل المثال:
// مثال باستخدام var
var x = 10;
if (true) {
var x = 20;
}
console.log(x); // سيكون القيمة هنا 20
// مثال باستخدام let
let y = 10;
if (true) {
let y = 20;
}
console.log(y); // سيكون القيمة هنا 10
// مثال باستخدام const
const z = 10;
// z = 20; // سيؤدي إلى خطأ، لا يمكن إعادة تعيين const
هذه هي الخصائص الرئيسية لكل نوع من المتغيرات في JavaScript.
مثال كامل في صفحة ويب تشمل خصائص كل نوع
مثال كامل على صفحة ويب يوضح خصائص كل نوع من المتغيرات var، let، و const:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Variables Example</title>
</head>
<body>
<h1>JavaScript Variables Example</h1>
<script>
// مثال باستخدام var
var globalVar = "I am a global variable";
function varExample() {
var localVar = "I am a local variable";
ce.logonsol("Inside varExample():", globalVar); // يمكن الوصول إلى globalVar هنا
document.write("Inside varExample():", localVar); // يمكن الوصول إلى localVar هنا
}
document.write("Outside any function:", globalVar); // يمكن الوصول إلى globalVar هنا
//document.write(localVar); // سيؤدي إلى خطأ، لأن localVar ليس متاحًا خارج الدالة
// مثال باستخدام let
let x = 10;
function letExample() {
let x = 5; // يمكن إعادة تعريف x في هذا النطاق
let y = 20;
if (true) {
let x = 30; // يمكن إعادة تعريف x في هذا النطاق أيضًا
document.write("Inside if block:", x); // سيكون القيمة هنا 30
document.write("Inside if block:", y); // يمكن الوصول إلى y هنا
}
document.write("Outside if block:", x); // سيكون القيمة هنا 5
document.write("Outside if block:", y); // سيكون القيمة هنا 20
//document.write("Outside function:", x); // سيؤدي إلى خطأ، لأن x ليس متاحًا هنا
}
// مثال باستخدام const
const PI = 3.14;
function constExample() {
const PI = 3.1415; // لا يمكن إعادة تعيين قيمة const
document.write("Inside constExample():", PI); // سيكون القيمة هنا 3.1415
// PI = 4; // سيؤدي إلى خطأ، لا يمكن إعادة تعيين const
}
// استدعاء الأمثلة
varExample();
letExample();
constExample();
</script>
</body>
</html>
في هذا المثال:
يظهر المتغير globalVar كمتغير var على المستوى العام.
يظهر المتغيرات x و y كمتغيرات let داخل دالة letExample() مع إعادة تعريف x في نفس النطاق.
يظهر المتغير PI كمتغير const، ويُظهر أنه لا يمكن إعادة تعيينه.
تحذير: يفضل تجربة هذا المثال في متصفح الويب مع استخدام أدوات تطوير المتصفح (مثل وحدة تحكم المطورين) لرؤية السجل في وحدة التحكم وفهم سير الشيفرة.
تطبيق على هذا الدرس
لإنشاء تطبيق بسيط يستخدم المتغيرات var، let، و const، يمكنك استخدام HTML لإنشاء واجهة المستخدم وJavaScript لتنفيذ الكود. في هذا المثال،
سنقوم بإنشاء تطبيق واجهة بسيط يظهر قيم المتغيرات في المتصفح. يمكنك نسخ الكود التالي وحفظه في ملف HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables App</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
div {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Variables App</h1>
<div id="varOutput"></div>
<div id="letOutput"></div>
<div id="constOutput"></div>
<script>
// متغير var
var globalVar = "I am a global variable";
document.getElementById("varOutput").innerHTML = "<strong>var:</strong> " + globalVar;
// متغير let
let x = 10;
function letExample() {
let x = 5;
let y = 20;
if (true) {
let x = 30;
document.getElementById("letOutput").innerHTML = "<strong>let:</strong> " + x + ", " + y;
}
document.getElementById("letOutput").innerHTML += "<br>Outside if block: " + x + ", " + y;
}
letExample();
// متغير const
const PI = 3.14;
document.getElementById("constOutput").innerHTML = "<strong>const:</strong> " + PI;
</script>
</body>
</html>
في هذا التطبيق:
تم إنشاء واجهة بسيطة تعرض قيم المتغيرات باستخدام عناصر div.
تم استخدام document.getElementById لتحديد عنصر HTML وتحديثه بقيم المتغيرات في JavaScript.
بمجرد حفظ هذا الملف كـ “index.html”، يمكنك فتحه في متصفح الويب لرؤية التطبيق. ستظهر قيم المتغيرات في الصفحة، وستشير إلى استخدام var، let، و const في تطبيق JavaScript.
اختبار اختيار من متعدد يتعلق بدرس المتغيرات في JavaScript، مع الإجابات الصحيحة وشرح لكل سؤال:
السؤال 1:
ما هو النطاق الذي يتميز به المتغير var في JavaScript؟
أ) Block Scope
ب) Global Scope
ج) Local Scope
د) Function Scope
الإجابة الصحيحة: ب) Global Scope
الشرح: المتغيرات var تكون لها نطاق واسع يعرف بأنه “Global Scope”، حيث يكون المتغير متاحًا في كل مكان داخل الدالة التي تم تعريفه فيها أو على مستوى النطاق العام إذا كان خارج أي دالة.
السؤال 2:
ما هو النطاق الذي يتميز به المتغير let في JavaScript؟
أ) Global Scope
ب) Block Scope
ج) Local Scope
د) Function Scope
الإجابة الصحيحة: ب) Block Scope
الشرح: المتغيرات let تتميز بنطاق يسمى “Block Scope”، حيث يكون محدودًا داخل الكتلة (block) التي تم فيها تعريفه.
السؤال 3:
ما هي خاصية hoisting (الرفع) في JavaScript؟
أ) إعادة ترتيب الشيفرة
ب) رفع تعريف المتغيرات إلى أعلى النطاق
ج) تأخير تنفيذ الشيفرة
د) إعادة تعريف الدوال
الإجابة الصحيحة: ب) رفع تعريف المتغيرات إلى أعلى النطاق
الشرح: hoisting هو سلوك يتيح رفع تعريف المتغيرات var إلى أعلى النطاق قبل تنفيذ الشيفرة.
السؤال 4:
ما هو النطاق الذي يتميز به المتغير const في JavaScript؟
أ) Global Scope
ب) Block Scope
ج) Local Scope
د) Function Scope
الإجابة الصحيحة: ب) Block Scope
الشرح: المتغيرات const تتميز بنفس نطاق “Block Scope” كمتغيرات let.
السؤال 5:
ما هي خاصية الثبات (value immutability) التي تتعلق بالمتغيرات const؟
أ) القدرة على إعادة تعيين القيمة
ب) القدرة على إعادة تعريف القيمة
ج) القيمة الثابتة لا يمكن تغييرها بعد التعريف
د) القيمة الثابتة تغير فقط في النطاق العام
الإجابة الصحيحة: ج) القيمة الثابتة لا يمكن تغييرها بعد التعريف
الشرح: المتغيرات const تستخدم لتعريف متغيرات ثابتة لا يمكن إعادة تعيين قيمتها بعد التعريف.
السؤال 6:
كيف يمكن استخدام متغير var خارج الدالة التي تم تعريفها فيها؟
أ) يمكن استخدامه بشكل طبيعي.
ب) يجب استخدامه داخل الدالة فقط.
ج) يجب إعادة تعريفه في النطاق العام.
د) يتم رفض استخدامه خارج الدالة.
الإجابة الصحيحة: أ) يمكن استخدامه بشكل طبيعي.
الشرح: المتغيرات var تكون متاحة في كل مكان داخل الدالة التي تم تعريفها فيها أو على مستوى النطاق العام إذا كانت خارج أي دالة.
السؤال 7:
لماذا يستخدم المطورون let بدلاً من var في كثير من الأحيان؟
أ) لأن let يتيح إعادة تعريف المتغير في نفس النطاق.
ب) لأن let يحظر إعادة تعريف المتغير في نفس النطاق.
ج) لأن let يتمتع بنطاق أوسع من var.
د) لأن let يتمتع بخاصية الرفع (hoisting) أكثر من var.
الإجابة الصحيحة: أ) لأن let يتيح إعادة تعريف المتغير في نفس النطاق.
الشرح: let يسمح بإعادة تعريف المتغير في نفس النطاق، مما يجعله خيارًا مفضلًا في بعض الحالات.
السؤال 8:
متى يحدث hoisting في JavaScript؟
أ) قبل تنفيذ الشيفرة.
ب) بعد تنفيذ الشيفرة.
ج) فقط عند استخدام let.
د) فقط عند استخدام const.
الإجابة الصحيحة: أ) قبل تنفيذ الشيفرة.
الشرح: hoisting يحدث قبل تنفيذ الشيفرة، حيث يتم رفع تعريف المتغيرات var إلى أعلى النطاق.
السؤال 9:
ما هو الغرض الرئيسي من استخدام const في JavaScript؟
أ) تعريف متغيرات ذات قيم متغيرة.
ب) تعريف متغيرات ثابتة لا يمكن تغيير قيمتها.
ج) تعريف متغيرات يمكن إعادة تعريفها في نفس النطاق.
د) تعريف متغيرات يمكن تغيير قيمتها في أي وقت.
الإجابة الصحيحة: ب) تعريف متغيرات ثابتة لا يمكن تغيير قيمتها.
الشرح: المتغيرات const تستخدم لتعريف متغيرات ثابتة لا يمكن إعادة تعيين قيمتها بعد التعريف.
السؤال 10:
ما هي الخاصية المشتركة بين let و const فيما يتعلق بنطاق النطاق (Scope)؟
أ) Global Scope
ب) Block Scope
ج) Local Scope
د) Function Scope
الإجابة الصحيحة: ب) Block Scope
الشرح: كل من let و const يتميزان بنفس نطاق “Block Scope”.