×
تدريب — المتغيرات (Variables) في JavaScript

📦 المتغيرات (Variables) في JavaScript

تعرف على كيفية تعريف واستخدام المتغيرات في JavaScript

🎯 ما ستتعلمه في هذا التدريب

هذا التدريب التفاعلي سيساعدك على إتقان المتغيرات في JavaScript من خلال:

  • 68 سؤال تفاعلي متنوع يشمل اختيار متعدد، تكملة الكود، وسحب وإفلات
  • ✅ فهم الفروق بين var، let، const
  • ✅ إتقان مفاهيم النطاق (Scope) والرفع (Hoisting)
  • ✅ فهم القيم الافتراضية للمتغيرات
  • ✅ التعامل مع الكلمات المحجوزة في تسمية المتغيرات
  • ✅ إمكانية إعادة التدريب لتحسين مستواك وتعزيز المفاهيم

ما هو المتغير؟

المتغير هو حاوية تُستخدم لتخزين البيانات في الذاكرة. يمكن أن تتغير قيمته أثناء تشغيل البرنامج، ومن هنا جاء الاسم "متغير".

// مثال: تعريف متغير وتخزين قيمة فيه
let userName = "أحمد";
let userAge = 25;
let isActive = true;

🧠 1️⃣ أنواع تعريف المتغيرات في JavaScript

✅ var (قديمًا)

  • تُستخدم لتعريف المتغيرات بطريقة تقليدية
  • نطاقه (scope) يكون داخل الدالة أو عالميًا
  • لا يُفضل استخدامها حاليًا

✅ let

  • تُستخدم لتعريف متغير يمكن تغيير قيمته لاحقًا
  • لها نطاق محلي داخل الكتلة ({}) التي عُرّف فيها
  • الخيار المفضل للمتغيرات المتغيرة

✅ const

  • تُستخدم لتعريف متغير لا يمكن تغيير قيمته بعد تعريفه
  • نطاقه أيضًا محلي داخل الكتلة ({})
  • الخيار المفضل للقيم الثابتة
// أمثلة عملية:
var oldWay = "طريقة قديمة"; // ❌ غير موصى بها
let counter = 0; // ✅ متغير قابل للتغيير
const API_KEY = "abc123"; // ✅ قيمة ثابتة
counter = 1; // ✅ مسموح (let)
// API_KEY = "xyz"; // ❌ خطأ! const لا يمكن تغييرها

🏷️ 2️⃣ أنواع قيم المتغيرات في JavaScript

// 1. الأعداد (Numbers)
var age = 25;
var price = 9.99;

// 2. النصوص (Strings)
var name = "Ahmed";
var message = 'Hello!';

// 3. القيم المنطقية (Booleans)
var isRaining = true;
var isLoggedIn = false;

// 4. المصفوفات (Arrays)
var colors = ["red", "green", "blue"];

// 5. الكائنات (Objects)
var player = {
  name: "Ali",
  score: 100
};

📝 3️⃣ قواعد كتابة المتغيرات

لتعريف متغير صحيح في JavaScript، يجب اتباع القواعد التالية:

  • 1. يجب أن يبدأ الاسم بحرف أو علامة $ أو _
  • 2. لا يمكن أن يبدأ برقم
  • 3. لا يمكن أن يحتوي على مسافات
  • 4. أسماء المتغيرات حساسة لحالة الأحرف (name ≠ Name)
  • 5. لا تستخدم كلمات محجوزة (مثل for, if, let, class)
// ✅ أسماء متغيرات صحيحة:
let userName = "أحمد";
let _privateData = "سري";
let $element = document.getElementById('id');
let firstName = "محمد";

// ❌ أسماء متغيرات خاطئة:
// let 1stName = "أحمد"; // يبدأ برقم
// let user name = "محمد"; // يحتوي على مسافة
// let for = 5; // كلمة محجوزة
// let let = "test"; // كلمة محجوزة

🌐 4️⃣ مجال النطاق (Scope)

النطاق يحدد أين يمكن الوصول إلى المتغير:

// النطاق العام (Global Scope)
var globalVar = "أنا عام";

// النطاق الدالي (Function Scope) - خاص بـ var
function testVar() {
  var functionVar = "أنا دالي";
  console.log(functionVar); // ✅ يمكن الوصول
}
// console.log(functionVar); // ❌ خطأ! خارج النطاق

// النطاق الكتلي (Block Scope) - خاص بـ let و const
if (true) {
  let blockVar = "أنا كتلي";
  const BLOCK_CONST = "أنا ثابت كتلي";
}
// console.log(blockVar); // ❌ خطأ! خارج النطاق