EduFlow
أساسيات JavaScript
⁦0%⁩

الوحدة 1 · الخطوات الأولى

القيم وأنواع البيانات والمتغيّرات

17 دقراءة 3 دبيئة تجريب الكود

الدرس في لمحة

تتعرّف على أنواع القيم الأساسية في JavaScript، وتفحصها باستخدام typeof، وتخزّن القيم في متغيّرات باستخدام const وlet، وتختار المناسب منهما في كل مرة.

  1. 1القيم وأنواعها
  2. 2تسمية القيم باستخدام const وlet
  3. 3النوع للقيمة، لا للمتغيّر
  4. 4الأسماء: القواعد والعادات

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

يحتاج Pocket إلى أن يتذكّر أشياء: اسم التطبيق، وكم أنفقت اليوم، وهل تجاوزت ميزانيتك. يتذكّر البرنامج بأن يحتفظ بـ قيم ويمنحها أسماء. وقبل أن تفعل أي شيء مثير، عليك أن تعرف أنواع القيم الموجودة وكيف تسمّيها.

القيم وأنواعها

القيمة قطعة واحدة من البيانات. ولكل قيمة نوع بيانات (type)، وهو الذي يحدّد ما يمكنك فعله بها. هذه الأنواع الخمسة تغطّي معظم ما ستتعامل معه في أسابيعك الأولى:

النوع أمثلة يُستخدم لـ
number 42، 4.5، -3 المبالغ والأعداد والقياسات
string "Coffee"، 'food' أي نص
boolean true، false إجابات نعم/لا
undefined undefined “لم تُعطَ أي قيمة بعد”
null null “فارغ عن قصد”

العامل typeof يخبرك بنوع أي قيمة. شغّل هذا الكود وقارن كل سطر بالجدول:

JavaScript
console.log(typeof 42);
console.log(typeof "Coffee");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

أربع إجابات تطابق الجدول. أما الأخيرة فتقول "object"، وهذا خطأ يعود إلى عام 1995 ولا يمكن إصلاحه أبدًا لأن ملايين المواقع تعتمد عليه. حين تحتاج إلى معرفة إن كان شيء ما null، قارنه بها مباشرة: value === null.

هناك نوعان أساسيان آخران: bigint (للأعداد الصحيحة الضخمة) وsymbol (للعلامات الفريدة)، ونادرًا ما ستحتاجهما كمبتدئ. وكل ما عدا ذلك، مثل القوائم والسجلّات، هو كائن (object)، والقسم 3 مخصّص لها بالكامل.

تسمية القيم باستخدام const وlet

المتغيّر (variable) اسم يشير إلى قيمة. تُنشئه بـ تصريح (declaration):

JavaScript
const appName = "Pocket";
let spentToday = 0;

spentToday = spentToday + 4.5;
spentToday = spentToday + 12;

console.log(appName, "spent today:", spentToday);

اقرأ السطر 4 كما يقرؤه المحرّك: أولًا يحسب الطرف الأيمن، spentToday + 4.5، أي 0 + 4.5، فالناتج 4.5. ثم يوجّه الاسم spentToday إلى هذه القيمة الجديدة. علامة = تعني “اجعل هذا الاسم يشير إلى”، وليس “يساوي”. ولهذا تجد x = x + 1 منطقية في الكود مع أنها هراء في الرياضيات.

الاسم appName يشير إلى النص Pocket ولا يمكنه التحرّك أبدًا. أما الاسم spentToday فيشير أولًا إلى 0، ثم إلى 4.5، ثم إلى 16.5، وكل إعادة إسناد تنقل السهم إلى قيمة جديدة. const appName "Pocket" let spentToday 0 4.5 16.5 القيمة الحالية
إعادة إسناد let تنقل الاسم إلى قيمة جديدة

const تُنشئ اسمًا لا يمكن توجيهه إلى أي مكان آخر أبدًا، وlet تُنشئ اسمًا يمكن توجيهه. اتّبع هذه القاعدة: صرّح بـ const افتراضيًا، ولا تغيّرها إلى let إلا حين تكتشف أنك تحتاج إلى إعادة الإسناد. معظم الأسماء في البرامج الحقيقية لا تتغيّر أبدًا، وconst تخبر القارئ التالي أن بإمكانه التوقّف عن القلق بشأنها.

سترى أيضًا كلمة مفتاحية ثالثة، var، في الشروحات القديمة وإجابات Stack Overflow. إنها الطريقة الأصلية للتصريح بالمتغيّرات، ولها قواعد نطاق تسبّب أخطاء (سترى السبب في درس النطاق). الكود الحديث لا يستخدمها.

