اكتشف المفتاح لفتح الإمكانات الكاملة لبرمجة JavaScript – ” المتغيرات ” تعرف على سبب أهمية المتغيرات في إنشاء تطبيقات ويب ديناميكية وتفاعلية وسريعة الاستجابة. استكشاف أنواع مختلفة من المتغيرات وقدراتها الفريدة لتخزين البيانات والقيم. أتقن المهارات اللازمة لإنشاء وتنفيذ المتغيرات في كود JavaScript الخاص بك اليوم
يمكنك إنشاء المتغيرات باستخدام الكلمة الرئيسية “var” أو “let” أو “const”. وتسمح هذه المتغيرات بتخزين القيم والبيانات المختلفة مثل الأرقام والسلاسل والكائنات. يمكنك تعيين قيم للمتغيرات واستدعائها في جميع أنحاء برنامجك النصي.
المتغيرات في جافاسكريبت Variables in JavaScript
var
- يُستخدم لتعريف متغيرات قابلة للتغيير في أي مكان داخل الدالة التي يتم فيها تعريفها.
- يمكن إعادة تعريف المتغيرات المُعرفة باستخدام “var”.
- يتم رفع المتغيرات المُعرفة باستخدام “var” إلى أعلى نطاقها (hoisted).
مثـــــــــــــــــــال
// تعريف متغير
var x = 10;
// إعادة تعريف المتغير
var x = 20;
// إعلان متغير داخل الدالة واستخدامه خارجها
function example() {
var y = 30;
console.log(y); // يطبع: 30
}
example();
console.log(y); // يطلق خطأ: y is not defined
// الرفع (hoisting) - يمكن استخدام المتغير قبل تعريفه
console.log(z); // يطبع: undefined
var z = 40;
- يُلاحظ أنه بالإمكان إعادة تعريف المتغيرات المعرفة باستخدام “var”، وأنها تُرفع (hoisted) إلى أعلى نطاقها.
let
- يُستخدم لتعريف متغيرات قابلة للتغيير في نطاق الكتلة (block-scoped).
- لا يمكن إعادة تعريف المتغيرات المُعرفة باستخدام “let”.
- لا يتم رفع المتغيرات المُعرفة باستخدام “let”.
مثـــــــــــــــــــال
// تعريف متغير
let x = 10;
// إعادة تعريف المتغير - يُطلق SyntaxError
let x = 20;
// إعلان متغير داخل الدالة واستخدامه خارجها
function example() {
let y = 30;
console.log(y); // يطبع: 30
}
example();
console.log(y); // يطلق خطأ: y is not defined
// الرفع (hoisting) - لا يمكن استخدام المتغير قبل تعريفه
console.log(z); // يطلق خطأ: Cannot access 'z' before initialization
let z = 40;
- يُلاحظ أنه لا يمكن إعادة تعريف المتغيرات المعرفة باستخدام “let”، وأنها غير معرفة قبل تعريفها (لا يتم رفعها).
const
- يُستخدم لتعريف متغيرات لا يمكن تغيير قيمتها (immutable)، ولكن يمكن تغيير خصائص الكائنات المُعرفة باستخدامه.
- يجب تعيين قيمة أولية للمتغير عند تعريفه مع “const”.
- لا يمكن إعادة تعريف المتغيرات المُعرفة باستخدام “const”.
- تُعامل المتغيرات المُعرفة باستخدام “const” كمتغيرات ذات نطاق الكتلة (block-scoped).
مثـــــــــــــــــــال
// تعريف متغير ثابت
const PI = 3.14;
// إعادة تعريف المتغير - يُطلق SyntaxError
const PI = 3.14159;
// تعريف متغير ثابت مع كائن
const person = {
name: 'John',
age: 30
};
// يمكن تغيير خصائص الكائن المعرف باستخدام const
person.age = 31;
console.log(person); // يطبع: { name: 'John', age: 31 }
// لا يمكن إعادة تعريف المتغير
person = {}; // يُطلق TypeError: Assignment to constant variable.
// الرفع (hoisting) - لا يمكن استخدام المتغير قبل تعريفه
console.log(PI); // يطلق SyntaxError: Cannot access 'PI' before initialization
const PI = 3.14;
- يُلاحظ أنه لا يمكن إعادة تعريف المتغيرات المعرفة باستخدام “const”، وأنها غير قابلة للتغيير بعد تعريفها. ومع ذلك، يمكن تغيير خصائص الكائنات التي تم تعريفها باستخدام “const”.
مثـــــــــــــــــــال يجمع المتغيرات
- مثال يستخدم المتغيرات “var”، “let”، و “const” ويظهر خصائصها:
// استخدام var
var nameVar = "John";
console.log("Value of nameVar:", nameVar); // يطبع: Value of nameVar: John
nameVar = "Alice";
console.log("Value of nameVar after reassigned:", nameVar); // يطبع: Value of nameVar after reassigned: Alice
// استخدام let
let nameLet = "Bob";
console.log("Value of nameLet:", nameLet); // يطبع: Value of nameLet: Bob
// nameLet = "Eve"; // إذا قمت بإلغاء تعليق هذا السطر، ستحصل على TypeError
console.log("Value of nameLet after reassigned:", nameLet); // يطبع: Value of nameLet after reassigned: Bob
// استخدام const
const nameConst = "Charlie";
console.log("Value of nameConst:", nameConst); // يطبع: Value of nameConst: Charlie
// nameConst = "David"; // إذا قمت بإلغاء تعليق هذا السطر، ستحصل على TypeError
console.log("Value of nameConst after reassigned:", nameConst); // يطبع: Value of nameConst after reassigned: Charlie
// مثال مع الكائنات
const person = {
firstName: "John",
lastName: "Doe",
age: 30
};
console.log("Person:", person); // يطبع: Person: { firstName: 'John', lastName: 'Doe', age: 30 }
person.age = 31; // يمكن تغيير خصائص الكائنات المعرفة باستخدام const
console.log("Person after age change:", person); // يطبع: Person after age change: { firstName: 'John', lastName: 'Doe', age: 31 }
- هذا المثال يظهر كيفية استخدام “var”، “let”، و “const” في جافاسكريبت، وكيف يمكن إعادة تعريف المتغيرات في حالة “var” و “let” وكيف تكون المتغيرات الثابتة “const” غير قابلة لإعادة التعيين. كما يظهر المثال أيضًا كيف يمكن تغيير خصائص الكائنات التي تم تعريفها باستخدام “const”.
مصادر اخري لتعلم جافا سكريبت:
1. MDN Web Docs – JavaScript Guide : مصدر رائع للمبتدئين والمتقدمين، يغطي جميع جوانب جافا سكريبت بطريقة مفصلة وبأسلوب سهل الفهم. [الرابط] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
2. freeCodeCamp : يوفر دورات تعليمية مجانية عبر الإنترنت لتعلم جافا سكريبت والعديد من التقنيات الأخرى لتطوير الويب. [الرابط] https://www.freecodecamp.org/learn/
3. JavaScript.info : موقع يقدم دورات تعليمية شاملة لجافا سكريبت، تبدأ من المستوى الأساسي وتصل إلى المتقدم. [الرابط] https://javascript.info/
هذه الروابط يمكن أن تكون مفيدة لك لبدء رحلتك في تعلم جافا سكريبت أو تعميق معرفتك بها إذا كنت متقدمًا بالفعل. استمتع بالتعلم
Sharing to