النوع للقيمة، لا للمتغيّر

في JavaScript لا يملك المتغيّر نوعًا خاصًا به. إنه يشير إلى قيمة، والقيمة هي التي لها نوع. لذلك يمكن لمتغيّر let أن يشير إلى رقم الآن وإلى نص لاحقًا:

JavaScript
let note = 12;
console.log(typeof note);
note = "twelve dollars";
console.log(typeof note);

تُسمّى هذه المرونة الكتابة الديناميكية للأنواع (dynamic typing). إنها مريحة، وهي أيضًا بداية كثير من أخطاء المبتدئين: يتحوّل رقم إلى نص بصمت، فيصبح مجموعك "1212". يُريك الدرسان التاليان متى يحدث ذلك بالضبط.

الأسماء: القواعد والعادات

القواعد: يمكن أن يحتوي الاسم على حروف وأرقام و_ و$، ولا يجوز أن يبدأ برقم، ولا أن يكون كلمة محجوزة مثل const أو if. والأسماء حسّاسة لحالة الأحرف، فـ total وTotal متغيّران مختلفان.

أما العادات التي يتّبعها كل مشروع JavaScript: اكتب الأسماء بأسلوب camelCase (spentToday، monthlyBudget)، واجعلها تقول ما تعنيه القيمة، لا ما نوعها. spentToday أفضل من num1، وisOverBudget أفضل من flag. وأسماء القيم المنطقية (booleans) تبدأ عادةً بـ is أو has أو can.

خطآن ستقابلهما أثناء التدرّب:

  • ReferenceError: spent is not defined يعني أنك استخدمت اسمًا لم يُصرَّح به قط، وغالبًا بسبب خطأ إملائي.
  • ReferenceError: Cannot access 'spent' before initialization يعني أنك استخدمت متغيّر let أو const في سطر يسبق التصريح به. صرّح أولًا، ثم استخدم.

في الدرس التالي تبدأ إجراء العمليات الحسابية على أرقامك، وستكتشف لماذا لا تساوي 0.1 + 0.2 القيمة 0.3 تمامًا.

أهم النقاط

  • لكل قيمة نوع؛ والأنواع الأساسية هي number وstring وboolean وundefined وnull، وtypeof تخبرك بنوع القيمة التي بين يديك.
  • المتغيّر اسم يشير إلى قيمة؛ النوع للقيمة، لا للمتغيّر.
  • صرّح بالمتغيّر باستخدام const افتراضيًا، ولا تنتقل إلى let إلا حين يجب أن يشير الاسم إلى قيمة أخرى لاحقًا.
  • إعادة إسناد قيمة لـ const ترمي خطأ TypeError، واستخدام اسم قبل التصريح به يرمي خطأ ReferenceError.

قراءات إضافية

تحقّق من فهمك

4 أسئلة

السؤال 1 من 4

ماذا يطبع هذا الكود؟

JavaScript
let total = 10;
total = total + 5;
console.log(typeof total, total);
السؤال 2 من 4

تخزّن اسم التطبيق، "Pocket"، وهو لا يتغيّر أبدًا، وعدد المصاريف المُدخلة حتى الآن، وهو يزداد. أيّ التصريحات أنسب؟

السؤال 3 من 4

ماذا تُرجع typeof null؟

السؤال 4 من 4

أيّ سطر يرمي الخطأ TypeError: Assignment to constant variable.؟

تدريب

بيئة تجريب الكود

تتبّع ما أنفقته

لدى Pocket ميزانية شهرية monthlyBudget قدرها 2000. صرّح بمتغيّر spent يبدأ من 0، ثم أعِد إسناده مرتين لتضيف مصروفًا قدره 45 وآخر قدره 120. صرّح بـ remaining على أنه monthlyBudget ناقص spent، واطبع نوع remaining. أبقِ monthlyBudget مُصرَّحًا به بـ const.

const appName = "Pocket";
const monthlyBudget = 2000;

// 1. Declare spent, starting at 0
// 2. Add an expense of 45 to spent, then one of 120
// 3. Declare remaining: the budget minus what was spent
// 4. Log the type of remaining
جارٍ تحميل المحرّر…

Ctrl/⌘ + Enter للتشغيل · يعمل في بيئة معزولة داخل متصفّحك. لا شيء يغادر جهازك.

الـ console

(لا مخرجات)

الفحوص

  • قيمة spent تنتهي إلى 165
  • قيمة remaining هي 1835
  • تطبع نوع remaining (number)
  • monthlyBudget ما زال const لا يمكن إعادة إسناده