وفقًا للمواصفات، قد تكون مفاتيح خصائص الكائنات من نوع نصي (string) أو رمزي (Symbol)، ولا تكون أرقامًا ولا قيمًا منطقية، إما نصًا أو رمزًا فقط.

حتى الآن، استخدمنا النوع النصي فقط. الآن، لنرى فوائد النوع الرمزي.

الرموز

يُمَثِّل الرمز مُعَرِّفًا فريدًا، ويمكن إنشاء قيمة من هذا النوع باستخدام Symbol()‎:

// هو رمز جديد id 
let id = Symbol();

يمكننا إعطاء وصف للرمز أثناء الإنشاء (ما يُسمَّى أيضًا باسم الرمز)، ويكون مفيدًا لعملية تصحيح الأخطاء:

// "id" هو رمز مع الوصف id
let id = Symbol("id");

تتصف الرموز بكونها فريدة حتى إن أنشأنا أكثر من رمز بالوصف ذاته، تبقى الرموز قيمًا مختلفة. يُعد الوصف مجرد طابع ولا يؤثر على أي شيء.

مثلًا، هنا رمزين بالوصف ذاته لكنهما غير متساويان:

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

إن كانت لديك خلفية عن لغة Ruby أو أي لغة برمجية أخرى تستخدم الرموز فلا تخلط الأمور. فالرموز في JavaScript مختلفة.

لا تتحول الرموز تلقائيًا إلى نص

تتضمن أغلب القيم في JavaScript تحويلًا ضمنيًا إلى نص. مثلًا، يمكننا عرض أي قيمة تقريبا باستخدام alert وتعمل بشكل صحيح. لكن الرموز خاصة، فهي لا تتحول تلقائيًا. مثلا، أمر alert التالي سَيعرض خطأ:

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

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

إن كنا نريد عرض رمز ما، يجب أن نستدعي الدالة .toString()‎. كما في المثال التالي:

let id = Symbol("id");
alert(id.toString()); // Symbol(id), أصبحت تعمل الآن

أو استخدم الخاصية symbol.description لعرض الوصف فقط:

let id = Symbol("id");
alert(id.description); // id

خاصيات "خفية"

تتيح لنا الرموز إنشاء خاصيات "خفية" للكائن، والتي لا يمكن لأي شيفرة الوصول إليها وتغيير محتواها حتى عن طريق الخطأ. مثلا، إن كنا نتعامل مع كائنات تنتمي إلى شيفرة من طرف ثالث ونريد إضافة مُعرفات لها، نستخدم مفتاحًا رمزيًا لذلك:

let user = { // ينتمي لِشيفرة أخرى
  name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // يمكننا الوصول إلى البيانات باستخدام الرمز كمفتاح

ما الفائدة من استخدام Symbol("id")‎ على النص "id"؟ بما أن كائنات user تنتمي لِشيفرة أخرى، وبما أن الشيفرة أعلاه تتعامل معها فليس آمنًا إضافة أي حقل لها. لكن لا يمكن الوصول إلى الرمز حتى عن طريق الخطأ، قد لا تراه شيفرة الطرف الثالث أيضًا، لذا فإنها الطريقة الصحيحة للقيام بذلك.

تخيل أيضًا أن سكريبت آخر يريد إضافة معاملاته الخاصة بِداخل user لغرضه الخاص. قد يكون هذا السكريبت مكتبة JavaScript أخرى، لذا فإن كل سكريبت لا يعلم بتواجد الآخر بتاتًا، ثم يمكن لهذا السكريبت إنشاء رمزه الخاص Symbol("id")‎ هكذا:

// ...
let id = Symbol("id");

user[id] = "Their id value";

بهذه الطريقة، لن يوجد أي تعارض بين المُعاملات التي انشأناها ومُعاملات السكريبت الآخر لأن الرموز تختلف دومًا حتى إن كان لديها الاسم ذاته. لكن إن استخدمنا النص "id" بدلًا من الرمز للغرض ذاته، فَسيوجد تعارض:

let user = { name: "John" };

// "id" يستخدم السكربت الذي أنشأناه الخاصية 
user.id = "Our id value";

// لغرض آخر "id" يريد سكريبت آخر استخدام الخاصية

user.id = "Their id value"
// !تعارض! تم تغيير المحتوى من قِبل السكريبت الآخر

الرموز في التعريف المختصر لكائن

إن أردنا استخدام الرموز عند تعريف كائن بالطريقة المختصرة عبر الأقواس {...} فَسنحتاج إلى تغليفها بأقواس مربعة هكذا:

let id = Symbol("id");

let user = {
  name: "John",
  [id]: 123 // "id: 123" ليس 
};

ذلك لأننا نريد القيمة من المتغير id كمفتاح وليس النص "id".

تتخطى for…in الرموز

لا تشارك الخصائص الرمزية في الحلقة for..in. مثلًا:

let id = Symbol("id");
let user = {
  name: "John",
  age: 30,
  [id]: 123
};

for (let key in user) alert(key); // name, age (لا يوجد  رموز)

// يعمل الوصول المباشر للرمز 
alert( "Direct: " + user[id] );

يتجاهل Object.keys(user)‎ الرموز أيضًا. يُعد هذا من جزءًا من مبدأ "إخفاء الخاصيات الرمزية". إن حاول سكريبت آخر أو مكتبة JavaScript الدخول إلى كائن والتنقل فيه، فلن يصل إلى الخاصيات الرمزية بتاتًا.

في المقابل، تنسخ Object.assign كلًا من النصوص والخاصيات الرمزية:

let id = Symbol("id");
let user = {
  [id]: 123
};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

لا يوجد لَبسٌ هنا، فهذا الأمر ضمن التصميم. الفكرة هي أنه عند استنساخ كائن أو دمج كائنين، فإننا نريد أن تُنسَخ جميع الخصائص (بما فيها الرموز مثل id).

تُحوَّل مفاتيح الخاصيات التي من نوع آخر غير الرمز إلى نصوص جبريًا

يمكننا استخدام النصوص أو الرموز فقط كمفاتيح في الكائنات، ويُحوَّل أي نوع آخر إلى نص. مثلًا، الرقم 0 يصبح النص "0" عندما يستخدم كمفتاح لخاصية:

let obj = {
  0: "test" // "0": "test" مثل
};

// "إلى الخاصية ذاتها أي يحوَّل الرقم 0 إلى نص "0 alert تصل الدالة
alert( obj["0"] ); // اختبار
alert( obj[0] ); // (اختبار (الخاصية ذاتها

الرموز العامة

جميع الرموز تكون مختلفة دائمًا كما رأينا، حتى إن كانت تحمل الأسماء ذاتها. لكن قد نريد أحيانا أن تكون الرموز التي تحمل الاسم ذاته هي نفس الكائنات. مثلًا، تحتاج أجزاء متعددة في التطبيق الوصول إلى الرمز "id" ما يعني الخاصيات ذاتها.

لنتمكن من القيام بذلك، يوجد سجل للرموز العامة. يمكننا إنشاء رموز فيه والوصول إليها لاحقًا، كما يضمن أن الوصول المتكرر إلى الاسم ذاته يُرجِع الرمز ذاته في كل مرة.

لقراءة، أو إنشاء رمز في حال عدم تواجده في السجل، نستخدم Symbol.for(key)‎. يفحص هذا الاستدعاء السجل العام للرموز، إن كان هناك رمزًا بالوصف key، فإنه يُرجِعه، وإن لم يجده فإنه يُنشئ رمزًا جديدًا بالاستدعاء Symbol(key)‎ ويُخزِّنه في السجل بالوصف المُعطى key. إليك المثال التالي:

// يقرأ من السجل العام
let id = Symbol.for("id"); // إن لم يجد الرمز، ينشئه

// يُقرأ مجددًا، ربما من جزء آخر في الشيفرة
let idAgain = Symbol.for("id");

// الرمز ذاته
alert( id === idAgain ); // true

تُدعى الرموز داخل السجل العام رموزًا عامة، ونستعلمها في حال أردنا رمزًا على مستوى تطبيق كامل، وقابلًا للوصول في الشيفرة.

هذا الأمر مشابه لما في لغة Ruby

يوجد في بعض اللغات البرمجية مثل Ruby رمزًا واحدًا لكل اسم. كما رأينا، في JavaScript الأمر ذاته صحيح بالنسبة للرموز العامة.

Symbol.keyFor

بالنسبة للرموز العامة، ليس فقط الدالة Symbol.for(key)‎ تُرجِع الرمز وفقًا لاسمه، بل يوجد استدعاء عكسي: Symbol.keyFor(sym)‎، والتي تعكس ما تقوم به الأخرى: تُرجِع اسمًا بواسطة رمز عام. مثلًا:

// نَسترجع الرمز بالاسم
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

// نسترجع الاسم بالرمز
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id

تستخدم Symbol.keyFor سجل الرموز العام داخليًا للبحث عن مفتاح الرمز. لذا فإنها لا تعمل مع الرموز الغير عامة. إن كان الرمز غير عام، فلن يتمكن من العثور عليه وسيُرجِع undefined.

يمكن القول أن أي رمز لدية الخاصية description.

مثلا:

let globalSymbol = Symbol.for("name");
let localSymbol = Symbol("name");

alert( Symbol.keyFor(globalSymbol) ); // name, رمز عام
alert( Symbol.keyFor(localSymbol) ); // undefined, غير عام

alert( localSymbol.description ); // name

رموز النظام

يوجد العديد من رموز "النظام" التي تستخدمها JavaScript داخليًا، ويمكن استخدامها لضبط نواحي متعددة من الكائنات بدقة. هذه الرموز مُدرَجة في وصف جدول الرموز المتعارف عليها:

• Symbol.hasInstance
• Symbol.isConcatSpreadable
• Symbol.iterator
• Symbol.toPrimitive
• وهكذا…

مثلًا، يتيح لنا الرمز Symbol.toPrimitive وصف كائن إلى تحويل أولي. سنرى استخدامها قريبًا. ستعتاد على باقي الرموز عند دراسة ميزات اللغة المُقابلة.

الخلاصة

النوع Symbol هو نوع أولي للمُعاملات الفريدة. يتم إنشاء الرموز عبر استدعاء الدالة Symbol()‎ مع وصف اختياري (اسم).

الرموز تكون دائمًا مختلفة القيم حتى إن كان لها الاسم ذاته، أي تتصف بأنها فريدة. إن أردنا أن يكون الرمز بالاسم ذاته يجمل القيمة ذاتها، يجب أن نستخدم السجل العام: تُرجِع Symbol.for(key)‎ (وتُنشِئ في حال الحاجة) رمزًا عامًا بالمفتاح كاسم. تُرجِع الاستدعاءات العديدة لِلدالة Symbol.for باستخدام المفتاح ذاته الرمز نفسه.

لدى الرموز حالتي استخدام:

1. خاصيات الكائن "الخفية". إن أردنا إضافة خاصية إلى كائن ينتمي إلى سكريبت أو مكتبة أخرى، يمكننا إنشاء رمز واستخدامه كمفتاح خاصية. لا تظهر الخاصية الرمزية في for..in، حتى لا تتم معالجته عن طريق الخطأ مع باقي الخاصيات. لن يتم الوصول إليه مباشرةً أيضًا لأن السكريبت الخارجي لا يحوي على هذا الرمز. هكذا تكون الخاصية محمية من الاستخدام الخارجي. لذا، يمكننا إخفاء شيء ما بشكل تام في الكائنات التي نحتاجها، والتي لا يجب أن يراها الآخرون باستخدام الخاصيات الرمزية.
2. يوجد العديد من رموز النظام المستخدمة بواسطة JavaScript التي يمكن الوصول إليها بواسطة Symbol.*‎. يمكننا استخدامها لتعديل سلوك مُدمَج، مثلا، سنستخدم Symbol.iterato لاحقَا في الشرح للحلقات، و Symbol.toPrimitive لإعداد التحويل من كائن لقيمة أولية وهكذا…

عمليًا، الرموز ليست خفية 100%. يوجد دالة مدمجة Object.getOwnPropertySymbols(obj)‎ تتيح لنا الوصول إلى جميع الرموز. كما يوجد دالة تُدعى Reflect.ownKeys(obj)‎ والتي تُرجِع جميع مفاتيح الكائن بما فيها الرموز. لذا فإن الرموز ليست مخفية فعلًا، لكن أغلب المكاتب، والدوال المدمجة والهياكل لا تستخدم هذه الدوال.

ترجمة -وبتصرف- للفصل Symbol type من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: الدوال في الكائنات واستعمالها this
• المقال السابق: كنس البيانات المهملة

تُدَار الذاكرة في JavaScript تلقائيًا في الخفاء. نحن ننشئ المتغيرات الأولية، والكائنات، والدوال وجميعها تأخذ مكانًا في الذاكرة ولكن هل سألت نفسك ماذا يحدث عندما يصبح أحد هذه الأشياء مهملًا وغير مهم؟ كيف يكتشف ذلك مُحرِّك JavaScript ويتخلص منه؟ هذا ما سنعرفه في هذا الفصل.

قابلية الوصول

المبدأ الرئيسي لإدارة الذاكرة في JavaScript هو قابلية الوصول (reachability). ببساطة، القيم "القابلة للوصول" هي القيم التي يمكن الوصول إليها واستخدامها بطريقة ما وهذه القيم مخولة لتُخزَّن في الذاكرة.

1- يوجد مجموعة من القيم القابلة للوصول بطبيعة الحال والتي لا يمكن التخلص منها لأسباب وجيهة مثل:

• المتغيرات المحلية والمُعاملات للدالة الحاليِّة.
• المتغيرات والمُعاملات لدوال أخرى ضمن السلسلة الحالية في الاستدعاء المُتداخل.
• المتغيرات العامة.
• (بالإضافة إلى بعض المتغيرات الأخرى الداخلية)

تُدعى هذه القيم «جذورًا» (roots).

2- تكون أي قيمة أخرى قابلة للوصول إن كان بالإمكان الوصول إليها من جذر باستخدام مرجع أو سلسلة من المراجع. مثلًا، إن كان هناك كائن في متغير محلي، ولدى هذا الكائن خاصية تشير لكائن آخر، فإنَّ هذا الكائن قابل للوصول. وهذه الكائنات التي يُشار إليها قابلة للوصول أيضًا. ستجد أمثلة توضيحية لاحقًا.

يوجد عملية خلفيَّة في محرك JavaScript تُدعَى «كانس المهملات» (garbage collector) تعمل على مراقبة الكائنات وحذف التي لم تَعُد قابلة للوصول.

مثال بسيط

أبسط مثال هو:

// user يرجِع لكائن
let user = {
  name: "John"
};

يُصوِّر السهم في الصورة مرجعًا لكائن. المتغير العام "user" يشير للكائن {name: "John"‎} (سنُسميه John اختصارًا). الخاصية "name" للكائن John تُخزن قيمة أولية، لذ رُسمَت بداخل الكائن. إن استُبدلَت قيمة المتغير user، فَسَنفقد المرجع الذي يشير إلى الكائن John:

user = null;

أصبح الكائن John غير قابل للوصول الآن أي لا يوجد طريقة للوصول إليه. سيعمل كانس المهملات على حذف البيانات المتمثلة في الكائن John وتحرير الذاكرة التي يحتلها.

مرجعَان لكائن

لنفترض أننا نسخنا المرجع من المتغير user إلى متغير آخر باسم admin:

// user يرجِع لكائن
let user = {
  name: "John"
};

let admin = user;

إن قمنا بالأمر السابق ذاته الآن:

user = null;

فسيكون الكائن قابلًا للوصول من خلال المتغير العام admin، لذا يبقى في الذاكرة. إن استبدلنا محتوى المتغير admin أيضًا فسيُحذَف الكائن.

الكائنات المتداخلة

الآن ننتقل لمثال أكثر تعقيدًا. ألق نظرة على الشيفرة التالية:

function marry(man, woman) {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "John"
}, {
  name: "Ann"
});

تربط الدالة marry كائنين بجعل كلاهما يشير إلى الآخر ثم ترجِع كائنًا جديدًا يحوي كلاهما. هيكل الذاكرة الناتج يكون كالتالي:

تكون جميع البيانات قابلة للوصول حتى الآن. دعنا نجرب حذف مرجعين الآن:

delete family.father;
delete family.mother.husband;

ليس من الكافِ حذف أحد المرجِعين فقط، لأنَّ جميع الكائنات ستظل قابلة للوصول لكن إن حذفنا كلا المرجعين، فسنرى عدم وجود أي مرجع إلى الكائن John:

لا يهم وجود مرجع من الكائن، إذ ما يجعله قابلًا للوصول هو المراجع التي تشير إليه، لذا فإنَّ الكائن John أصبح غير قابل للوصول وسيُحذَف من الذاكرة مع جميع بياناته التي أصبحت غير قابلة للوصول أيضًا.

بعد تجميع البيانات الغير مرغوب بها، يبقى لدينا:

جزيرة غير قابلة للوصول

يمكن أن تصبح جزيرة من الكائنات المترابطة غير قابلة للوصول وتُحذَف من الذاكرة. الكائن الرئيسي هو الكائن أعلاه ذاته:

family = null;

تُصبح الصورة في الذاكرة كما يلي:

يوضح هذا المثال أهمية مبدأ قابلية الوصول. من الواضح أن الكائنين John و Ann ما زالا مرتبطين ولكل منهما مراجع لبعضهما، لكن ذلك غير كافٍ.

الكائن السابق "family" أصبح غير مربوط بالجذر، أي لم يعد هناك أي مرجع إليه لذا فإن الجزيرة كاملةً تصبح غير قابلة للوصول وتُحذَف.

الخوارزميات الداخلية

تُدعى الخوارزمية الأساسية لتجميع البيانات المهملة «الاستهداف والتمشيط» (mark-and-sweep)؛ تُنفَّذ خطوات جمع البيانات المهملة دوريًا وفق الخطوات التالية:

• يأخذ كانس المهملات الجذور ويحفظها (يُحدِّدها هدفًا له).
• ثم يُمشِّط جميع الإشارات الخارجة منها (مراجع لكائنات أخرى) ويحفظها لاستهدافها أيضًا.
• ثم يُمشِّط جميع الكائنات التي استهدفها مسبقًا ويحفظ مراجعها لاستهدفها لاحقًا. يُمشِّط جميع الكائنات بتلك الطريقة ويتذكرها لكي لا يُمشِّط أي كائن مرةً ثانية مستقبلًا.
• تستمر العملية مرارًا وتكرارًا حتى يصبح هناك مراجع لم تُمشَّط (غير قابلة للوصول من أي جذر).
• تُحذَف جميع الكائنات باستثناء تلك استُهدفَت وعُلِّمَت بأنَّها غير مهملة.

مثلًا، ليكن هيكل الكائنات لدينا كما يلي:

يمكن رؤية جزيرة غير قابلة للوصول في اليمين. الآن لنرى كيف يتعامل معها كانس المهملات وفق خوارزمية الاستهداف والتمشيط.

الخطوة الأولى هي تحديد الجذور:

ثم تُحدَّد المراجع التي تشير إليها:

تُحدَّد المراجع التي تشير لها هذه الكائنات أيضًا:

تُعدُّ الكائنات التي لم تُمشَّط أثناء العملية غير قابلة للوصول ويجري حذفها:

هذه الآلية التي يعمل بها كانس المهملات.

تطبق محركات JavaScript العديد من التحسينات لتحسين هذه الخوارزمية وتسريع عملها بطريقة لا تؤثر على سرعة التنفيذ.

بعض التحسينات:

• التجميع وفق الجيل: تُقَسَّم الكائنات إلى مجموعتين: "كائنات جديدة" و "كائنات قديمة". تُنشَأ العديد من الكائنات ثمَّ تؤدي عملها ثمَّ تموت بسرعة، ويمكن تنظيفها بقوة. وتلك التي تنجو تصبح قديمة وتُفحَص بوتيرة أقل.
• التجميع التدريجي: إن وُجِد العديد من الكائنات وأردنا المرور خلال جميع الكائنات وتحديدها دفعة واحدة، فقد يأخذ ذلك وقتًا ويظهِِر آنذاك تأخيرٌ ملحوظٌ في التنفيذ، لذا يحاول المُحرِّك تقسيم عملية كنس البيانات المهملة إلى أجزاء ثم تنفيذ الأجزاء واحدًا تلو الآخر بشكل منفصل. قد يتطلب ذلك إجراء حسابات إضافية لتتبع التغييرات، لكن يصبح لدينا الكثير من التأخيرات الغير ملحوظة بدلًا من تأخير واحد كبير.
• التجميع وقت الخمول: يحاول كانس المهملات العمل عندما يكون المعالج غير مشغول لتقليل أي تأثيرات محتملة على التنفيذ.

يوجد تحسينات وإضافات أخرى على خوارزمية كنس المهملات لكن يجب على التوقف هنا لأنَّ المحركات المختلفة تُطبِّق تقنيات مختلفة. والأهم من ذلك، تتغير الأمور بتطور المحركات، لذا فإنَّ التعمق مسبقًا دون الحاجة لذلك لا يستحق العناء. إلا إن كان ذلك رغبة شخصية، فَسنضع بعض الروابط في الأسفل.

الخلاصة

الأشياء التي يجب معرفتها:

• تُكنس البيانات المهملة تلقائيًا، وهو أمر لا يمكن فرضه أو تجنبه.
• تبقى الكائنات في الذاكرة طالما يمكن الوصول إليها من أي جذر.
• وجود مرجِع للكائن ليس مثل أن يكون قابلًا للوصول من جذر، ويمكن لمجموعة من الكائنات المترابطة أن تصبح غير قابلة للوصول.

تستخدم المحركات الحديثة خوارزميات متطورة لكنس البيانات المهملة.

يغطي كتاب "The Garbage Collection Handbook: The Art of Automatic Memory Management" (لمؤلفه R. Jones وغيره) بعضًا منها.

إن كنت معتادًا على البرمجة بلغات ذات مستوى منخفض، يوجد معلومات مفصَّلة عن كانس المهملات في المُحرِّك V8 في المقال رحلة إلى V8: كنس البيانات المهملة.

تنشر مدونة V8 أيضًا مقالات عن التغييرات في إدارة الذاكرة من وقت لآخر. لتتعلم عن كنس البيانات المهملة، يجب أن تتجهز بتعلم أمور V8 الداخلية كما يُفضَّل أن تقرأ مدونة Vyacheslav Egorov الذي عمل كأحد مهندسي V8. أنا أقول V8 لوجود الكثير من المقالات عنه على الإنترنت. العديد من الجوانب متشابهة بالنسبة لباقي المحركات، لكن يختلف كنس البيانات المهملة من عدة نواحي بينها.

المعرفة العميقة بالمحركات جيدة عندما تحتاج إلى إجراء تحسين منخفض المستوى. فكِّر في ذلك وليكن خطوتك التالية بعد أن تعتاد على اللغة.

ترجمة -وبتصرف- للفصل Garbage collection من كتاب The JavaScript Language.

اقرأ أيضًا

• المقال التالي: النوع الرمزي (Symbol)
• المقال السابق: الكائنات

يوجد سبعة أنواع للبيانات في JavaScript كما رأينا في فصل أنواع البيانات. ستة من هذه الأنواع تُدعى "أساسية" (primitive) لأنها تحوي قيمة شيء واحد فقط (سواء كان نصًا أو رقمًا أو أي شيء آخر).

في المُقابل، تُستخدم الكائنات لتخزين مجموعة من البيانات المتنوعة والوحدات المعقدة المُرَمَّزة بمفاتيح. تُضمَّن الكائنات في ما يقارب جميع نواحي JavaScript، لذا يجب علينا أن نفهمها قبل التعمق في أي شيء آخر.

يمكن إنشاء أي كائن باستخدام الأقواس المعقوصة {…} مع قائمة اختيارية بالخاصيات. الخاصية هي زوج من "مفتاح: قيمة" (key: value) إذ يكون المفتاح عبارة عن نص (يُدعى "اسم الخاصية")، والقيمة يمكن أن تكون أي شيء.

يمكننا تخيل الكائن كخزانة تحوي ملفات. يُخزن كل جزء من هذه البيانات في الملف الخاص به باستخدام المفتاح. يمكن إيجاد، أو إضافة، أو حذف ملف باستخدام اسمه.

يمكن إنشاء كائن فارغ (خزانة فارغة) باستخدام إحدى الصيغتين التاليتين:

let user = new Object(); // (object constructor) صياغة باني كائن
let user = {};  // (object literal) صياغة مختصرة لكائن عبر الأقواس

تُستخدم الأقواس المعقوصة {...} عادة، وهذا النوع من التصريح يُسمى «الصياغة المختصرة لتعريف كائن» (object literal).

القيم المُجرَّدة والخاصيات

يمكننا إضافة بعض الخاصيات (properties) إلى الكائن المعرَّف بالأقواس {...} مباشرة بشكل أزواج "مفتاح: قيمة":

let user = {     // كائن
  name: "John",  // name عبر المفتاح John خزِّن القيمة 
  age: 30        // age خزِّن القيمة 30 عبر المفتاح 
};

لدى كل خاصية مفتاح (يُدعى أيضًا "اسم " أو "مُعَرِّف") قبل النقطتين ":" وقيمة لهذه الخاصية بعد النقطتين.

يوجد خاصيتين في الكائن user:

1. اسم الخاصية الأولى هو "name" وقيمتها هي "John".
2. اسم الخاصية الثانية هو "age" وقيمتها هي "30".

يمكن تخيل الكائن السابق user كخزانة بملفين مُسَمَّيان "name" و "age".

يمكننا إضافة، وحذف، وقراءة الملفات من الخزانة في أي وقت. يمكن الوصول إلى قيم الخاصيات باستخدام الصيغة النُقَطية (dot notation):

// الحصول على قيم خاصيات الكائن:
alert( user.name ); // John
alert( user.age ); // 30

يمكن للقيمة أن تكون من أي نوع، لِنُضِف قيمة من نوع بيانات منطقية (boolean):

user.isAdmin = true;

يمكننا استخدام المُعامِل delete لحذف خاصية:

delete user.age;

يمكننا أيضا استخدام خاصيات بأسماء تحوي أكثر من كلمة، لكن يجب وضعها بين علامات الاقتباس "":

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // يجب أن تكون الخاصية ذات الاسم المُحتوي على أكثر من كلمة بين علامتي اقتباس
};

يمكن إضافة فاصلة بعد آخر خاصية في القائمة:

let user = {
  name: "John",
  age: 30,
}

وتُسمى بفاصلة "مُعَلِّقَة" أو "زائدة" فهي تجعل إضافة أو حذف أو التنقل بين الخاصيات أسهل لأن جميع الأسطر تُصبِح متشابهة.

الأقواس المعقوفة

لا تعمل طريقة الوصول إلى الخاصيات ذات الأسماء المحتوية على أكثر من كلمة باستخدام الصيغة النُقَطية:

// تعرض هذه التعليمة وجود خطأ في الصياغة
user.likes birds = true

ذلك لأن الصيغة النُقطية تحتاج لاسم متغير صحيح. لا يحوي مسافات أو حدود أخرى. يوجد بديل يعمل مع أي نص "صيغة الأقواس المعقوفة" []:

let user = {};

// تخزين
user["likes birds"] = true;

// استرجاع
alert(user["likes birds"]); // true

// حذف
delete user["likes birds"];

يعمل كل شيء وفق المطلوب الآن. يُرجى ملاحظة أنَّ النص بداخل الأقواس مُحاط بعلامتي اقتباس (تعمل علامات التنصيص الأخرى بطريقة صحيحة أيضًا).

تتيح لنا الأقواس المعقوفة أيضًا جلب اسم خاصية ناتجة عن قيمة أي تعبير - بدلًا من اسم الخاصية الفعلي - مثل استعمال اسم من متغير كما يلي:

let key = "likes birds";

// user["likes birds"] = true; يماثل قول 
user[key] = true;

يمكن حساب قيمة المتغير key أثناء التنفيذ أو قد تعتمد قيمته على مدخلات المستخدمين ثم نستخدمه للوصول إلى الخاصية مما يعطي مرونة كبيرة في التعامل. إليك المثال التالي:

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// الوصول باستخدام متغير
alert( user[key] ); // John (if enter "name")

لا يمكن استخدام الصيغة النُقطية بالطريقة نفسها:

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // غير معروف

الخاصيات المحسوبة

يمكن استخدام الأقواس المعقوفة في كائن معرَّف بالأقواس، وهذا ما يسمى بالخاصيات المحسوبة. إليك المثال التالي:

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // fruit يؤخذ اسم الخاصية من المتغير 
};

alert( bag.apple ); // fruit="apple" قيمتها 5 إذا كانت

معنى الخاصية المحسوبة سهل: تعني [fruit] أنَّ اسم الخاصية يجب أن يُؤخذ من fruit؛ لذا، إن أدخل الزائر "apple"، ستصبح قيمة bag هي {apple: 5}.

يعمل الأمر السابق بالطريقة التالية ذاتها:

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// fruit خُذ اسم الخاصية من المتغير 
bag[fruit] = 5;

لكن شكله يبدو أفضل، أليس كذلك؟! يمكن استخدام تعابير أكثر تعقيدًا داخل الأقواس المعقوفة:

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

الأقواس المعقوفة أكثر قوة من الصيغة النُقطية. فهي تسمح باستخدام أي اسم للخاصيات والمتغيرات. لكنها أكثر تعقيدا في الكتابة. لذا، إن كانت أسماء المتغيرات سهلة ومعروفة، تُستخدَم الصيغة النُقَطية غالبًا. وإن أردنا بعض التعقيد، نستخدم إلى الأقواس المعقوفة.

يمكن استخدام الأسماء المحجوزة مع أسماء الخاصيات

لا يمكن لمتغير أن يحمل اسم إحدى الكلمات المحجوزة في اللغة مثل "for"، أو "let"، أو "return"، …الخ. لكن لا تُطبَّق هذه القاعدة على أسماء خاصيات الكائنات. فيمكن استخدام أي اسم معها:

let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

عمومًا، يمكن استخدام أي اسم، لكن هناك استثناء: "__proto__" لهذا الاسم معاملة خاصة لأسباب تاريخية. مثلًا، لا يمكننا استخدام الاسم على أنَّه قيمة لغير كائن:

let obj = {};
obj.__proto__ = 5;
alert(obj.__proto__); // لا تعمل وفق المطلوب [object Object]

كما نرى في الشيفرة، تم تجاهل تخزين القيمة الأولية 5.

تخزين أزواج الخاصيات التحكمية في كائن وإتاحة تحديد مفاتيح هذه الأزواج للزائر قد يجعل الشيفرة مصدرًا للأخطاء ومليئًا بالثغرات.

في تلك الحالة، قد يختار الزائر - الخبير والماكر - الاسم __proto__ ليكون مفتاحًا ويخرِّب البنية المنطقية للشيفرة (كما في المثال أعلاه). يوجد طريقة لجعل الكائنات تتعامل مع __proto__ بِعدِّها خاصية عادية وسنتطرق لها لاحقًا بعد فهم الكائنات بشكل أعمق.

يوجد أيضا هيكل بيانات آخر يدعى Map، والذي ستتعلمه في القسم الذي يتحدث عن نوعي البيانات Map و Set، اللذين يدعمان استعمال أي نوع مع المفاتيح.

اختزال قيم الخاصيات

نستخدم غالبا قيم متغيرات موجودة مسبقًا لتكون قيمًا لأسماء الخاصيات في الشيفرات الحقيقية. اطلع مثلًا على الشيفرة التالية:

function makeUser(name, age) {
  return {
    name: name,
    age: age
    // ... خاصيات أخرى
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

تحمل الخاصيات في المثال السابق نفس أسماء المتغيرات. يُعدُّ إنشاء خاصية من متغير موجود مسبقًا حالة استخدام شائعة. أي أنه يوجد اختزال خاص لقيمة الخاصية لاختصار الشيفرة. بدلا من كتابة name:name، يمكننا كتابة name فقط، كما يلي:

function makeUser(name, age) {
  return {
    name, // name: name يماثل كتابة 
    age   // age: age يماثل كتابة
    // ...
  };
}

يمكننا استخدام كلًا من الخاصيات الاعتيادية والاختزال في الكائن ذاته:

let user = {
  name,  // name:name يماثل
  age: 30
};

فحص الكينونة

قابلية الوصول إلى أي خاصية في الكائن هي إحدى مميزات الكائنات، ولكن ألَا يوجد أي خطأ في حال لم تكن الخاصية موجودة؟! عند محاولة الوصول إلى خاصية غير موجودة، تُرجَع القيمة undefined. مما يُعطي طريقة متعارفة لفحص كينونة (وجود) خاصية ما من عدمه بموازنتها مع القيمة "undefined" ببساطة:

let user = {};

alert( user.noSuchProperty === undefined ); // تحقق هذه الموازنة يشير إلى عدم وجود الخاصية

يوجد أيضا مُعامل خاص "in" لفحص تواجد أي خاصية. طريقة استخدام هذا المعامل كالتالي:

"key" in object

مثلا:

let user = { name: "John", age: 30 };

alert( "age" in user ); // true, user.age موجود
alert( "blabla" in user ); // false, user.blabla غير موجود

لاحظ أنه من الضروري وجود اسم الخاصية على يسار in. ويكون عادة نصًا بين علامتي تنصيص. إن لم نستخدم علامتي التنصيص فهذا يعني فحص متغير يحمل الاسم ذاته مثل:

let user = { age: 30 };

let key = "age";
alert( key in user ); // key إذ تؤخذ قيمة المتغير true تطبع القيمة
               // user ويُتحقق من وجود خاصية بذلك الاسم في الكائن

استخدام "in" مع الخاصيات التي تُخزن القيمة undefined

تفحص عملية الموازنة الصارمة "=== undefined" غالبًا وجود الخاصية وفق المطلوب. لكن يوجد حالة خاصة تفشل فيها هذه العملية، بينما لا يفشل المعامل in إن استعمل مكانها. هذه الحالة هي عند وجود الخاصية في الكائن لكنها تُخزن القيمة undefined:

let obj = {
  test: undefined
};

alert( obj.test ); // ولكن هل تُعدُّ الخاصية موجودة أم لا؟ undefined يطبع القيمة

alert( "test" in obj ); // وتَعدُّ الخاصية موجودة في الكائن true تُطبع القيمة

الخاصية obj.test موجودة فعليًا في الشيفرة أعلاه، لذا يعمل المُعامل in بصحة.

تحدث مثل هذه الحالات نادرًا فقط لأن القيمة undefined لا تُستخدَم بكثرة. نستخدم غالبا القيمة null للقيم الفارغة أو الغير معرفة، لذلك يُعد المُعامل in قليل الاستخدام في الشيفرات.

الحلقة for…in

يوجد شكل خاص للحلقة for..in للمرور خلال جميع مفاتيح كائنٍ ما. هذه الحلقة مختلفة تمامًا عما درسناه سابقًا، أي الحلقة for(;;)‎.

صياغة الحلقة تكون بالشكل التالي:

for (key in object) {
  // يتنفذ ما بداخل الحلقة لكل مفتاح ضمن خاصيات الكائن
}

مثلا، لنطبع جميع خاصيات الكائن user:

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // المفاتيح
  alert( key );  // name, age, isAdmin
  // قيم المفاتيح
  alert( user[key] ); // John, 30, true
}

لاحظ أن جميع تراكيب "for" تتيح لنا تعريف متغير التكرار بِداخل الحلقة، مثل let key في المثال السابق. يمكننا أيضًا استخدام اسم متغير آخر بدلًا من key. إليك مثال يُستخدم بكثرة:

for (let prop in obj)

الترتيب في الكائنات

هل الكائنات مرتبة؟ بمعنى آخر، إن تنقلنا في حلقة خلال كائن، هل نحصل على جميع الخاصيات بنفس الترتيب الذي أُضيفت به؟ وهل يمكننا الاعتماد على هذا؟

الإجابة باختصار هي: "مرتب بطريقة خاصة": الخاصيات الرقمية يُعاد ترتيبها، تظهر باقي الخاصيات بترتيب الإنشاء ذاته كما في التفاصيل التالية.

لنرَ مثالًا لكائن بِرموز الهاتف:

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

قد تُستخدم الشيفرة لاقتراح قائمة من الخيارات للمستخدم. إن كنا نبني موقعًا لزوار من ألمانيا فقد نريد أن تظهر 49 أولا. لكن، عند تشغيل الشيفرة، نرى شيئا مختلفًا تماما:

• تظهر USA (1)‎ أولًا
• ثم Switzerland (41)‎ وهكذا.

تُستخدم رموز الهواتف بترتيب تصاعدي لأنها أعدادٌ، لذا نرى 1, 41, 44, 49.

خاصيات عددية؟ ما هذا؟

تعني "الخاصية العددية" (integer property) نصًا يمكن تحويله من وإلى عدد دون أن يتغير. لذا فإن 49 هو اسم خاصية عددي لأنه عند تحويله إلى عدد وإرجاعه لنص يبقى كما هو. لكن "1.2" و "‎+49" ليست كذلك:

// هي دالة تحذف الجزء العشري Math.trunc
alert( String(Math.trunc(Number("49"))) ); // "49", الخاصية العددية ذاتها
alert( String(Math.trunc(Number("+49"))) ); // ‏ "49" مختلفة عن "49+" => إذًا ليست خاصية عددية 
alert( String(Math.trunc(Number("1.2"))) ); //  ‏ "1" مختلفة عن "1.2" => إذًا ليست خاصية عددية 

في المقابل، إن كانت المفاتيح غير عددية، فتُعرَض بالترتيب الذي أُنشِئت به. إليك مثال على ذلك:

let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // add one more

// تُعرض الخاصيات الغير رقمية بترتيب الإنشاء
for (let prop in user) {
  alert( prop ); // name, surname, age
}

لذا، لحل مشكلة رموز الهواتف يمكننا التحايل وجعلها غير عددية بإضافة "+" قبل كل رمز كما يلي:

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

الآن تعمل وفق المطلوب!

النسخ بالمرجع

إحدى الاختلافات الرئيسية بين الكائنات والمتغيرات الأولية هي أنَّ الكائنات تُخزن وتُنسخ "بالمرجع". بينما تُخزن/تُنسخ القيم الأولية: النصوص، والأرقام، والقيم المنطقية بِعدِّها قيمةً كاملةً. إليك المثال التوضيحي التالي:

let message = "Hello!";
let phrase = message;

لدينا في هذه الشيفرة متغيرين مستقلين كلاهما يُخزن النص "Hello!‎ ".

الكائنات ليست كذلك.

لا يُخزِّن المتغير الكائن نفسه، وإنما "عنوانه في الذاكرة". بمعنى آخر، "مرجع للكائن"

هنا صورة للكائن:

let user = {
  name: "John"
};

كما نرى، يُخزَّن المتغير في مكان ما في الذاكرة ويُخزِّن المتغير user مرجعًا إليه.

عند نسخ متغير من نوع كائن، يُنسَخ المرجع الذي يشير إلى ذلك الكائن ولا يُنسَخ الكائن نفسه ويُكرَّر. إذا تخيلنا الكائن كخزانة، فإن المتغير هو مفتاح الخزانة ونسخ المتغير يكرِّر المفتاح وليس الخزانة ذاتها. إليك مثال يوضح ما ذكرناه:

let user = { name: "John" };

let admin = user; // يُنسَخ المرجع

الآن، أصبح لدينا متغيرين، كلاهما يحمل مرجعًا للكائن ذاته:

يمكننا استخدام كلا المتغيرين (المفتاحين) للوصول إلى الخزانة وتعديل محتواها:

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // "admin" عُدِّلت باستخدام المرجع 

alert(user.name); // "user" أي يمكن رؤية التعديلات من المرجع 'Pete' تُعرَض القيمة

يوضح المثال أعلاه وجود كائن واحد فقط. كما لو كان لدينا خزامة بمفتاحين، واستخدمنا أحدهما (admin) للوصول إلى الخزانة. ثم إذا استخدمنا الآخر (user) لاحقًا، فسنرى إنعكاس التغييرات التي أجراها الأول.

الموازنة بالمرجع

يعمل مُعاملي المساواة == والمساواة الصارمة === بنفس الطريقة للكائنات. يكون الكائنان متساويان إذا كانَا الكائن نفسه فقط. أي، إذا كان متغيران يشيران للكائن ذاته، فهما متساويان:

let a = {};
let b = a; // نفس المرجع

alert( a == b ); // true, كلا المتغيرين يشيران للكائن نفسه
alert( a === b ); // true

وهنا متغيران مستقلان ليسا متساويين أي يشيران إلى كائنين منفصلين حتى وإن كانا متماثلين تمامًا:

let a = {};
let b = {}; // متغيران منفصلان

alert( a == b ); // خطأ

يُحوَّل الكائن إلى قيمة أولية (أساسية) في الموازنات مثل obj1 > obj2 أو obj == 5. سندرس كيفية تحويل الكائنات قريبًا، لكن، في الحقيقة، مثل هذه الموازنات تكون نادرة الضرورة وتنتج غالبًا من خطأ في كتابة الشيفرة.

الكائنات الثابتة

يمكن تغيير الكائن المُعَرَّف على أنَّه ثابت (أي وسم المتغير الذي يحوي الكائن بالكلمة المفتاحية const) دون حصول أي أخطاء. إليك الشيفرة التالية مثلًا:

const user = {
  name: "John"
};

user.age = 25; // (*)

alert(user.age); // 25

قد يبدو أن السطر (*) سيسبب خطأ، لكن لا يوجد أي مشكلة البتة. ذلك لأنَّ const تحافظ على قيمة user ذاتها وتمنع تغييرها. ويُحزِّن user المرجع للكائن نفسه دائمًا ولا يتغيِّر بتعديل الكائن نفسه. يدخل السطر (*) إلى الكائن ولا يعيد تعيين قيمة المتغير user.

يمكن أن يعطي const خطأ إن حاولنا تغيير قيمة المتغير user مثل:

const user = {
  name: "John"
};

// (user خطأ (لا يمكن تغيير قيمة المتغير
user = {
  name: "Pete"
};

لكن، ماذا إن أردنا إنشاء خاصيات ثابتة ضمن الكائن؟ سيُعطي user.age = 25 آنذاك خطأ، وذلك ممكن أيضًا. سيتم شرحه في الفصل رايات الخاصيات وواصفاتها.

الاستنساخ والدمج

إذًا، نسخ كائن يُنشِئ مرجعًا إضافيًّا له. لكن ماذا إن كنا نريد تكرار كائن فعليًّا أي إنشاء نسخة مستقلة منه؟ ذلك ممكن أيضًا، لكنه أصعب قليلًا لعدم وجود دالة تقوم بذلك في JavaScript ذلك لأنَّه لا حاجة لذلك بكثرة. النسخ بالمرجع كافٍ غالبًا.

لكن إن أردنا ذلك فعلًا، فإننا نحتاج لإنشاء كائن وتكرار هيكل الكائن الموجود عبر التنقل خلال خاصياته ونسخها على المستوى الأولي. وإليك مثال على ذلك:

let user = {
  name: "John",
  age: 30
};

let clone = {}; // الكائن الجديد الفارغ

// إليه user ننسخ جميع خاصيات المتغير
for (let key in user) {
  clone[key] = user[key];
}

// الآن أصبحت النسخة مستقلة تماما
clone.name = "Pete"; // تغيير البيانات في النسخة

alert( user.name ); //  في الكائن الأصلي John تظل

يمكننا استخدام الدالة Object.assign للغرض ذاته.

الصياغة الدالة هي:

Object.assign(dest, [src1, src2, src3...])

• تُعد المُعاملات dest، و src1، وحتى srcN كائنات (يمكن أن تكون بالعدد المُراد).
• تنسخ الدالة خاصيات جميع الكائنات src1, ..., srcN إلى الكائن dest. بمعنى آخر، تُنسخ جميع الخاصيات لجميع المُعاملات بدءًا من المُعامل الثاني إلى المُعامل الأول. ثم يتم إرجاع dest.

مثلا، يمكننا استخدام الدالة لدمج عدة كائنات إلى كائن واحد:

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// user إلى permissions2 و permissions1 تنسخ جميع الخاصيات من 
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

إن كان الكائن user يحوي أحد أسماء الخاصيات مسبقًا، فسيتم إعادة كتابة محتواها:

let user = { name: "John" };

// isAdmin وإضافة name إعادة كتابة  
Object.assign(user, { name: "Pete", isAdmin: true });

// now user = { name: "Pete", isAdmin: true }

يمكننا أيضًا استخدام الدالة Object.assign بدلًا من الحلقة للاستنساخ البسيط:

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

تنسخ الدالة جميع خاصيات الكائن user إلى الكائن الفارغ وتُرجِعه كما في الحلقة لكن بشكل أقصر. حتى الآن، عدَدْنا جميع خاصيات user أولية (أساسية)، لكن قد تكون بعض الخاصيات مرجعًا لكائن آخر مثل الشيفرة التالية فما العمل؟

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

في هذه الحالة نسخ clone.sizes = user.sizes ليس كافيًا لأنَّ user.sizes عبارة عن كائن، فسيُنسَخ على أنَّه مرجعٌ. هكذا، سيصبح لدى clone و user الحجم ذاته:

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // صحيح،  الكائن ذاته

// sizes الكائن الفرعي clone و user يتشارك الكائنان
user.sizes.width++;       // تغيير خاصية من مكان ما
alert(clone.sizes.width); // 51, يعرض النتيجة من مكان آخر

لإصلاح هذا، يجب استخدام حلقة الاستنساخ التي تفحص كل قيمة في user[key]‎، وإن كان كائنًا نستبدل الهيكل الخاص به أيضًا. هذه الطريقة تُسمى "استنساخ عميق" (deep cloning).

يوجد خوارزمية عامة للاستنساخ العميق تنفِّذ الحالة السابقة بشكل صحيح، بالإضافة إلى حالات أكثر تعقيدًا. تُدعى هذه الخوارزمية خوارزمية الاستنساخ المُهيكلة. حتى لا نُعيد اختراع العجلة مجدَّدًا، يمكننا استخدام تنفيذ جاهز للحالة من مكتبة JavaScript lodash، تُدعى الدالة _.cloneDeep(obj).

الخلاصة

الكائنات عبارة عن مصفوفات ترابطية بميزات خاصة عديدة. تُخزن الكائنات خاصيات (أزواج مفتاح-قيمة)، بشرط أنه:

• يجب أن تكون مفاتيح الخاصيات نصوصًا أو رموزًا (غالبًا نصوص).
• يمكن أن تكون القيم من أي نوع.

يمكننا استخدام ما يلي للوصول إلى خاصية:

• الصيغة النُقَطِيَّة: obj.property.
• صيغة الأقواس المعقوفة obj["property"]‎. تتيح لنا الأقواس المعقوفة أخذ مفتاح من متغير، مثل obj[varWithKey]‎.

عمليات أخرى:

• لِحذف خاصية: delete obj.prop.
• لِفحص تواجد خاصية بمفتاح معين: "key" in obj.
• للتنقل خلال كائن: الحلقة for (let key in obj)‎.

تُخَزَّن الكائنات وتُنسخ باستخدام المرجع. بمعنىً آخر، لا يُخزن المتغير قيمة الكائن (object value) لكنه يُخزن مرجعًا (reference) يمثِّل موقع قيمة الكائن في الذاكرة. لذا فإن نسخ هذا المتغير أو تمريره إلى دالة سَينسخ هذا المرجع وليس الكائن ككُل. جميع العمليات (مثل إضافة أو حذف خاصيات) المُنفَّذة على مرجع منسوخ تُنفَّذ على الكائن نفسه.

لعمل نسخة حقيقية (الاستنساخ) يمكننا استخدام Object.assign أو _.cloneDeep(obj).

يُسمى ما درسناه في هذا الفصل "كائن بسيط" أو كائن فقط. يوجد العديد من أنواع الكائنات الأخرى في JavaScript:

• الكائن Array (مصفوفة): لتخزين مجموعة البيانات المرتبة،
• الكائن Date (تاريخ): لتخزين معلومات عن الوقت والتاريخ،
• الكائن Error (خطأ): لتخزين معلومات عن خطأ ما.
• وغيرها من أنواع الكائنات.

لدى هذه الأنواع ميزاتها الخاصة التي سيتم دراستها لاحقًا. يقول بعض الأشخاص أحيانًا شيئًا مثل "نوع مصفوفة" أو "نوع تاريخ" (الاسم الذي وضعته بين قوسين بجانب نوع الكائن)، لكن هذه الأنواع ليست أنواعًا مستقلة بحد ذاتها، إنما تنتمي إلى نوع البيانات Object (كائن) وتتفرع عنه بأشكال مختلفة.

تُعد الكائنات في JavaScript قوية جدًا. درسنا في هذا الفصل جزءًا بسيطًا من موضوع هائل جدًا. سنتعامل مع الكائنات لاحقًا بصورة أقرب وسَنتعلم أكثر عنها في فصول أخرى.

تمارين

مرحبًا، بالكائن

الأهمية: 5

اكتب الشيفرة البرمجية، سطر لكل متطلب:

1. أنشئ كائنًا فارغًا باسم user.
2. أضف الخاصية name بالقيمة John.
3. أضف الخاصية surname بالقيمة Smith.
4. غير قيمة الخاصية name إلى Pete.
5. احذف الخاصية name من الكائن.

الحل

let user = {};
user.name = "John";
user.surname = "Smith";
user.name = "Pete";
delete user.name;

التحقق من الفراغ

اكتب الدالة isEmpty(obj)‎ التي تُرجع القيمة true إن كان الكائن فارغًا، وتُرجِع القيمة false في الحالات الأخرى. يجب أن تعمل كالتالي:

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

إليك تجربة حية للمثال.

الحل

function isEmpty(obj) {
  for (let key in obj) {
    // إن بدأت الحلقة بالعمل، فهناك خاصية في الكائن
    return false;
  }
  return true;
}

كائنات ثابتة؟

الأهمية: 5

هل من الممكن تغيير كائن صُرِّح عنه بالكلمة المفتاحية const؟ ما رأيك؟

const user = {
  name: "John"
};

// هل تعمل؟
user.name = "Pete";

الحل

const user = {
  name: "John"
};

// تعمل
user.name = "Pete";

// خطأ
user = 123;

جمع خاصيات الكائن

لدينا كائن يُخزن رواتب الفريق:

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}

اكتب الشيفرة التي تجمع الرواتب وتُخزنها في المتغير sum. يجب أن يكون مجموع المثال أعلاه 390. إن كان salaries فارغًا، فإن الناتج سيكون 0.

الحل

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
};

let sum = 0;
for (let key in salaries) {
  sum += salaries[key];
}

alert(sum); // 390

ضرب الخاصيات العددية بالقيمة 2

الأهمية: 3

أنشئ دالةً باسم multiplyNumeric(obj)‎ تضرب جميع الخاصيات العددية في الكائن obj في العدد 2.

مثلا:

// قبل الاستدعاء
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// بعد الاستدعاء
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

لاحظ أنَّ الدالة multiplyNumeric لا يجب أن تُرجِع أي شيء. يجب أن تُعدِّل القيم بداخل الكائن.

ملاحظة: استخدام typeof لفحص الأعداد.

إليك تجربة حية للتمرين.

الحل

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
      obj[key] *= 2;
    }
  }
}

ترجمة -وبتصرف- للفصل Objects من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: كنس البيانات المهملة
• المقال السابق: تعويض نقص دعم المتصفحات لجافاسكربت

تتطور لغة جافاسكربت باستمرار نتيجةً لوجود العديد من المقترحات المبنية على الحاجة إلى تطويرها دوريًا. تُحلَّل هذه المقترحات وتُضاف إن كانت جيدة إلى القائمة https://tc39.github.io/ecma262/ ثم النظر في وصفها.

لدى الفِرَق العاملة على محركات جافاسكربت أفكارها الخاصة حول ما يجب تنفيذه أولًا. قد تقرر هذه الفِرَق تنفيذ مقترح ما زال مسودة وتأجيل أشياء أصبح وصفها جاهزا لأنها قد تكون أقل أهمية أو صعبة التنفيذ. لذلك، نجد أن هذه المحركات تتضمن المعايير المتعارفة فقط.

لترى الميزات التي تدعمها اللغة، انظر في هذه الصفحة https://kangax.github.io/compat-table/es6/ (يوجد الكثير من الميزات، فما زال لدينا الكثير لنتعلمه).

Babel

تفشل بعض المحركات في دعم بعض الشيفرات البرمجية عند استخدام ميزات اللغة الحديثة. فكما ذكرنا سابقا، ليست جميع الميزات مُضَمَّنة في كل مكان.

هنا يأتي دور Babel لإصلاح الوضع.

يُعد Babel مُفَسِّرًأ تحويليًا transpiler، إذ يعيد كتابة شيفرة جافاسكربت حديثة بإصدار سابق.

في الواقع، يوجد جزئين في Babel:

1. أولا: برنامج المُفَسِّر التحويلي (transpiler): يعيد كتابة الشيفرة. يُشَغله المطورون على أجهزتهم. يقوم يعيد البرنامج كتابة الشيفرة البرمجية كتابةً متوافقةً مع إصدار سابق للغة ثم يتم توصيل الكود للمستخدمين إلى الموقع. توفر مشاريع بناء الأنظمة الحديثة مثل webpack الوسائل المناسبة لتشغيل المُفَسِّرالتحويلي (transpiler) تلقائيا مع كل تغيير ِللشيفرة البرمجية ما يجعل الاندماج في عملية التطوير أسهل.
2. ثانيا: برنامج لتعويض نقص دعم المتصفحات (Polyfills): قد تتضمن ميزات اللغة الجديدة بعض الوظائف المدمجة وهياكل الجُمَل. يعيد المُفَسِّر التحويلي كتابة الشيفرة البرمجية مُحولًا هياكل الجمل إلى إصدارات أقدم، لكن يجب تضمين الوظائف المُدمجة الجديدة. تُعد جافاسكربت لغة ديناميكية للغاية، وقد تضيف/تعدل السكريبتات أي دالة حتى تتعامل وفقا للمعايير الحديثة.

السكريبت الذي يضيف/يحدث دالة جديدة يسمى "polyfill"، معوِّض نقص الدعم. فهو يغطي الفجوة وإضافة المحتوى المفقود.

برامج تعويض نقص دعم المتصفحات التي قد تثير اهتمامك:

• core js تدعم الكثير وتصمح بتضمين الميزات المُرادة فقط.
• polyfill.io هي خدمة تزود السكريبت بوسائل تعويض نقص دعم المتصفحات وفقا للميزات والمتصفح.

لذلك، إن احتجت استخدام ميزات اللغة الحديثة، فمن المهم استخدام مُفَسِّرتحويلي و برنامج دعم نقص المتصفحات.

أمثلة من الشرح

معظم الأمثلة قابلة للتشغيل في مكانها مثل:

alert('Press the "Play" button in the upper-right corner to run');

لن تعمل الأمثلة التي تستخدم جافاسكربت حديثة إلا في المتصفحات التي تدعمها.

يُعد متصفح جوجل كروم الأكثر حداثة دوما مع ميزات اللغة الحديثة، من الجيد تشغيل العروض الحديثة بدون أي مُفَسِّرتحويلي. تعمل العديد من المتصفحات الأخرى المُحدَّثة جيدا.

ترجمة -وبتصرف- للفصل Polyfills من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: الكائنات
• المقال السابق: الاختبار الآلي باستخدام mocha

يُستخدَم الاختبار الآلي في الكثير من المهام، كما يستخدم بكثرة في المشاريع الحقيقية.

لم نحتاج الاختبارات؟

عند كتابة دالة، يمكننا تخيل ما يجب أن تقوم به: ما هي المعاملات التي تعطي نتائج معينة. يمكننا فحص الدالة أثناء التطوير من خلال تشغيلها وموازنة مخرجاتها مع ما هو متوقع. مثلا يمكننا القيام بذلك في الطرفية.

إن كان هناك خطأ، فإننا نُصلِح الشيفرة البرمجية، ونُعيد تشغيلها، ونفحص النتائج. وهكذا حتى تصبح صحيحة. لكن هذه الطريقة «إعادة التشغيل» غير مثالية.

عند اختبار شيفرة برمجية عن طريق إعادة التشغيل اليدوية، فمن السهل نسيان شيئٍ ما.

على سبيل المثال، عند إنشاء الدالة f. نكتب فيها بعض الشيفرات البرمجية، ثم نَفحصها: "f(1)‎" تعمل لكن "f(2)‎" لا تعمل. صلِح الشيفرة حتى تعمل "f(2)‎". ثم تبدو الدالة كأنها مكتملة، لكننا ننسى إعادة اختبار "f(1)‎" مما قد يؤدي إلى خطأ.

هذا الأمر وارد بكثرة. فعند تطوير أي شيء، نُبقِي العديد من الاحتمالات في الحسبان. لكنه من الصعب توقع أن يختبر المبرمج جميع هذه الحالات يدويا بعد كل تغيير، فيصبح من السهل إصلاح شيء ما وإفساد شيء آخر.

يعني الاختبار الآلي أن الاختبارات تُكتب مستقلة، بالإضافة إلى الشيفرة البرمجية. تشغِّل هذه الاختبارات الدوال بعدة طرق وتوازنها مع النتائج المتوقعة.

التطوير المستند إلى السلوك

لنبدأ بتقنية تسمى التطوير المستند إلى السلوك Behavior Driven Development أو كاختصار BDD.

هذه التقنية BDD هي 3 في 1: اختبارات وتوثيق وامثلة.

سنجرب حالة تطوير عملية لفهم BDD.

تطوير الدالة "pow": الوصف

لنفترض أننا نريد إنشاء الدالة pow(x, n)‎ التي ترفع الأساس x إلى القوة n. مع الأخذ بالحسبان أن n≥0. هذه المهمة هي مجرد مثال: المعامل ** يقوم بهذه العملية في JavaScript، لكننا نركز هنا على تدفق التطوير الذي يمكن تطبيقه على مهام أكثر تعقيدا.

يمكننا تخيل ووصف ما يجب أن تقوم به الدالة pow قبل إنشاء شيفرتِها البرمجية. هذا الوصف يُسمى "specification" أو باختصار "spec" ويحتوي على وصف حالات الاستخدام بالإضافة إلى اختبارات لهذه الحالات كالتالي:

describe("pow", function() {

  it("raises to n-th power", function() {
    assert.equal(pow(2, 3), 8);
  });

});

تحتوي المواصفات على 3 أجزاء رئيسية كما ترى في الأعلى:

describe("title", function() { ... })

ماهي الوظيفة التي نصفها، في هذه الحالة، نحن نصف الدالة pow. تستخدم بواسطة العاملين- أجزاء it.

it("use case description", function() { ... })

نصف (نحن بطريقة مقروءة للبشر) حالة الاستخدام المخصصة في عنوان it، والمعامل الآخر عبارة عن دالة تفحص هذه الدالة.

assert.equal(value1, value2)

الشيفرة البرمجية بداخل it يجب أن تُنَفَّذ بدون أخطاء في حال كان التنفيذ صحيحًا.

تستخدم الدوال assert.* لِفحص ما إن كانت الدالة pow تعمل بالشكل المتوقع أم لا. تستخدم إحدى هذه الدوال في هذا المثال - assert.equal، والتي توازن معاملَين وتُرجِع خطأ في حال عدم تساويهما. في المثال تفحص هذه الدالة إن كانت نتيجة تنفيذ الدالة pow(2, 3)‎ تساوي 8. كما يوجد العديد من أنواع التحقق والمقارنة والتي سنُضيفها لاحقا.

يمكن تنفيذ الوصف، وسينفِّذ الفحص الموجود بداخل it كما سنرى لاحقا.

تدفق التطوير

يبدو تدفق التطوير غالبا كما يلي:

1. يُكتب الوصف الأولي مع فحص للوظيفة الرئيسية.
2. يُنشَئ تنفيذ أولي.
3. للتأكد من صحة عمل التنفيذ، نُشَغِّل إطار التقييم Mocha الذي يُشَغِّل الوصف. ستظهر أخطاء في حال عدم اكتمال الوظائف. نُصحح الأخطاء حتى يصبح كل شيء صحيحًا.
4. هكذا أصبح لدينا تنفيذ مبدئي يعمل كالمطلوب بالإضافة إلى فحصه.
5. نضيف المزيد من حالات الاستخدام للوصف، ربما بعض هذه الميزات ليس مضمنا في التنفيذ بعد. حينها يبدأ الاختبار بالفشل.
6. عُد للخطوة 3 وحدِّث التنفيذ إلى أن تختفي كل الأخطاء.
7. كرر الخطوات 3-6 حتى تجهز كل الوظائف.

إذا، تُعد عملية التطوير تكرارية. نكتب الوصف، ننفذه، نتأكد من اجتياز التنفيذ للفحص، ثم نكتب المزيد من الاختبارات، نتأكد من صحة عملها. حتى نحصل على تنفيذ صحيح مع اختباراته في الأخير.

لنُجرب تدفق التطوير هذا على حالتنا العملية.

الخطوة 1 أصبحت جاهزة: لدينا وصفًا مبدئيًّا للدالة pow. الآن وقبل التنفيذ، لِنستخدم بعض مكاتب جافاسكربت لتشغيل الاختبار حتى نتأكد من إن كانت تعمل (لن تعمل).

المواصفات أثناء التنفيذ

سنستخدم في هذا الشرح مكاتب جافاسكربت التالية للاختبار:

• Mocha - الإطار الرئيسي: يوفر دوال الفحص الأكثر استخدامًا ما يشمل describe و it بالإضافة إلى الدوال الرئيسية التي تُشَغِّل الاختبار.
• Chai - المكتبة المحتوية على دوال تأكيدية. تتيح لنا استخدام العديد من هذه الدوال، نحتاج الآن assert.equal فقط.
• Sinon - مكتبة للتجسس على الدوال، ومحاكاة الدوال المدمجة، والمزيد؛ سنحتاج هذه المكتبة لاحقا.

تُعد هذه المكاتب مفيدة للاختبار في كل من المتصفح والخادم. سنأخذ بعين الاعتبار هنا جهة المتصفح. صفحة HTML كاملة مع هذه المكاتب ووصف الدالة pow:

    <!DOCTYPE html>
    <html>
    <head>
      <!-- add mocha css, to show results -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
      <!-- add mocha framework code -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
      <script>
    mocha.setup('bdd'); // minimal setup
      </script>
      <!-- add chai -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
      <script>
    // chai has a lot of stuff, let's make assert global
    let assert = chai.assert;
      </script>
    </head>

    <body>

    <script>
    function pow(x, n) {
    /* function code is to be written, empty now */
    }
    </script>

    <!-- the script with tests (describe, it...) -->
    <script src="test.js"></script>

    <!-- the element with id="mocha" will contain test results -->
    <div id="mocha"></div>

    <!-- run tests! -->
    <script>
    mocha.run();
    </script>
    </body>

    </html>

يمكن تقسيم الصفحة إلى 5 أجزاء:

1. <head> - لإضافة مكاتب وأنماط للاختبارات.
2. <script> يحتوي على الدالة التي سيتم اختبارها، في هذا المثال الشيفرة البرمجية للدالة pow.
3. الاختبار - عبارة عن سكريبت خارجي في هذا المثال test.js يحتوي على describe("pow", ...)‎ الموضح سابقا.
4. عنصر HTML ‏<div id="mocha"‎> والذي سيُستخدم بواسطة Mocha لعرض النتائج.
5. يتم بدء الاختبارات باستخدام الأمر mocha.run()‎.

النتائج:

يفشل الاختبار ويظهر خطأ في الوقت الحالي. يُعد هذا منطقيا: فالدالة pow ما زالت فارغة، فإن pow(2,3)‎ تُرجع undefined بدلا من 8.

لاحظ أن بإمكانك تشغيل أكثر من اختبار مختلف مستقبلا، فهناك مُشغلات عالية المستوى مثل karma وغيرها.

التنفيذ الأولي

لنقم بتنفيذ مبسط للدالة pow حتى تعمل الاختبارات:

function pow(x, n) {
  return 8; // :) we cheat!
}

الآن ستعمل…

تطوير الوصف

ما قمنا به هو غش فقط، لا تعمل الدالة كالمطلوب: إن قمنا بحساب pow(3,4)‎ فسنحصل على قيمة غير صحيحة، لكنها ستجتاز الاختبارات.

هذه الحالة غير عملية، وتحدث بكثرة. الدالة تتجاوز الاختبارات لكن آلية عملها خاطئة. هذا يعني أن الوصف غير مثالي. ونحتاج لإضافة المزيد من حالات استخدام الدالة إليه.

لنضف اختبارًا آخر للتأكد ما إن كان pow(3, 4) = 81.

يمكنُنا اختيار إحدى الطريقتين لتنظيم الاختبارات:

1. الخيار الأول - إضافة assert إلى it:

describe("pow", function() {

  it("raises to n-th power", function() {
    assert.equal(pow(2, 3), 8);
    assert.equal(pow(3, 4), 81);
  });

});

2. الخيار الآخر - عمل اختبارين:

describe("pow", function() {

  it("2 raised to power 3 is 8", function() {
    assert.equal(pow(2, 3), 8);
  });

  it("3 raised to power 3 is 27", function() {
    assert.equal(pow(3, 3), 27);
  });

});

يختلف المبدئ في أنه عند وجود خطأ في assert، فإن it تتوقف عن العمل. لذا ففي الخيار الأول عند فشل assert الأولى فلن نرى مخرجات assert الأخرى. يُعد الخيار الثاني أفضل للحصول على المزيد من المعلومات حول ما يحدث بعمل اختبارين منفصلين. بالإضافة إلى وجود قاعدة أخرى من الجيد اتباعها.

كل اختبار يفحص شيئًا واحدًا فقط.

إن وجدنا اختبارًا يفحص شيئين مختلفين فمن الأفضل فصلُهما إلى اختبارين. لنكمل باستخدام الخيار الثاني.

النتائج:

سيفشل الاختبار الثاني كَالمتوقع. فَالدالة تُرجع دوما 8، بينما تتوقع الدالة assert النتيجة 27.

تطوير التنفيذ

لنكتب شيئا أكثر واقعية لاجتياز الاختبارات:

function pow(x, n) {
  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

للتأكد من صحة عمل الدالة K نختبرها لأكثر من قيمة. يمكننا القيام بذلك باستخدام الحلقة for بدلا من تكرار it يدويا:

describe("pow", function() {

  function makeTest(x) {
    let expected = x * x * x;
    it(`${x} in the power 3 is ${expected}`, function() {
      assert.equal(pow(x, 3), expected);
    });
  }

  for (let x = 1; x <= 5; x++) {
    makeTest(x);
  }

});

النتيجة:

دالة describe متداخلة

سنضيف المزيد من الاختبارات، لكن، قبل ذلك لاحظ أنه يجب جمع الدالة المساعدة makeTest والدالة for. لن نَحتاج لاستخدام makeTest في باقي الاختبارات، نحتاجها فقط في for: لأن وظيفتهُما العامة هي فحص كيف ترفع الدالة pow قيمة ما إلى قوة معينة.

يتم جمع الدالتين باستخدام الدالة describe المتداخلة:

describe("pow", function() {

  describe("raises x to power 3", function() {

    function makeTest(x) {
      let expected = x * x * x;
      it(`${x} in the power 3 is ${expected}`, function() {
        assert.equal(pow(x, 3), expected);
      });
    }

    for (let x = 1; x <= 5; x++) {
      makeTest(x);
    }

  });

  // ... more tests to follow here, both describe and it can be added
});

تُعرِّف describe الداخلية مجموعة فرعية جديدة من الاختبارات. يمكن ملاحظة الإزاحة في المخرجات:

يمكننا إضافة المزيد من دوال it و describe في الطبقة العلوية مع دوال مساعدة لها، هذه الدوال لن ترى الدالة makeTest.

before/after و beforeEach/afterEach

يمكننا إعداد دوال before/after التي تُنَفَّذ قبل/بعد تنفيذ الاختبارات، كما يمكننا استخدام beforeEach/afterEach قبل/بعد كل it.

على سبيل المثال:

describe("test", function() {

  before(() => alert("Testing started – before all tests"));
  after(() => alert("Testing finished – after all tests"));

  beforeEach(() => alert("Before a test – enter a test"));
  afterEach(() => alert("After a test – exit a test"));

  it('test 1', () => alert(1));
  it('test 2', () => alert(2));

});

تسلسل التنفيذ سيكون كالتالي:

Testing started – before all tests (before)
Before a test – enter a test (beforeEach)
1
After a test – exit a test   (afterEach)
Before a test – enter a test (beforeEach)
2
After a test – exit a test   (afterEach)
Testing finished – after all tests (after)

تستخدم beforeEach/afterEach و before/after غالبا لتنفيذ الخطوات الأولية، العدادات التي تُخرج 0 أو للقيام بشيء ما بين الاختبارات أو مجموعة اختبارات.

توسيع الوصف

أصبحت الوظيفة الرئيسية للدالة pow مكتملة. تم تجهيز الدورة الأولى من التطوير. الآن يمكننا الاحتفال بالانتهاء من ذلك وبدء تطوير الدالة.

كما ذكرنا مسبقا، فإن الدالة pow(x, n)‎ ستتعامل مع أرقام موجبة فقط n. تُرجع دوال جافاسكربت دائما NaN عند وجود خطأ حسابي. لنقم بهذا الأمر مع قيم n.

أولا، نضيف هذا إلى الوصف:

describe("pow", function() {

  // ...

  it("for negative n the result is NaN", function() {
    assert.isNaN(pow(2, -1));
  });

  it("for non-integer n the result is NaN", function() {
    assert.isNaN(pow(2, 1.5));
  });

});

النتائج مع الاختبارات الجديدة:

تفشل الاختبارات المُضافة مؤخرا وذلك لأن التنفيذ لا يدعمها. هكذا هي الطريقة التي يعمل بها BDD: نبدأ بكتابة الاختبارات التي نعلم بأنها ستفشل ثم نكتب التنفيذ الخاص بها.

دوال تأكيد أخرى

لاحظ أن الدالة assert.isNaN: تفحص وجود القيمة NaN.

يوجد المزيد من دوال التأكيد في Chai، مثلا:

• assert.equal(value1, value2)‎ - تفحص التساوي value1 == value2.
• assert.strictEqual(value1, value2)‎ - تفحص التساوي التام value1 === value2.
• assert.notEqual، assert.notStrictEqual - تفحص عكس الدالتين أعلاه.
• assert.isTrue(value)‎ - تفحص أن value === true.
• assert.isFalse(value)‎ - تفحص أن value === false.
• يمكنك قراءة باقي الدوال في التوثيق

لذا، يجب أن نضيف بعض الأسطر للدالة pow:

function pow(x, n) {
  if (n < 0) return NaN;
  if (Math.round(n) != n) return NaN;

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

الآن أصبحت تعمل وتَجتاز جميع الاختبارات:

الخلاصة

يكون الوصف في البداية في BDD، ثم يأتي التنفيذ. فنحصل في الأخير على كل من الوصف والشيفرة البرمجية.

يمكن استخدام الوصف بثلاث طرق:

1. اختبارات - تضمن صحة عمل الشيفرة البرمجية.
2. توثيق - توضح العناوين في describe وit وظيفة الدالة.
3. أمثلة - تُعد الاختبارات أمثلة فعالة تعرض كيف يمكن استخدام الدالة.

يمكننا تطوير، تغيير، أو إعادة كتابة دالة من الصفر من خلال الوصف مع ضمان صحة عملها. يعد هذا الأمر مهمًا خاصة في المشاريع الكبيرة عند استخدام دالة في عدة أماكن. فعند تغيير هذه الدالة، يكون من الصعب التحقق من صحة عملها يدويًا في كل مكان.

يوجد خيارين بدون اختبارات:

1. تنفيذ التغيير بغض النظر عن النتائج. هكذا قد نواجه الكثير من الأخطاء عند الفحص اليدوي.
2. يتجنب المطورون تحديث الشيفرة عند توقع حدوث أخطاء فادحة وعدم وجود اختبارات لفحص هذه الأخطاء فتبقى الشيفرة البرمجية بدون تحديث.

يساعد الفحص الآلي على تجنب هذه المشاكل!

إن كان المشروع مليئا بالاختبارات، فلن يكون هناك أي مشكلة إطلاقا. فبعد أي تغيير يمكننا تنفيذ الاختبارات لنرى العديد من التحقيقات أجريت في غضون ثوانٍ.

علاوة على ذلك، الشيفرة البرمجية المختبرة جيدا تكون بهيكل أفضل.

منطقيا، لأن الشيفرة البرمجية المختبرة سهلة التعديل والتطوير. مع وجود سبب آخر أيضا. يجب أن تكون الشيفرة البرمجية منظمة من أجل كتابة اختبار بحيث يكون لدى كل دالة وظيفة رئيسية موصوفة، ومدخلات ومخرجات معروفة جيدا. ذلك يعني 1 هيكلة جيدة منذ البداية.

لا يكون الأمر بهذه السهولة في الواقع. ففي بعض الأحيان يكون من الصعب كتابة وصف للدالة قبل شيفرتها البرمجية لأن سلوكها لا يكون واضحًا بعد. لكن عموما، كتابة الاختبارات يجعل التطوير أسرع وأكثر استقرارًا.

ستواجه الكثير من المهام التي تتضمن ذلك لاحقا في الشرح. فسترى المزيد من الأمثلة العملية. يتطلب كتابة الاختبارات معرفة جيدة بِجافاسكربت. لكننا في بداية تعلمها. فلترتيب كل شيء، لست مطالبًا بكتابة الاختبارات في الوقت الحالي، لكن يجب أن تكون قادرًا على قرائتها حتى إن كانت معقدة أكثر قليلا مما تم شرحه هنا.

تمارين

ما الخطأ في الاختبار التالي؟

الأهمية: 5

ما الخطأ في الاختبار للدالة pow أدناه؟

it("Raises x to the power n", function() {
  let x = 5;

  let result = x;
  assert.equal(pow(x, 1), result);

  result *= x;
  assert.equal(pow(x, 2), result);

  result *= x;
  assert.equal(pow(x, 3), result);
});

الحل:

describe("Raises x to power n", function() {
  it("5 in the power of 1 equals 5", function() {
    assert.equal(pow(5, 1), 5);
  });

  it("5 in the power of 2 equals 25", function() {
    assert.equal(pow(5, 2), 25);
  });

  it("5 in the power of 3 equals 125", function() {
    assert.equal(pow(5, 3), 125);
  });
});

describe("Raises x to power n", function() {
  it("5 in the power of 1 equals 5", function() {
    assert.equal(pow(5, 1), 5);
  });

  // Mocha will run only this block
  it.only("5 in the power of 2 equals 25", function() {
    assert.equal(pow(5, 2), 25);
  });

  it("5 in the power of 3 equals 125", function() {
    assert.equal(pow(5, 3), 125);
  });
});

ترجمة -وبتصرف- للفصل Automated testing with mocha من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: تعويض نقص دعم المتصفحات لجافاسكربت
• المقال السابق: شيفرة النينجا البرمجية

اقتباس

التعلم بدون تفكير يضيع الجهد، والتفكير بدون تعلُّم مجرد مخاطرة

استخدم مبرمجو النينجا القدماء هذه الحيل لشحذ عقول مراجعو الشيفرات البرمجية. يبحث معلمو مراجعة الشيفرات البرمجية عن هذه الحيل في مهام الاختبار. أحيانًا، يستخدم المبرمجون المبتدئون هذه الحيل بصورة أفضل من مبرمجي النينجا. اقرأها جيدا ثم حدد من أنت - نينجا، مبتدئ، أو مُراجِع شيفرات برمجية؟

اقتباس

موازنة تم اكتشافها

يحاول الكثيرون اتباع طرق النينجا ولكن لا يفلح إلا القليل.

البلاغة في الإيجاز

اختصر الشيفرة البرمجية قدر الإمكان. أظهر مدى ذكائك. فلتَقُدكَ ميزات اللغة الخفية.

مثال: ألق نظرة على العامل الثلاثي التالي '?':

// مأخوذ من مكتبة جافاسكربت شهيرة
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

إن كتبت بهذه الطريقة، فإن أي مطور آخر يقرأ هذا السطر ويحاول فهم ما هي قيمة i سيأتي إليك باحثًا عن الإجابة. أخبرهم في ذلك الحين أن الاختصار أفضل دومًا ودلهم على طريق النينجا.

المتغيرات ذات الحرف الواحد

استخدام المتغيرات ذات الحرف الواحد هي طريقة أخرى لكتابة الشيفرة البرمجية بصورة أسرع مثل a، أو b، أو c. يختبئ المتغير ذو الحرف الواحد داخل الشيفرة البرمجية كما يختبئ النينجا الحقيقي في الغابة. لن يتمكن أي شخص من العثور عليه بسهولة باستخدام "البحث" المُدمج مع المحرر. حتى إن عثر شخص ما علبه فلن يفهم ما معنى المتغير a أو b.

لكن، يوجد استثناء. مبرمج النينجا الحقيقي لن يستخدم المتغير i كعداد للحلقة "for". سيستخدمه في أي مكان عدا هنا. يوجد العديد من الأحرف الغريبة لاستخدامها كعداد الحلقة بدلا منه مثل x أو y.

متغير بحرف غريب عدادًا للحلقة يُعد مناسبا إن كانت الحلقة تمتد إلى صفحة أو صفحتين. فإن أتى شخص ما للتعمق في هذه الحلقة فلن يعرف أن المتغير x هو عدَّاد هذه الحلقة.

استخدم الاختصارات

إن كانت قوانين الفريق تمنع استخدام المتغيرات ذات الحرف الواحد أو المتغيرات الغامضة، اختصر أسماء المتغيرات.

• list ‏← lst
• userAgent ‏← ua
• browser ‏← brsr
• وهكذا…

سيفهم شخص فطن فقط الأسماء المستخدمة. حاول اختصار كل شيء. فقط شخص مؤهل يجب أن يُكمل تطوير شيفرتك البرمجية.

حلق عاليا واستخدم التجريد

اقتباس

المربع العظيم لا يحوي أي زوايا السفينة الأعظم تكتمل أخيرا، النغمة العظيمة نادرة الصوت الصورة العظيمة لا تحوي أي شكل

تاو تي تشينغ

حاول اختيار الكلمة الأكثر تجريدا عند اختيار اسم ما مثل obj، و data، و value، و item، و elem وهكذا.

• الاسم الأمثل لمتغير هو data. استخدمه حيثما استطعت. فبالحقيقة، كل متغير يحتوي على بيانات "data". لكن، ماذا إن كان هناك متغير بالاسم data بالفعل؟ جرب الاسم value، فهو عالمي أيضا، فكل متغير يحتوي على قيمة.

• سمِّ المتغير حسب نوعه: str، num… جرب هذه الطريقة. قد يتساءل أي شخص مبتدئ حول إن كانت مثل هذه الأسماء مفيدة لمبرمج النينجا؟ بالفعل هي مفيدة. اسم المتغير يُخبر عن شيء ما. يدل اسم المتغير في هذه الطريقة عن نوع البيانات التي يحويها: نص، رقم أو أي نوع آخر. لكن عندما يحاول شخص آخر فهم الشيفرة البرمجية، سيُصدَم بعدم توفر معلومات كافية لفهمها! وسيفشل تمامًا في تعديل شيفرتِك البرمجية.

يمكن معرفة قيمة المتغير عبر تتبع الشيفرة البرمجية. لكن ما معنى المتغير؟ وماهو النص أو الرقم الذي يخزنة؟ لا يوجد طريقة لمعرفة ذلك بدون تأمل جيد!

• لكن ماذا إن لم يكن هناك المزيد من هذه الأسماء؟ فقط أضف رقمًا إليها مثل: data1، item2، elem5…

اختبار الملاحظة

يمكن لِمبرمج قوي الملاحظة فقط فهم شيفرتُك البرمجية. لكن، كيف تختبر ذلك؟

إحدى الطرق هي استخدام متغيرات بأسماء متشابهة مثل date و data.

اخلُط ما بين المتغيرين حيث يمكن ذلك. ستصبح قراءة شيفرة برمجية بهذه الطريقة مستحيلة. وعند وجود خطأ كتابي فسيَعلق القارئ لوقت طويل.

مرادفات ذكية

اقتباس

أصعب شيء هو العثور على قطة سوداء في غرفة مظلمة، خاصةً عند عدم وجود قطة! استخدام أسماء متشابهة لنفس الأشياء يجعل الحياة أكثر تشويقا ويُظهِر مدى إبداعك للجمهور.

على سبيل المثال، لنأخذ بالحسبان بوادِئ الدوال. إن كانت الدالة تعرض رسالة على الشاشة، ابدأها ب display…‎ مثل displayMessage. وإن كانت دالة أخرى تعرض شيئًا آخر على الشاشة مثل اسم المستخدم ابدأها ب show…‎ مثل showName.

اجعل من يقرأ الشيفرة يظن أن هناك اختلاف خفي بين الدوال بينما لا يوجد أي اختلاف. اتفق مع فريق مبرمجي النينجا: إن بدأ أحمد دالة العرض ب display...‎ في شيفرته البرمجية، فيمكن لمحمد استخدام render...‎ ويمكن لِأمل استخدام paint...‎. لاحظ كيف ستصبح الشيفرة البرمجية أكثر اختلافًا وتشويقًا.

الآن إلى خدعة القبعة!

استخدم نفس البادئة ِلدالتين مهمتين بوظيفتين مختلفتين!

مثلا، الدالة "printPage(page)‎" ستستخدم طابعة، بينما الدالة "printText(text)‎" ستضع النص على الشاشة. هكذا تجعل القارئ يفكر جيدا بالدالة المُسماة printMessage: "أين تضع هذه الدالة الرسالة؟ إلى الطابعة أو على الشاشة؟". لجعل الأمر أوضح، يجب أن تضع الدالة "printMessage(message)‎" الرسالة في النافذة الجديدة! (وظيفة مهمة بطريقة مختلفة).

أعد استخدام الأسماء

اقتباس

عند تقسيم الكل، تحتاج الأجزاء إلى أسماء. يوجد بالفعل أسماء كافية للجميع. يجب أن تعرف متى تتوقف.

تاو تي تشينغ

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

إحدى الطرق المتقدمة هي باستبدال قيمة متغير ما بمحتوى آخر مختلف تماما عن السابق خفية داخل حلقة أو دالة.

على سبيل المثال:

function ninjaFunction(elem) {
  // elem عشرون سطرًا من الشيفرة يتعامل مع المتغير

  elem = clone(elem);

  // elem عشرون سطرًا إضافيًا يتعامل الآن مع نسخة من المتغير
}

سيتفاجئ المبرمج الآخر الذي يريد التعامل مع elem في الجزء الثاني من الدالة لأنه سيكتشف فقط أثناء التنفيذ والتعقب وبعد تفحص الشيفرة بأنه يتعامل مع elem بعد استنساخه!

الشرطة السفلية للمتعة

ضع الشرطات السفلية _ و __ قبل أسماء المتغيرات. مثل "‎_name" أو "‎__value". سيكون جيدا إن كنت أنت فقط من تعرف معنى ذلك، أو استخدمها للمتعة فقط دون معنى معين. أو استخدم معانٍ مختلفة في أماكن مختلفة.

بهذا ترمي عصفورين بحجر. أولا، تصبح الشيفرة البرمجية أطول وأصعب للقراءة. ثانيا، سيأخذ القارئ وقتا لمعرفة معنى الشرطات السفلية.

يضع مبرمج النينجا الذكي الشرطات السفلية في مكان معين من الشيفرة البرمجية ويتجنبها في أماكن أخرى. هذا يجعل الشيفرة البرمجية أكثر هشاشة ويزيد من احتمالية الخطأ المستقبلي.

اظهر حبك

أظهر للجميع مدى روعة المكونات التي تستخدمها! ستُبهِر الأسماء مثل superElement، megaFrame، و niceItem القارئ.

يمكن كتابة: "super..‎"، و "mega..‎"، و"nice..‎" لكن بطريقة لا تُظهِر تفاصيلًا حول المعنى. قد يبحث القارئ عن معانِ خفية ويتأمل لساعة أو اثنتين من وقته.

داخِل المتغيرات الخارجية

اقتباس

عندما تكون في الضوء، لا يمكنك رؤية شيء في الظلام. عندما تكون في الظلام، يمكنك رؤية كل شيء في الضوء

غوان ين زي

استخدم أسماء المتغيرات نفسها داخل وخارج الدوال. ببساطة، لا حاجة لاختراع أسماء جديدة.

let user = authenticateUser();

function render() {
  let user = anotherValue();
  ...
  ...many lines...
  ...
  ... // <-- هنا user يريد مبرمجٌ ما التعامل مع المتغير
  ...
}

سيفشل المبرمج الذي يقفز بِداخل الدالة render في ملاحظة أن هناك متغير user محلي يغطي على المتغير الخارجي.

سيتعامل مع user مُعتبِرًا أنه المتغير الخارجي نفسه، وبذلك ستكون نتائج الدالة "authenticateUser()‎" غير متوقعة وسينجح الفخ.

آثار جانبية في كل مكان

يوجد بعض الدوال التي تبدو كأنها لا تقوم بشيء مثل، "isReady()‎"، و "checkPermission()‎"، و "findTags()‎" …إلخ يُتَوَقَّع أنها تقوم بعمليات حسابية، تُوجِد وتٌرجِع قيم البيانات بدون تغيير شيء خارج نطاقها. بمعنى آخر، بدون آثار جانبية.

إضافة حدث مفيد إليها سيكون خدعة جيدة، بجانب مهمتها الرئيسية.

بالتأكيد، ستوسِّع نظرة الدهشة التي على وجه قارئ الشيفرة -عندما يرى دالة بالاسم "is..‎"، أو "check..‎"، أو "find..‎" وتُغَيِّر شيئا ما - آفاق المنطق لديك.

طريقة أخرى هي إرجاع نتيجة غير قياسية.

أظهر ذكائك! اجعل الدالة checkPermission تُرجِع كائنًا معقدًا يحتوي على نتيجة الفحص المُراد من الدالة.

سَيتساءل المطورون الذين سيكتبون "if (checkPermission(..))‎" عن سبب عدم عملها. حينها أخبرهم أن يقرأوا التوثيق ووجههم لهذا المقال :).

دوال قوية!

لا تجعل الدالة محدودة بما يتضمنه اسمها. توسَّع أكثر. على سبيل المثال، يمكن للدالة "validateEmail(email)‎" (بالإضافة إلى فحص صحة البريد الالكتروني) عرض رسالة خطأ وطلب إعادة إدخال البريد الإلكتروني.

لا يجب أن تكون باقي الوظائف واضحة من مسمى الدالة. مبرمج النينجا الحقيقي لن يجعل هذه الوظائف واضحة حتى في الشيفرة البرمجية.

الخلاصة

جميع الملاحظات السابقة هي من شيفرات برمجية حقيقية مكتوبة بواسطة مبرمجين محترفين، ربما أكثر احترافية منك

• اتبع بعض الملاحظات وستكون شيفرتك البرمجية مليئة بالمفاجآت.
• اتَّبِع اغلبها وستكون شيفرتك البرمجية حقا ملك لك أنت فقط، لن يريد أي شخص تغييرها.
• اتَّبِع جميعها وستصبح شيفرتك البرمجية درسًا قيمَا للمطورين المبتدئين الباحثين عن إرشاد.

ترجمة -وبتصرف- للفصل Ninja code من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: الاختبار الآلي باستخدام mocha
• المقال السابق: التعليقات

كما نعلم من جزء بنية الشيفرة البرمجية، يمكن ان تكون التعليقات ذات سطر واحد: وتبدأ ب // أو متعددة الأسطر: /* ... */.

تُستخدم التعليقات لوصف الغرض من الشيفرة البرمجية وآلية عملها. في أول مرة، قد تبدو التعليقات مهمة، لكن المبرمجين المبتدئين يستخدمونها بطريقة غير صحيحة.

التعليقات السيئة

يستخدم المبتدئون التعليقات لشرح "ماذا يحدث في الشيفرة البرمجية". كما يلي:

// ستقوم هذه الشيفرة البرمجية بهذا الأمر (...) وذلك الأمر (...)
// وربما أشياء أخرى
very;
complex;
code;

يجب أن يكون عدد التعليقات التوضيحية أقل في الشيفرات البرمجية الجيدة، لأن الشيفرة البرمجية يجب أن تكون مفهومة بدون تعليقات.

يوجد قاعدة مهمة حول هذا الأمر:"إن كانت الشيفرة البرمجية غير مفهومة لدرجة أنها تحتاج إلى التعليقات لشرحها، يجب أن تُكتب من جديد بدلًا من التعليقات التوضيحية الكثيرة".

طريقة: أخرج الدوال

أحيانا، يكون استبدال جزء من الشيفرة البرمجية أمرًا مهمًا كما يلي:

function showPrimes(n) {
  nextPrime:
  for (let i = 2; i < n; i++) {

    // check if i is a prime number
    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert(i);
  }
}

البديل الأفضل هو إخراج دالة isPrime:

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if (n % i == 0) return false;
  }

  return true;
}

بهذه الطريقة يمكننا فهم الشيفرة البرمجية بشكل أفضل لأن الدالة أصبحت بديلة عن التعليق. هذه الشيفرة البرمجية تسمى شيفرة برمجية موصوفة بحد ذاتها.

طريقة: أنشئ دوالًا

إن كان هناك شيفرة برمجية طويلة كما يلي:

// here we add whiskey
for(let i = 0; i < 10; i++) {
  let drop = getWhiskey();
  smell(drop);
  add(drop, glass);
}

// here we add juice
for(let t = 0; t < 3; t++) {
  let tomato = getTomato();
  examine(tomato);
  let juice = press(tomato);
  add(juice, glass);
}

// ...

فيُفضل إخراجه إلى دالة كما يلي:

addWhiskey(glass);
addJuice(glass);

function addWhiskey(container) {
  for(let i = 0; i < 10; i++) {
    let drop = getWhiskey();
    //...
  }
}

function addJuice(container) {
  for(let t = 0; t < 3; t++) {
    let tomato = getTomato();
    //...
  }
}

مرة اخرى.. يجب أن يكون عمل الدالة واضحا من اسمها وموضعها. هكذا لن نحتاج إلى الكثير من التعليقات. وستكون بنية الشيفرة البرمجية أفضل عند تجزئتها. وسيصبح من الواضح ماهي آلية عمل الدالة، وماذا تستقبل وماذا تُخرِج.

في الواقع لا يمكننا تجنب التعليقات التوضيحية. فهناك بعض الخوارزميات المعقدة وأدوات التعديل والتحسين الذكية (smart tweaks) للشيفرة البرمجية. لكن يجب أن نحاول أن نجعل الشيفرة البرمجية سهلا ويشرح نفسه.

التعليقات الجيدة

إن كانت التعليقات التوضيحية سيئة، فأي التعليقات هو الجيد؟

وصف الهيكلة

يُعطي نظرة عامة عن المكونات، وطريقة تفاعلها، وطريقة تدفق التحكم في مختلف الحالات، وما إلى ذلك. باختصار، ما يُسمى بالنظرة الشاملة. يوجد لغة خاصة UML لبناء رسوم هيكلية عالية المستوى لشرح الشيفرة البرمجية. هذه اللغة تستحق التعلم فعلا.

توثيق مُعامِلات الدوال واستخدامها

يوجد تركيب خاص بالجمل البرمجية يُسمَّى JSDoc لتوثيق الدوال: استخدامها، مُعامِلاتها، والقيم التي تُرجِعُها.

إليك المثال التالي:

/**
 * Returns x raised to the n-th power.
 *
 * @param {number} x The number to raise.
 * @param {number} n The power, must be a natural number.
 * @return {number} x raised to the n-th power.
 */
function pow(x, n) {
  ...
}

تتيح لنا هذه التعليقات فهم الغرض من هذه الدالة واستخدامها مباشرة دون الحاجة للنظر إلى تفاصيل الشيفرة البرمجية فيها.

يمكن للعديد من المُحررات فهم هذه التعليقات أيضا واستخدامها في الإكمال التلقائي وبعض حالات فحص الشيفرة التلقائي.

يوجد أيضا بعض الأدوات مثل JSDoc 3 والتي يمكنها توليد توثيق HTML من هذه التعليقات. للمزيد من المعلومات حول JSDoc اقرأ هنا http://usejsdoc.org/.

لم تم حل هذه المهمة بهذه الطريقة؟

ما هو مكتوب هو مهم، لكن قد يكون ما هو غير مكتوب أكثر أهمية لفهم ما يجري. لا تستطيع الشيفرة البرمجية الإجابة عن السؤال "لم تم حل هذه المهمة بهذه الطريقة؟".

إن كان هناك العديد من الطرق لحل هذه المهمة. لم تم اختيار هذه الطريقة؟ خاصة عندما لا تكون هذه الطريقة هي الأفضل.

بدون تعليقات توضح السبب يمكن حدوث التالي:

1. ستفتح الشيفرة البرمجية المكتوبة منذ وقت طويل (أنت أو أي شخص آخر) وسترى أنها "غير مناسبة".
2. ستفكر: "كم كنت غبيا حينها، وكم أنا ذكي الآن"، ثم ستُعيد كتابة الشيفرة البرمجية باستخدام البديل الذي تراه أكثر صحة وملائمة.
3. فكرة إعادة الكتابة تكون سهلة، لكن عند القيام بها تكتشف أن الحل "الأمثل" لا يتناسب مع الغرض المطلوب. حينها قد تتذكر السبب لأنك جربت الأمر ذاته مسبقا بالفعل ولم يفلح. ثم ستعود إلى الخيار السابق لكن بعد ضياع الوقت.

التعليقات التي توضح سبب استخدام طريقة ما هي مهمة جدا. فهي تساعد على الاستمرار بالتطوير مباشرة.

أي ميزات غير ملحوظة في الشيفرة البرمجية ومكان استخدامها

إن احتوت الشيفرة البرمجية على شيء غير ملحوظ أو شيء يُدرَك حدسيا، فيجب تعليقه.

الخلاصة

التعليقات هي علامة مهمة عن المطوِّر الجيد: وجودها أو عدم وجودها، إذ تتيح التعليقات الجيدة صيانة الشيفرة البرمجية جيدا، عند العودة لها بعد مدة من الوقت واستخدامها بكفاءة.

علِّق ما يلي:

• الهيكلة العامة، النظرة عالية المستوى.
• استخدام الدوال.
• الحلول المهمة، خاصة تلك الغير ملحوظة مباشرة.

تجنب التعليقات:

• التي تشرح آلية عمل الشيفرة البرمجية والغرض منها.
• ضع مثل هذه التعليقات عندما يكون من المستحيل جعل الشيفرة البرمجية سهلة القراءة وتصف نفسها وتحتاج لتوضيح فقط

تستخدم التعليقات أيضا للأدوات التي تقوم بالتوثيق تلقائيا مثل JSDoc3: تقرأ هذه الأدوات التعليقات وتولِّد ملفات HTML أو بأي صيغة أخرى.

ترجمة -وبتصرف- للفصل Comments من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: شيفرة النينجا البرمجية
• المقال السابق: نمط كتابة الشيفرة

يجب أن تكون الشيفرة البرمجية مرتبة ونظيفة وسهلة القراءة قدر الإمكان.

هذا ما يسمى بفن البرمجة وهو أخذ مهمة معقدة وبرمجتها بطريقة صحيحة ومقروءة في الوقت ذاته. يساعد نمط كتابة الشيفرة كثيرا في ذلك.

الصياغة

في الصورة أدناه يوجد صفحة تحوي بعض القواعد المهمة في تركيب الشيفرات البرمجية.

سنناقش هذه القواعد وأسبابها بالتفصيل.

ملاحظة: لا يوجد قواعد الزامية. لا يوجد قاعدة إلزامية لنمط التكويد. هذه القواعد تعد تفضيلات وليست أساسيات برمجية.

الأقواس المعقوصة (Curly Braces)

تُكتب الأقواس المعقوصة في معظم مشاريع JavaScript المعقوصة بالطريقة "المصرية" بوضع قوس الفتح في نفس السطر الذي يحوي الكلمة المفتاحية - ليس في سطر جديد. يجب وضع مسافة قبل القوس الافتتاحي كما يلي:

if (condition) {
  // افعل هذا
  //…. وذاك
  //…. وذاك
}

التعليمة المكونة من سطر واحد مثل if(condition) doSomething()‎ تعد حالة طرفية مهمة، فهل يجب استخدام الأقواس فيها؟

فيما يلي بعض البدائل المشروحة. يمكنك قراءتها والحكم على درجة سهولة قراءتها بنفسك:

1- يقوم بعض المبتدئون أحيانًا بما يلي. ما يعد ممارسة خاطئة. فلا حاجة لِلأقواس المعقوصة هنا:

if (n < 0) {alert(`Power ${n} is not supported`);}

2- الانتقال إلى سطر جديد بدون استخدام أقواس. تجنب هذا الأمر لأنه يسبب بعض الأخطاء:

if (n < 0)
  alert(`Power ${n} is not supported`);

3- سطر واحد بدون أقواس يُعد مقبولا في حال كان السطر قصيرًا:

if (n < 0) alert(`Power ${n} is not supported`);

4- أفضل الطرق:

if (n < 0) {
  alert(`Power ${n} is not supported`);
}

يمكن استخدام سطر واحد في حالة الشيفرات البرمجية المختصرة مثل: if (cond) return null. لكن استخدام شيفرة برمجية كتلية (كما في رقم 4) هو الأفضل من ناحية سهولة القراءة.

طول السطر

لا يحب أحدٌ قراءة سطر برمجي طويل. أصبح فصل الأسطر الطويلة ممارسة عامة لدى الجميع.

إليك المثال التالي:

// تسمح أقواس الفاصلة العليا المائلة ` بتقسيم النص إلى عدة أسطر
let str = `
  Ecma International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

بالنسبة للتعليمة البرمجية if:

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

يتم الاتفاق على الحد الأقصى لطول السطر البرمجي على مستوى فريق العمل. يكون طول السطر البرمجي غالبا 80 أو 120 محرفَا.

مسافة البادئة

يوجد نوعان من البادئة "Indents":

• البادئة الأفقية: 2 أو 4 مسافات:

تُصنع البادئة الأفقية بوضع 2 أو 4 مسافات أو باستخدام رمز البادئة الأفقية (الزر Tab). وُجدت اختلافات قديمة حول أيهما أفضل، لكن المسافات هي الأكثر شيوعا هذه الأيام.

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

show(parameters,
     aligned, // 5 spaces padding at the left
     one,
     after,
     another
  ) {
  // ...
}

• البادئة العمودية: الأسطر الفارغة لفصل الشيفرات البرمجية إلى أجزاء منطقية:

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

function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

يمكنك وضع سطر فارغ حيثما تريد لجعل الشيفرة البرمجية مقروءة بسهولة. لا يجب أن يوجد أكثر من 9 أسطر بدون بادئة عمودية.

الفواصل المنقوطة ";"

يجب أن توضع فاصلة منقوطة بعد كل تعليمة برمجية، حتى وإن كان من الممكن عدم إضافتها.

يوجد بعض اللغات حيث يكون استخدام الفاصلة المنقوطة اختياريا وتُستخدم نادرا. لكن في بعض الحالات في JavaScript لا يحل السطر الجديد محل الفاصلة المنقوطة مما يجعل الشيفرة البرمجية عرضة للخطأ. يمكنك الاطلاع أكثر عن ذلك في جزء بنية الشيفرة البرمجية.

إن كنت مبرمجًا متمرسًا في JavaScriptK، يمكنك اختيار نمط تكويد بدون فاصلة منقوطة مثل StandardJS. أو يُفَضَّل استخدام فواصل منقوطة لتجنب الأخطاء. أغلب المبرمجين يضعون فواصل منقوطة.

مستويات التداخل

تجنب تداخل الشيفرة البرمجية للعديد من المستويات. مثلًا، في الحلقة المتكررة يُفَضَّل استخدام التعليمة continue لتجنب التداخل العميق.

مثلا، بدلا من إضافة if شرطية داخلية كالتالي:

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- مستوى تشعيب إضافي
  }
}

يمكننا كتابة:

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- لا مزيد من التشعيبات
}

يمكن استخدام الأسلوب ذاته مع if/else و return. مثلًا، نحتاج لجزئين في المثال أدناه.

خيار 1:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

خيار 2:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

يُعد الخيار 2 أسهل قراءةً من الخيار 1 لأن الحالة الخاصة n < 0 فُحصت مسبقًا. بعد فحص قيمتها يمكننا الانتقال إلى جزء الشيفرة البرمجية الرئيسية بدون الحاجة لتداخل أكثر.

موضِع الدوال

في حال كنت تكتب العديد من الدوال المساعدة والتي تستخدمها الشيفرة البرمجية، فإن هناك 3 طرق لتنظيم هذه الدوال.

1- تعريف الدوال أعلى الشيفرة البرمجية التي تستخدمها:

// تعريفات الدوال
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// الشيفرة التي تستخدمها
let elem = createElement();
setHandler(elem);
walkAround();

2- الشيفرة البرمجية أولا ثم الدوال:

// الشيفرة التي تستخدم الدوال
let elem = createElement();
setHandler(elem);
walkAround();

// --- دوال مساعدة ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

3- الطريقة المختلطة: تُعرَّف الدالة في أول مكان تستخدم فيه.

الخيار الثاني هو الأفضل غالبا. ذلك لأنه عند قراءة شيفرة برمجية، فإننا نريد معرفة ما تقوم به أولا. إن كانت الشيفرة البرمجية في البداية فإن غرضها يكون واضحا مباشرة. أيضا، قد لا نحتاج لقراءة الدوال، خاصة إن كانت وظائفها واضحة من مسمياتها.

شروحات لأنماط كتابة الشيفرة

يحتوي دليل أنماط التكويد قواعد عامة حول كيفية كتابة شيفرة برمجية. مثلًا، الأقواس المستخدمة، وعدد مسافات البادئة، وأقصى طول للسطر، …الخ. والعديد من التفاصيل الدقيقة.

عندما يستخدم جميع أعضاء الفريق الدليل نفسه لنمط التكويد، ستبدو الشيفرة البرمجية موحدة بغض النظر عمن قام بكتابتها.

يمكن لأي الفريق الكتابة بنمط تكويد خاص بهم، لكن لا حاجة لذلك لوجود العديد من المعايير العالمية للاختيار منها.

بعض الخيارات الشهيرة:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Idiomatic.JS
• StandardJS
• وغيرها

في حال كنت مطورًا مبتدئًا، ابدأ بالشرح المزود هنا. ثم يمكنك الانتقال إلى دليل آخر مما ذكرناه لتتعرف على المزيد من التفاصيل وتختار الأسلوب الأنسب لك.

منقحات الصياغة التلقائية (Automated Linters)

منقحات الصياغة (Linters): هي عبارة عن أدوات يمكنها فحص نمط الشيفرة البرمجية تلقائيا واقتراح تعديلات لتحسينها.

الأمر الذي يجعلها مفيدة أكثر هو قدرتها على العثور على بعض الأخطاء، مثل الخطأ باسم متغير أو دالة ما، لهذا فإنه من المستحسن استخدام منقح صياغة (Linter) حتى لو لم تُرد اتباع نمط تكويد معين.

هنا بعض أدوات تنقيح الصياغة المعروفة مثل:

• JSLint – تُعد من أدوات تنقيح الصياغة الأولى.
• JSHint – تحوي اعدادات أكثر من JSLint.
• ESLint – الأحدث تقريبا.

كلها تؤدي الغرض ذاته. الكاتب هنا يستخدم ESLint. معظم هذه الأدوات تكون مدمجة مع العديد من المحررات الشهيرة: يجب عليك أن تُفَعِّل الإضافة في المحرر وتحدد نمط التكويد الذي تريده.

مثلا، لاستخدام ESLint اتَّبع ما يلي:

1. ثبت Node.js.
2. ثبت ESLint باستخدام الأمر npm install -g eslint (يُعد npm مُثَبِّت حزم JavaScript).
3. أنشئ ملف إعداد وسمِّه "‎.eslintrc" في ملف مشروع JavaScript الرئيسي (الملف الذي يحتوي على جميع الملفات).
4. ثبت/فعِّل الإضافة لمحررك الذي يدعم ESLint. معظم المحررات تدعم ESLint.

هنا مثال على ملف "‎.eslintrc":

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": ["warning", 2]
  }
}

التعليمة "extends" هنا تعني أن الإعداد يعتمد على مجموعة إعدادات ESLint الافتراضية "eslint:recommended". يُمكننا تعديل الإعدادات التي نريدها لاحقًا.

يمكن أيضا تنزيل مجموعة قواعد نمط التكويد وتوسيعها بدلا من ذلك. انظر في الرابط http://eslint.org/docs/user-guide/getting-started للمزيد من التفاصيل حول كيفية التثبيت.

تحتوي بعض المحررات على منقح صياغة مدمج فيها إلا أنها ليست بدقة ESLint.

الخلاصة

تهدف جميع قواعد بناء الجمل في هذا الفصل (وفي باقي مراجع أنماط التكويد) لرفع مستوى سهولة قراءة الأكواد. وجميع القواعد قابلة للنقاش.

عند التفكير في كتابة شيفرة برمجية بشكل أفضل، يجب أن نسأل أنفسنا: "ما الذي يجعل الشيفرة البرمجية أسهل للقراءة والفهم؟" و "ما الذي قد يساعدنا لتجنب الأخطاء؟" يوجد العديد من الأشياء التي يجب الانتباه لها أثناء اختيار نمط تكويد معين.

سيتيح لك قراءة العديد من أنماط التكويد معرفة أحدث الأفكار عن أنماط التكويد وأفضل الممارسات.

تمارين

نمط تكويد سيء

الأهمية: 4

ما الخطأ في نمط التكويد أدناه؟

function pow(x,n)
{
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(pow(x,n))
}

قم بإصلاحه.

الحل

function pow(x,n)  // <- لا يوجد مسافات بين المُعاملات
{  // <- قوس الفتح في سطر مستقل
  let result=1;   // <- عدم وجود مسافات قبل أو بعد =
  for(let i=0;i<n;i++) {result*=x;}   // <- لا يوجد مسافات
  // يجب أن يكون محتوى { ... } في سطر جديد
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'') // <-- ممكنة تقنيا، 
// لكن يُفَضَّل جعلها في سطرين، بالإضافة إلى عدم وجود مسافات وعدم وجود ;
// 
if (n<0)  // <- لا يوجد مسافات بين (n < 0), ويجب وجود سطر فارغ قبلها
{   // <- قوس الفتح في سطر مستقل
  // يمكن فصل الأسطر الطويلة في الأسفل حتى تصبح سهلة القراءة
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else // <- يمكن كتابتها في سطر واحد هكذا: "} else {"
{
  alert(pow(x,n))  // لا يوجد مسافات ولا يوجد ;
}

function pow(x, n) {
  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

let x = prompt("x?", "");
let n = prompt("n?", "");

if (n < 0) {
  alert(`Power ${n} is not supported,
    please enter an integer number greater than zero`);
} else {
  alert( pow(x, n) );
}

ترجمة -وبتصرف- للفصل Coding Style من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: التعليقات
• المقال السابق: تنقيح الأخطاء في Chrome

قبل كتابة شيفرات برمجية أكثر تعقيدا، لنتطرَّق إلى تنقيح الأخطاء.

تنقيح الأخطاء هي عملية إيجاد الأخطاء في السكريبت وإصلاحها. تدعم جميع المتصفحات الحديثة وبعض البيئات الأخرى "تنقيح الأخطاء" -واجهة مستخدم خاصة في أدوات المطور والتي تجعل العثور على الأخطاء وتصحيحها أمرا سهلا. تُتيح هذه الواجهة أيضا تَتَبُّع الأكواد خطوة بخطوة لمعرفة ما يحدث فيها بالتفصيل.

سنستخدم Chrome لأن لديه ميزات كافية لذلك، كما تتوفر هذه الميزات في معظم المتصفحات الأخرى.

جزء الموارد "sources"

قد يبدو إصدار Chrome لديك مختلفًا بعض الشيء، إلا أن المحتوى هو ذاته.

• افتح صفحة example في Chrome.
• شغِّل أدوات المطور بالضغط على F12 (على أجهزة Mac، استعمل الاختصار Cmd+Opt+I).
• اختر الجزء sources.

إن كانت هذه هي مرتك الأولى للدخول إلى جزء sources، فهذا ما ستراه:

يفتح هذا الزر علامة تبويب تحوي الملفات.

اضغط عليها واختر hello.js من العرض الشجري "tree view". يجب أن ترى التالي:

هنا يمكننا رؤية ثلاث مناطق:

• منطقة الموارد "Resources zone" والتي تعرض ملفات HTML، و JavaScritp، و CSS، وغيرها من الملفات بما في ذلك الصور المُلحقة بالصفحة. قد تظهر إضافات Chrome هنا أيضًا.
• منطقة المصدَر "Source zone" والتي تعرض الشيفرة البرمجية المصدرية.
• منطقة المعلومات والتحكم "Information and control zone" لتنقيح الأخطاء، سَنكتشفها أكثر فيما يلي

يمكنك الضغط على الزر مُجددًا لِإخفاء قائمة الموارد وإعطاء الشيفرة البرمجية مساحة كافية.

شاشة التحكم (Console)

تظهر شاشة تحكم عند الضغط على Esc. يمكن كتابة الأوامر في شاشة التحكم ثم الضغط على Enter لتنفيذها.

تظهر مخرجات تنفيذ أمر ما أسفله مباشرة في شاشة التحكم.

مثال: كما في الصورة بالأسفل 1+2 ينتج 3، بينما hello("debugger")‎ لا يُظهِر أي نتائج، لذلك فإننا نرى undefined:

نقاط التوقف (Breakpoints)

لنختبر ما يحدُث أثناء تنفيذ الشيفرة البرمجية في صفحة example. في الصفحة hello.js، اضغط على السطر رقم 4؛ نضغط على الرقم ذاته وليس السطر.

هكذا تكون قد أنشأت نقطة توقف. اضغط على الرقم 8 أيضًا. يجب أن يبدو الشكل كما في الصورة التالية:

نقطة التوقف هي نقطة يتوقف فيها مصحح الأخطاء عن تنفيذ JavaScript تلقائيًا.

يمكننا فحص المتغيرات الحالية وتنفيذ الأوامر أو أي شيء آخر في لوحة التحكم أثناء توقف عمل الشيفرة البرمجية. أي أنه يمكننا تتبع الشيفرة البرمجية عند نقطة معينة عبر ايقافها والتأكد من أي شيء فيها كما نريد.

يمكننا رؤية قائمة بالعديد من نقاط التوقف في الجزء الأيمن من الشاشة. يكون الأمر مفيدًا عند وجود عدة نقاط توقف في أكثر من ملف، وذلك يتيح لنا:

• التنقل بسرعة إلى نقاط التوقف في الشيفرة البرمجية (بالضغط عليها من الجزء الأيمن).
• إلغاء تفعيل نقاط التوقف مؤقتا بإلغاء تحديدها.
• حذف نقطة التوقف بالضغط عليها باليمين واختيار حذف "remove".
• وهكذا …

نقاط التوقف الشرطية

يتيح لك الضغط يمينَا على رقم السطر إنشاء نقطة توقف شرطية تُنَفَّذ عند تحقق الشرط المحدد فقط.

يكون ذلك مفيدَا عندما تريد إيقاف التنفيذ لمعرفة قيمة أي متغير أو قيمة أي معامل في دالة.

أمر Debugger

يمكن أيضا إيقاف تنفيذ الشيفرة البرمجية بوضع الأمر debugger فيه كما يلي:

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- يتوقف المنقح هنا

  say(phrase);
}

هذه الطريقة سهلة عندما نُعدِّل الشيفرة البرمجية باستخدم محرر الشيفرات البرمجية ولا نريد الانتقال إلى المتصفح وتشغيل السكربت في وضع أدوات المطور لإنشاء نقاط توقف.

توقف وتحقق

في المثال، يتم استدعاء الدالة hello()‎ أثناء تحميل الصفحة، لذلك فإن أسهل طريقة لتفعيل مُنقِّح الأخطاء (بعد إعداد نقاط التوقف) هي إعادة تحميل الصفحة. اضغط على F5 (لمستخدمي ويندوز أو لينكس)، أو اضغط على Cmd+R (لمستخدمي Mac).

سيتوقف تنفيذ الشيفرة البرمجية في السطر الرابع حيث تم إنشاء نقطة التوقف:

افتح قوائم المعلومات المنسدلة على اليمين (موضحة بأسهم). تتيح هذه القوائم التحقق من حالة السكريبت الحالية:

1- Watch - تعرض القيم الحالية لأي تعابير.

يمكنك الضغط على + وإدخال أي تعبير تريده. سيعرض المعالج قيمته في أي وقت وحساب قيمته تلقائيا أثناء التنفيذ.

2- Call Stack - تعرض سلسلة الاستدعاءات المتداخلة.

في الوقت الحالي، المعالج وصل حتى استدعاء الدالة hello()‎، المُستدعاة من خلال السكريبت index.html (لا يوجد دوال أخرى لذلك سُمِّيَت "anonymous").

إن ضَغَطت على عنصر من الحزمة (stack) مثلا "anonymous"، فسينتقل المعالج مباشرة إلى الشيفرة البرمجية المُمَثِّل لهذا العنصر وستتمكن من فحص جميع متغيراته أيضا.

3- Scope - تعرض المتغيرات الحالية.

Local تعرض متغيرات الدالة المحلية. يمكنك أيضا رؤية قيم هذه المتغيرات موضحة على اليمين.

Global تعرض المتغيرات الخارجية (خارج نطاق أي دالة).

يوجد أيضا الكلمة المفتاحية this والتي لم تُشرح بعد، لكن سيتم شرحها قريبا.

تتبع التنفيذ

يوجد بعض الأزرار لِتتبع التنفيذ أعلى يمين اللوحة. لِنتطرق إليها.

- زر استمرار التنفيذ F8.

يستأنف التنفيذ. إن لم توجد أي نقاط توقف، فإن التنفيذ سيستمر بعد الضغط على هذا الزر وسَيفقد مصحح الأخطاء السيطرة على السكريبت.

هذا ما سنراه بعد الضغط عليه:

تم استئناف التنفيذ، ووصل لنقطة توقف أخرى داخل الدالة say()‎ وتوقف هناك. انظر في Call stack على اليمين. تم تنفيذ استدعاء آخر. وصل التنفيذ الآن حتى الدالة say()‎.

- نفِّذ خطوة (نفّذ الأمر التالي)، لكن لا تنتقل إلى الدالة الأخرى، الوصول السريع F10.

سيظهر alert إذا ضغطنا على هذا الزر الآن. الأمر المهم هنا هو أن alert قد يحوي على أي دالة، لذلك فإن التنفيذ سيتخطاها.

- نفِّذ خطوة، الوصول السريع F11.

يقوم بنفس آلية عمل الأمر السابق بالإضافة إلى تنفيذ الدوال المتداخلة. سَتتنفذ أوامر السكريبت بالضغط عليه خطوة بخطوة.

- استمر بالتنفيذ حتى نهاية الدالة الحالية، باستخدام الزر Shift+F11.

سيتوقف التنفيذ عند آخر سطر للدالة الحالية. يكون هذا الأمر مفيدا عند الدخول إلى استدعاء دالة مصادفةَ باستخدام الزر ، لكن تتبع هذه الدالة ليس أمرا مهما، لذلك نقوم بتخطي تتبعها.

- تفعيل/تعطيل جميع نقاط التوقف.

لا يقوم هذا الزر بمتابعة التنفيذ، إنما يُفَعِّل/يُعطِّل كمَا كبيرا من نقاط التوقف.

- تفعيل/تعطيل التوقف التلقائي في حال حدوث خطأ.

عند تفعيله في وضع أدوات المطور، فإن الشيفرة البرمجية تتوقف عن التنفيذ تلقائيا عند أي خطأ في السكريبت. ثم يمكننا تحليل المتغيرات لمعرفة سبب الخطأ. لذلك، إن أوقف خطأ مَا متابعة تنفيذ الشيفرة البرمجية، يمكننا فتح مصحح الأخطاء وتفعيل هذا الخيار وإعادة تحميل الصفحة لرؤية مكان توقف الشيفرة البرمجية وما هو المحتوى عند تلك النقطة.

الاستمرار حتى هنا "Continue to here"

الضغط يمينا على سطر من الشيفرة البرمجية يفتح قائمة السياق المحتوية على خيار مفيد يُدعى "Continue to here".

يكون هذا الخيار مُفيدا عندما نريد التقدم بضع خطوات للأمام بدون وضع نقطة توقف.

التسجيل (Logging)

يمكن استخدام الدالة console.log لِعرض شيء على الشاشة كمُخرج من الشيفرة البرمجية. مثلا، يعرض الأمر التالي القيم من 0 حتى 4 إلى الشاشة:

// open console to see
for (let i = 0; i < 5; i++) {
  console.log("значение", i);
}

لا يرى المستخدم العادي هذه المخرجات. لرؤيتها، افتح علامة التبويب Console أو اضغط على Esc إن كنت في علامة تبويب أخرى هكذا تُفتًح الشاشة في الأسفل.

إن كانت الشيفرة البرمجية تحتوي على أوامر console.log، فسنرى ما يحدث من خلال سجلات التتبع بدون الدخول إلى المُصحح.

الخلاصة

كما رأينا، فإن هناك ثلاث طرائق رئيسية لإيقاف السكريبت:

1. باستخدام نقطة توقف.
2. الأمر debugger.
3. وجود خطأ (في حال كانت أداوت المطور مفتوحة وكان الزر مُفَعًّلَأ).

عند توقف السكريبت، يمكننا فحص المتغيرات وتتبع الشيفرة البرمجية لرؤية أي أخطاء.

يوجد العديد من الخيارات الأخرى في أدوات المطور أكثر مما تم شرحه سابقا. تجد الدليل كاملا على https://developers.google.com/web/tools/chrome-devtools.

تُعَد المعلومات التي وُضِعَت كافية لبدء تتبع أي شيفرة برمجية وتنقيحها، لكنك ستحتاج للاطلاع على الدليل لاحقا لتعلم ميزات متقدمة في أدوات المطور، خاصة إن كنت تتعامل كثيرا مع المتصفح.

يمكنك الضغط على عدة أماكن في أدوات المطور ورؤية ما يحدث. تُعد هذه أفضل طريقة لتعلم أدوات المطور. لا تنسَ الضغط يمينا وتجريب قوائم السياق.

ترجمة -وبتصرف- للفصل Debugging in Chrome من كتاب The JavaScript Language.

اقرأ أيضًا

• المقال التالي: نمط كتابة الشيفرة
• المقال السابق: مراجعة لما سبق

يلخِّص هذا الدرس مُميِّزات JavaScript التي تعرَّفنا عليها باختصار في الدروس السابقة مع إيلاء اهتمام خاص لأدق المواضيع.

صياغة الشيفرة

تنتهي التعليمات البرمجية في JavaScript بفاصلة منقوطة ;:

alert('مرحبًا'); alert('بالعالم');

يمكنك إنهاء تعليمة برمجية ببدء سطر جديد، إذ يعد محرف السطر الجديد على أنَّه فاصل للتعليمات:

alert('مرحبًا')
alert('بالعالم')

هذا ما يسمى «الإدراج التلقائي للفاصلة المنقوطة» (automatic semicolon insertion)، لكن يعمل كما هو متوقع في بعض الأحيان مثل الحالة التالية:

alert("سيحدث خطأ هنا بعد الرسالة")
[1, 2].forEach(alert)

تخبرك أغلب أدلة الصياغة بضرورة وضع فاصلة منقوطة بعد كل تعليمة برمجية (statement). انتبه إلى أنَّ الفاصلة المنقوطة غير مطلوبة بعد الكتل البرمجية {...} مثل كل الدوال وحلقات التكرار وغيرها:

function f() {
  // لا حاجة لفاصلة منقوطة بعد التصريح عن دالة
}
for(;;) {
  // لا حاجة لفاصلة منقوطة بعد حلقة تكرار
}

ولكن إذا وضعت فاصلة منقوطة «زائدة» في مكان ما داخل الشيفرة، لن تعدها JavaScript خطأ وستتجاهلها ببساطة.

تجد المزيد في فصل «بنية الشيفرة».

الوضع الصارم

إن أردت تمكين جميع ميزات JavaScript الحديثة كاملًا، يجب أن تستفتح السكربت بالموجه "use strict" مثل:

'use strict';
...

يجب أن يُكتَب هذا الموجِّه في بداية السكربت أو في بداية جسم الدالة.

تعمل الشيفرة بدون الموجه "use strict"، لكن هناك بعض الميزات تبقى على صورتها القديمة «المتوافقة» (compatible way). عمومًا، يُفضَّل العمل بالوضع الحديث دومًا.

تُفعِّل بعض مميزات JavaScript الحديثة، مثل الأصناف التي ستتعرف عليها لاحقًا، الوضع الصارم ضمنيًّا.

تجد المزيد في فصل «الوضع الصارم: ».

المتغيرات

يمكنك تعريف المتغيرات عبر:

• let
• const (متغير ثابت لا يمكن تغيير قيمته)
• var (نمط قديم سوف تتعرف عليه لاحقًا)

يمكن أن يحتوي اسم المتغير على:

• حروف وأعداد، لكن الحرف الأول لا يجب أن يكون عددًا.
• الرمزان _ و $.
• يُسمَح أيضًا باستخدام الحروف الهجائية غير اللاتينية والحروف الهيروغليفية، ولكنها غير شائعة الاستخدام.

يمكنك تخزين أي قيمة داخل المتغير مثل:

let x = 5;
x = "عبد الله";

إليك سبعة أنواع من البيانات:

• number: يمثِّل الأعداد العشرية والأعداد الصحيحة.
• string: يمثِّل السلاسل النصية.
• boolean: يمثِّل القيم المنطقية: true/false.
• null: هذا النوع يعني أن القيمة «فارغة» أو «غير موجودة».
• undefined: هذا النوع يعني أن القيمة «غير معرّفة».
• object و symbol: يمثِّل الأول بنية معقدة من البيانات والثاني مُعرِّفًا فريدًا، لم نسلط الضوء عليهما بعد.

يرجع المعامل typeof نوع القيمة، مع استثناءين:

typeof null == "object" // خطأ من أصل اللغة
typeof function(){} == "function" // تعامل الدوال معاملةً خاصة

تجد المزيد في فصل «المتغيرات وأنواع البيانات».

الدوال التفاعلية

لمَّا كنا نستعمل المتصفح بيئة عمل لنا، فستكون دوال واجهة المستخدم الأساسية هي:

• prompt(question, [default])‎: هي دالة تطرح السؤال question، ثم ترجع ما أدخله المستخدم أو تُرجع القيمة null في حال ألغى المستخدم عملية الإدخال (بالضغط على الزر "cancel").
• confirm(question)‎: هي دالة تطرح السؤال question ثم تُتيح لك الاختيار بين «موافق» (Ok) أو «إلغاء» (Cancel) ثم تعاد قيمة منطقية، true/false، تمثِّل هذا الاختيار.
• alert(message)‎: دالةٌ تُظهِر لك الرسالة message المُمرَّرة إليها فقط.

تظهر جميع هذه الدوال نافذة صغيرة تدعى «النافذة المنبثقة الشرطية» (modal window، وهي عنصر تحكم رسومي)، فهي توقف تنفيذ الشيفرة وتمنع المستخدم من التفاعل مع صفحة الويب حتى يتفاعل معها.

جرب تنفيذ المثال التالي:

let userName = prompt("ما اسمك؟‎", "محمد");
let isTeaWanted = confirm("هل تريد كوبًا من الشاي؟");
alert( "الزائر: " + userName ); // محمد
alert( "أيريد كوبًا من الشاي؟" + isTeaWanted ); // true

تجد المزيد في فصل «الدوال التفاعلية».

المعاملات

تدعم JavaScript المعاملات التالية:

المعاملات الحسابية

معاملات الحساب الأساسية وهي * + - / بالإضافة إلى المعامل % لإيجاد باقي القسمة، و أيضًا معامل القوة **.

يدمج معامل الجمع الثنائي + السلاسل النصية. إذا كان أحد العاملين عبارة عن سلسلة نصية، فسيُحوَّل الآخر إلى سلسلة نصية أيضًا مثل:

alert( '1' + 2 ); // '12', سلسلة نصية
alert( 1 + '2' ); // '12', سلسلة نصية

معاملات الإسناد

هنالك معامل إسناد بسيط وهو a = b ومعامل إسناد مركَّب مثل a *= 2.

المعاملات الثنائية

تعمل المعاملات الثنائية في المستوى المنخفض للبيانات أي في مستوى البتات، لذا ارجع إلى توثيقها في موسوعة حسوب إن لزمتك.

المعاملات الشرطية

المعامل الوحيد الذي يحوي ثلاث عوامل هو معامل علامة استفهام ? أو كما يسمى «المعامل الثلاثي»:

cond ? resultA : resultB

إذا تحقق الشرط cond، يُرجع المعامل القيمة resultA؛ خلا ذلك، يُرجع القيمة resultB.

المعاملات المنطقية

ينفِّذ المعاملان المنطقيان AND && و OR || «دارة تقييم قصيرة» (short-circuit evaluation) ثمَّ يرجعان القيمة المُقيَّمة الناتجة. يُحوِّل المعامل المنطقي NOT ! العامل الذي استدعي معه لقيمة منطقية ثم يُرجع القيمة المعاكسة له.

• معاملات الموازنة يُحوّل معامل المساواة == القيم المختلفة إلى أعداد ثم يتحقق من المساواة (ما عدا القيمة الفارغة null والقيمة غير المُعرَّفة undefined التي تساوي بعضها بعضًا). إليك المثال التالي:

alert( 0 == false ); // true
alert( 0 == '' ); // true

وكذلك تفعل معاملات الموازنة الأخرى.

فيما يخص معامل المساواة الصارمة === لا يُوحَّد نوع القيم المراد التحقق من تساويها، إذ تعد عملية التحقق من نوعين مختلفين بالنسبة لهذا المعامل عملية غير محققة دومًا (أي النوعان غير متساويين).

تعدُّ القيمة الفارغة null والقيمة غير المحددة undefined حالة خاصة، إذ تساوي إحداهما الأخرى (عبر المعامل ==) ولا تساويان أي شيء آخر.

توازن إشارة الأكبر وإشارة الأصغر >/< بين كل محرفين متقابلين من السلسلتين النصيّتين المراد موازنتها مع بعضهما، وأما بالنسبة لموازنة أنواع البيانات الأخرى، فتُحوَّل أولًا إلى أعداد ثم توازن.

معاملات أخرى

هنالك معاملات أخرى غير شائعة الاستخدام مثل معامل الفاصلة.

تجد المزيد في الفصول التالية: فصل «المعاملات في JavaScript» وفصل «معاملات الموازنة» وفصل «المعاملات المنطقية».

حلقات التكرار

لقد غطينا ثلاثة أنواع من حلقات التكرار هي:

// 1
while (condition) {
  ...
}
// 2
do {
  ...
} while (condition);
// 3
for(let i = 0; i < 10; i++) {
  ...
}

المتغير الذي يُعرَّف داخل حلقة التكرار for(let...)‎ مرئيٌّ داخلها فقط، ولكن يمكنك حذف let وإعادة استخدام المتغير.

يأمر الموجهان break/continue بإنهاء التكرار الحالي والعودة للحلقة (continue) أو الخروج من الحلقة بأكملها (break). يمكن استخدام اللافتات (labels) للتحكم بالحلقات المتداخلة وإنهائها مثلًا.

تجد المزيد في فصل «حلقتي التكرار while و for». وسوف نتعرف لاحقًا على المزيد من حلقات التكرار.

التعبير switch

يمكن للتعبير switch أن يحل محل التعبير الشرطي if، إذ يمنحك طريقة وصفية أكثر لموازنة قيمة ما مع عدَّة قيم. ويستخدم معامل المساواة الصارمة === في عملية الموازنة. إليك المثال التالي:

let age = prompt('كم عمرك؟‎', 18);
switch (age) {
  case 18:
    alert("لن يعمل"); // ‎الناتج سلسلة نصية وليس عدد
  case "18":
    alert("يعمل");
    break;
  default:
    alert("أي قيمة غير مساوية للقيمتين السابقتين");
}

تجد المزيد في فصل «التعبير switch».

الدوال

إليك ثلاث طرائق لإنشاء دالة في JavaScript: 1- التصريح عن دالة: تُعَّرف الدالة في سياق الشيفرة الرئيسية (ضمن النطاق العام) بشكل منفصل عن بقية التعليمات:

function sum(a, b) {
  let result = a + b;
  return result;
}

2- تعبير دالة: تُنشَأ الدالة داخل تعبير برمجي أو داخل كتلة برمجية أخرى:

let sum = function(a, b) {
  let result = a + b;
  return result;
};

3- الدوال السهمية:

// التعبير في الطرف الأيمن
let sum = (a, b) => a + b;
// يمكن أن تمتد على عدة أسطر باستعمال الأقواس المعقوصة شرط إعادة شيء
let sum = (a, b) => {
  // ...
  return a + b;
}
// دون معاملات
let sayHi = () => alert("مرحبًا");
// مع معامل وحيد
let double = n => n * 2;

• قد تحتوي الدوال على متغيرات محلية، إذ تُعرَّف تلك المتغيرات داخل جسم الدالة وتبقى مرئيًّة داخل الدالة فقط.
• يمكن أن تملك المعاملات قيمًا افتراضية مثل: function sum(a = 1, b = 2) {...}‎.
• تُرجع الدوال قيمة ما دائمًا. وإذا لم يكن هناك الموجه return، فستكون تلك القيمة المعادة القيمة undefined. تجد المزيد في فصل «الدوال».

المزيد قادم

كان ما سبق قائمةً مختصرةً بميزات JavaScript. لقد تعرّفت إلى الآن على الأساسيات في JavaScript. أمَّا في الدروس القادمة، فستتعرف على المزيد من المميزات والمواضيع المتقدمة، لذا خذ استراحة وتهيَّأ جيدًا لما هو قادم.

ترجمة -وبتصرف- للفصل JavaScript specials من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: تنقيح الأخطاء في Chrome
• المقال السابق: تعابير الدوال والدوال السهمية

الدالة ليست بنية سحرية تُبنَى بها الشيفرة في JavaScript، وإنما هي نوع خاص من القيم. يُطلق على الصياغة التي تُستخدم في بناء الدوال «التصريح عن دالة» (Function Declaration):

function sayHi() {
  alert( "مرحبًا" );
}

هناك صياغة أخرى لبناء دالة تسمى «تعبير دالة» (function expression) وتبدو بالشكل التالي:

let sayHi = function() {
  alert( "مرحبًا" );
};

تُعامل الدالة في هذه الصياغة مثل أي قيمة، إذ تُنشَأ ثم تُسنَد للمتغير sayHi كما توضح الشيفرة. بغض النظر عن الصياغة التي تُعرَّف بها الدالة، فهي مُجرَّد قيمة مُخزَّنة في المتغير sayHi. المراد من هذه الشيفرة هو نفسه في الشيفرة التي تسبقها: «إنشاء دالة ووضعها في المتغير sayHi».

يمكن عرض الدالة ككل باستخدام alert دون الأقواس:

function sayHi() {
  alert( "Hello" );
}
alert( sayHi ); // إظهار شيفرة الدالة

لاحظ أنَّ السطر الأخير في الشيفرة لا يستدعي الدالة لتنفيذها، وذلك بسبب عدم وجود الأقواس بعد اسمها sayHi. العديد من لغات البرمجة لا تتأثر بذلك (أي لا تهتم بوجود هذه الأقواس)، ولكن JavaScript ليست منها.

الدالة في JavaScript عبارة عن قيمة، لذا يمكن التعامل معها على أنها قيمة. يُظهِر الاستدعاء alert( sayHi );‎ سلسلة نصية تمثِّل شيفرة الدالة المُعرَّفة بأكملها، أي الشيفرة المصدرية للدالة.

الدالة عبارة عن قيمة خاصة، وأحد الأمور الخاصَّة التي تنفرد بها عن القيم العادية هي إمكانية استدعائها وتنفيذها وذلك بوضع الأقواس بعد اسمها بالشكل sayHi()‎ في أي مكان داخل الشيفرة. على أي حال، الدالة تبقى قيمة ولا مشكلة في معاملتها مثل أنواع القيم الأخرى. فيمكنك مثلًا إسناد دالة إلى متغير آخر:

function sayHi() {   // (1) إنشاء
  alert( "مرحبًا" );
}
let func = sayHi;    // (2) نسخ
func(); // مرحبًا‎     // (3) تنفيذ النسخة المنسوخة عن الدالة
sayHi(); // مرحبًا‎    //     !وهذا يعمل أيضًا ولمَ لا

إليك تفصيلٌ لما تنفِّذه الشيفرة السابقة:

1. ينشئ التصريح عن الدالة في السطر (1)الدالة ثمَّ يضعها في المتغير sayHi.
2. تُنسَخ الدالة في السطر (2) إلى المتغير func. لاحظ هنا عدم وجود أقواس استدعاء الدالة بعد sayHi. إذا أُضيفَت هذه الأقواس فإنَّ الاستدعاء func = sayHi()‎ سوف يُسنِد الناتج الذي تعيده الدالة إلى المتغير func وليس الدالة sayHi نفسها.
3. يمكنك الآن استدعاء الدالة عبر استدعاء sayHi()‎ أو func()‎.

يمكنك أيضًا استخدم تعبير الدالة للتصريح عن الدالة sayHi في السطر الأول:

let sayHi = function() { ... };
let func = sayHi;
// ...

كلا التعبيرين يعطيان النتيجة نفسها.

ملاحظة حول وجود الفاصلة المنقوطة في نهاية تعبير الدالة

قد تتساءل عن سبب وجود الفاصلة المنقوطة في نهاية «تعبير الدالة»، وعدم وجودها في نهاية «تعريف الدالة»:

function sayHi() {
  // ...
}
let sayHi = function() {
  // ...
};

الجواب بسيط:

• ليس هناك حاجة للفاصلة المنقوطة ; في نهاية كتل التعليمات البرمجية والصِيغ التي تستخدمها مثل if { ... }‎، و function f { }‎، و for { }‎ …إلخ.
• يُعدُّ تعبير الدالة، let sayHi = ...;‎، تعليمة برمجية (statement) ويُستخدَم على أنَّه قيمة أي هو ليس كتلة برمجية (code block) ولكنه عملية إسنادٍ لقيمة. تكتب الفاصلة المنقوطة ; في نهاية التعليمات البرمجية، بغض النظر عن ماهية هذه التعليمات؛ لذلك، لا ترتبط الفاصلة المنقوطة بتعبير الدالة نفسه إطلاقًا، وإنها فقط تُنهِي التعليمة البرمجية.

دوال رد النداء

إليك مزيدًا من الأمثلة حول تمرير الدوال على أنَّها قيم واستخدام تعابير الدوال.

سنكتب الدالة ask(question, yes, no)‎ التي تقبل تمرير ثلاثة معاملات إليها:

• المعامل question: يمثِّل نص السؤال.
• المعامل yes: يُمثِّل دالة يراد تنفيذها إذا كانت إجابة المعامل question هي yes.
• المعامل no: يمثِّل دالة يراد تنفيذها إذا كانت إجابة المعامل question هي no.

تطرح الدالة السؤال question، وبناءً على إجابة المستخدم، تُستدعى الدالة yes()‎ أو الدالة no()‎:

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
function showOk() {
  alert( "لقد وافقت!" );
}
function showCancel() {
  alert( "لقد ألغيت التنفيذ." );
}
// ask على أنها وسائط إلى الدالة showOk و showCancel تمرر الدالتين
ask("Do you agree?", showOk, showCancel);

مثل هذه الدوال مفيدةٌ للغاية في الحياة العملية. ويتمثَّل الاختلاف الرئيسي بين التنفيذ الواقعي العملي والمثال النظري أعلاه في أنَّ الأولى تستخدم طرائقًا أكثر تعقيدًا للتفاعل مع المستخدم من مجرد دالة confirm بسيطة. تُظهِر مثل هذه الدالة نافذة أسئلة مُعدَّلة جميلة المظهر في المتصفح لكن هذا موضوع آخر متقدم.

يسمى الوسيطين showOk و showCancel للدالة ask «بدوال ردود النداء» (callback functions) أو «ردود النداء» (callbacks) فقط.

الفكرة القابعة خلف «رد النداء» هي تمرير دالة ثم توقُّع إعادة استدعائها لاحقًا إذا لزم الأمر. أي مثلها كَمَثِل ارتداد صدى الصوت وعودته للمنادي أو مناداة أحدهم بطلبِ تنفيذ أمرٍ وتوقع إجابة النداء (رد النداء) بنتيجة الفعل وغيرها من الأمثلة المستقاة من الواقع.

في المثال السابق، تصبح الدالة showOk رد نداء للإجابة "نعم" (yes)، والدالة showCancel رد نداء للإجابة "لا" (no). يمكن استخدام تعبير دالة لكتابة الدالة نفسها بشكل أقصر:

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "هل تقبل؟",
  function() { alert("لقد قبلت."); },
  function() { alert("لقد ألغيت التنفيذ."); }
);

تُعرَّف الدوال هنا مباشرةً داخل الدالة ask(...)‎ ولا تملك اسمًا في هذه الحالة، لذا يُطلَّق عليها «دوال مجهولة» (anonymous). لا يمكن الوصول إلى مثل هذه الدوال من خارج الدالة ask(...)‎ (لعدم إسنادها إلى متغيرات) ولا يهمنا هذا الأمر هنا.

ملاحظة: الدالة عبارة عن قيمة تمثل «إجراء»

القيم العادية مثل السلاسل النصية أو الأعداد تمثِّل البيانات ولكن يمكن اعتبار الدالة -بما أنها قيمة خاصة- على أنَّها إجراء، لذا يمكنك تمريرها بين المتغيرات وتنفيذها عند الحاجة.

تعبير الدوال مقابل التصريح عن الدوال

يسلط هذا القسم الضوء على الاختلافات الرئيسية بين تعبير الدوال (Function Expressions) والتصريح عن الدوال (Function Declarations).

أولًا، الصياغة: كيف نفرِّق بينهما في الشيفرة.

• التصريح عن دالة: يُصرَّح عن الدالة في سياق الشيفرة الرئيسية بشكل منفصل عن بقية التعليمات البرمجية.

// التصريح عن دالة
function sum(a, b) {
  return a + b;
}

• تعبير دالة: تُنشَأ الدالة داخل تعبير برمجي (expression) أو داخل صياغة بانية أخرى. هنا، أُنشئَت الدالة في الجانب الأيمن من «تعبير الإسناد» (الإشارة =):

// تعبير دالة
let sum = function(a, b) {
  return a + b;
};

يظهر الفرق جليًّا عندما يُنشِئ محرك JavaScript كلتا الدالتين.

يُنشَأ تعبير الدالة عندما يصل تنفيذ الشيفرة إليه ويصبح جاهزًا للاستخدام من تلك اللحظة فقط.

بمجرد أن ينتقل تنفيذ الشيفرة إلى الجانب الأيمن من معامل الإسناد، let sum = function…‎، تُنشَأ الدالة وتستطيع استخدامها بدءًا من تلك اللحظة (إسناد، استدعاء، …إلخ).

التصريح عند الدوال مختلف بعض الشيء.

يمكن استدعاء الدالة المُصرَّح عنها قبل أن يصل تنفيذ الشيفرة إليها. فمثلًا تبقى الدالة المُصرَّح عنها في المجال العام مرئيَّةً لجميع أجزاء السكربت كله (أي يمكن أي يمكن استدعاؤها من أي مكان)، بغض النظر عن مكان وجودها في الشيفرة.

ذلك الأمر عائدٌ لخوارزميات داخلية تنفِّذها JavaScript قبل تنفيذ الشيفرة. فعندما تستعد JavaScript لتنفيذ سكربت ما، فإنَّها تبحث أولًا عن الدوال المصرَّح عنها في النطاق العام فيه وتنشئها. الأمر مشابه «لمرحلة التهيئة» (initialization stage). وبعد أن تعالج جميع تلك الدوال، تبدأ عملية تنفيذ الشيفرة، لذلك يمكن الوصول إليها من أي جزء من السكربت وتنفيذها. إليك المثال التالي:

sayHi("جعفر"); // ‎مرحبًا، جعفر
function sayHi(name) {
  alert( `مرحبًا، ${name}` );
}

تُنشَأ الدالة sayHi المُصرَّح عنها في المجال العام عندما تستعد JavaScript لتنفيذ السكربت، وتصبح مرئية في كامل أرجائه. لاحظ هنا أن السكربت لن يعمل كما سبق في حال استخدمت تعبير دالة بدلًا من عملية التصريح:

sayHi("جعفر"); // ‎!خطأ
let sayHi = function(name) {  // (*) ;-) بَطُل مفعول السحر هنا 
  alert( `Hello, ${name}` );
};

تُنشَأ الدالة هنا عند وصول التنفيذ إليها، يحدث ذلك في السطر (*)، لتعريفها بتعبيرٍ ويكون ذلك أي بعد فوات الأوان.

ميزة أخرى خاصة بعملية التصريح عن الدوال هي نطاق الكتلة الخاصة بها (block scope). فإن طُبِّق الوضع الصارم (strict mode) في السكربت، تُرَى الدالة المُعرَّفة داخل كتلة برمجية ضمنها فقط ولا يمكن الوصول إليها من خارجها.

على سبيل المثال، لنفترض أننا نريد تعريف الدالة welcome()‎ بناءً على قيمة المتغير age التي نحصل عليها أثناء تنفيذ السكربت من المستخدم. نلاحظ أن التنفيذ لن يسير على ما هو مخطط له إن صرحنا عن الدالة بالشكل التالي:

let age = prompt("كم عمرك؟‎", 18);
// welcome التصريح الشرطي عن الدالة 
if (age < 18) {
  function welcome() {
    alert("مرحبًا!");
  }
} else {
  function welcome() {
    alert("السلام عليكم!");
  }
}
// ثم استعمالها لاحقًا
welcome(); // غير معرّفة welcome خطأ: الدالة

حصلنا على ذلك الخطأ لأن الدالة المُصرَّح عنها داخل كتلة تبقى مرئية فقط ضمن نطاقها.دعنا نعدِّل على المثال السابق في محاولة لحل المشكلة:

let age = 16; // لنعتمد العمر 16 مثلًا
if (age < 18) {
  welcome();              // \   (تنفيذ)
                          //  |
  function welcome() {    //  |
    alert("مرحبًا!");         //‎  |  تعريف الدالة موجود داخل النطاق حيث استدعيت
  }                       //  |  
                          //  |
  welcome();              // /   (تنفيذ)
} else {
  function welcome() {    // لمَّا كان العمر 16، لن تُنشَأ هذه الدالة
    alert("السلام عليكم!");
  }
}
// لم يعد هنالك نطاق (مجال) لأي كتلة هنا لعدم وجود أقواس معقوصة
// لذا، لن نستطيع رؤية الدالتين المنشأتين داخل الكتلتين السابقتين
welcome(); // غير معرّفة welcome خطأ: الدالة

ما الذي يمكن فعله لجعل الدالة welcome مرئية خارج نطاق الكتلة if الشرطية؟ تتمثَّل الطريقة الصحيحة في استخدام تعبير الدوال وذلك بإسناد تنفيذ الدالة welcome لمتغير يُعرَّف في النطاق العام لتصبح مرئية خارج الشرط if. لاحظ أنَّ الشيفرة تعمل على النحو المطلوب بهذه الطريقة:

let age = prompt("كم عمرك؟‎", 18);
let welcome;
if (age < 18) {
  welcome = function() {
    alert("مرحبًا!");
  };
} else {
  welcome = function() {
    alert("السلام عليكم!");
  };
}
welcome(); // تمام، لا يوجد أي خطأ

بإمكانك ببساطة استخدام معامل علامة الاستفهام ? بالشكل التالي:

let age = prompt("كم عمرك؟‎", 18);
let welcome = (age < 18) ?
  function() { alert("مرحبًا!"); } :
  function() { alert("السلام عليكم!"); };
welcome(); // تمام، لا يوجد أي خطأ

متى عليك التصريح عن الدالة ومتى تستعمل تعبير الدالة؟

تمنح عملية التصريح عن الدوال حريةً أكبر في تنظيم الشيفرة، لتوفير إمكانية استدعاء هذه الدوال قبل تعريفها وهذه أهم نقطة تُؤخذ في الحسبان عند المفاضلة بين التصريح والتعبير. أضف إلى ذلك أنَّ صياغة التصريح تُسهِّل قراءة الشيفرة أيضًا، إذ من الأسهل البحث عن function f(…) {…}‎ في الشيفرة بدلًا من let f = function(…) {…}‎. فالتصريح ملفت للنظر أكثر من التعبير.

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

الدوال السهمية

هناك صياغة بسيطة وموجزة لإنشاء الدوال تسمى «الدوال السهمية» (Arrow functions)، وغالبًا ما تكون أفضل من تعبير الدوال. سُمي هذا النوع من الدوال بالدوال السهمية لأنها تشبه السهم ببساطة، وإليك صياغتها:

let func = (arg1, arg2, ...argN) => expression

يُنشِئ هذا دالة func تملك الوسائط arg1..argN، وتُقيِّم التعبير expression على الجانب الأيمن ثم تُرجِع قيمته.

لاحظ أنَّ السطر السابق يقابل الشيفرة التالية بالضبط:

let func = function(arg1, arg2, ...argN) {
  return expression;
};

ولكنه أكثر إيجازًا. إليك مثال آخر:

let sum = (a, b) => a + b;
/* صياغة الدالة السهمية أصغر من الصياغة العادية التالية
let sum = function(a, b) {
  return a + b;
};
*/
alert( sum(1, 2) ); // 3

يمكن حذف الأقواس في حال كان لديك وسيط واحد فقط:

// الصياغتان التاليتان متماثلتان
// let double = function(n) { return n * 2 }
let double = n => n * 2;
alert( double(3) ); // 6

إذا لم يكن هناك أي وسيط، توضع أقواس فارغة بالشكل التالي:

let sayHi = () => alert("مرحبًا!");
sayHi();

يمكن استخدام الدوال السهمية كما يُستخدَم تعبير الدوال. فإليك مثال الدالة welcome()‎ السابق باستعمال الدوال السهمية:

let age = prompt("كم عمرك؟‎", 18);
let welcome = (age < 18) ?
  () => alert('مرحبًا!') :
  () => alert("السلام عليكم!");
welcome(); // تمام، الدالة تعمل

تبدو الدوال السهمية للوهلة الاولى غير مألوفة وصعبة القراءة، لكن هذا سرعان ما يتغير عند اعتياد العينين على صيغة وهيكل تلك الدوال.

الدوال السهمية مناسبة جدًا لكتابة إجراءات بسيطة بسطر واحد فقط وستحبها كثيرًا إن كنت كسولًا (ميزة الكسل في المبرمج إيجابية جدًا :-D ) وتستثقل كتابة كلمات كثيرة.

ملاحظة: الدوال السهمية متعددة الأسطر

الأمثلة أعلاه أخذت الوسائط الموجودة على يسار المعامل <=، ومررتها إلى التعبير expression الموجود على جانبها الأيمن لتقييمه.

نحتاج في بعض الأحيان إلى شيء أكثر تعقيدًا، مثل التعابير والجمل البرمجية المتعددة، إذ في هذه الحالة استخدام الأقواس المعقوصة ثم استخدام الموجه return داخلها. إليك المثال التالي:

let sum = (a, b) => {  // يفتتح القوس المعقوص دالة متعددة الأسطر
  let result = a + b;
  return result; // للحصول على نتائج return إن استعملت الأقواس المعقوصة، فاستعمل
};
alert( sum(1, 2) ); // 3

ملاحظة: ما زال هنالك المزيد!

تناول هذا الدرس الدوال السهمية بإيجاز، لكن هذا ليس كل شيء! الدوال السهمية لها ميزات أخرى مثيرة للاهتمام، لذا سنعود إليها لاحقًا في الفصل «زيارة الدوال السهمية مجدَّدًا». يمكننا في الوقت الحالي استخدامها مع إجراءات السطر الواحد وردود النداء.

الخلاصة

• الدالة عبارة عن قيمة يمكن إسنادها أو نسخها أو تعريفها في أي مكان في الشيفرة.
• إن صُرِّح عن دالة في تعليمة برمجية (statement) منفصلة في سياق الشيفرة الرئيسية (النطاق العام)، فذلك يدعى «التصريح عن دالة».
• إن أُنشئت دالة في تعبير برمجي (expression)، فذلك يدعى «تعبير دالة».
• تعالج الدوال المُصرَّح عنها قبل تنفيذ الكتلة البرمجية (السكربت) الحاوية لها، وتصبح - نتيجةً لذاك - مرئيةً في أي مكان داخل الكتلة.
• تُنشَأ الدالة المُعرَّفة بوساطة تعبير عندما يحين دورها في التنفيذ بحسب مكان وجودها في السكربت.

التصريح هو الخيار المفضل والشائع في إنشاء الدوال، لتوفير إمكانية رؤية الدالة قبل أن يحين دورها في التنفيذ حيثما كان موضعها في السكربت. أضف إلى ذلك أنه يساعد على تنظيم الشيفرة ويُسهِّل من قراءتها.

من جهة أخرى، يُفضَّل تجنب استخدام تعبير الدوال إلا في الحالات التي لا يكون الصريح فيها ملائمًا. لقد تعرفت على مثالين في هذا الدرس يشرحان هذه النقطة، وسترى المزيد من الأمثلة في الدروس القادمة.

أخيرًا، وجدنا أن الدوال السهمية مفيدةٌ جدًا خصوصًا في كتابة إجراءات بسطر واحد، وتأتي بشكلين:

1. بدون أقواس معقوصة: ‎(...args) => expression، الجانب الأيمن عبارة عن تعبير، إذ تقيِّمه وترجع الناتج.
2. مع أقواس معقوصة: ‎(...args) => { body }‎، تساعدك الأقواس في كتابة تعليمات برمجية متعددة داخل الدالة الواحدة، لكننا بحاجة إلى الموجه return لإرجاع شيء ما.

تمارين

اكتب الشيفرة التالية مجدَّدًا باستعمال الدوال السهمية

ضع دوالًا سهمية مقابلة لتعابير الدوال الموجودة في الشيفرة التالية:

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "هل تقبل؟",
  function() { alert("لقد قبلت."); },
  function() { alert("لقد ألغيت التنفيذ."); }
);

الحل

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "هل قبلت؟",
  () => alert("لقد قبلت."),
  () => alert("لقد ألغيت التنفيذ.")
);

تبدو الشيفرة واضحة وقصيرة، أليس كذلك؟

ترجمة -وبتصرف- للفصل Function expressions والفصل Arrow functions, the basics من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: مراجعة لما سبق
• المقال السابق: الدوال في JavaScript

قد تحتاج أحيانًا إلى تنفيذ إجراء مماثل في أكثر من موضع في السكربت مثل عرض رسالةٍ جميلةٍ للمستخدم عند تسجيل الدخول وتسجيل الخروج وربما في مكان آخر أيضًا.

الدوال (Functions) عبارةٌ عن كتل برمجيَّة تُنفِّذ مجموعة من المهام وفق تسلسل مُحدَّد، فهي بذلك تُشكل «اللبنات الأساسية» للبرنامج. تسمح الدوال باستدعاء شيفرة ما عدَّة مرات دون الحاجة لكتابتها من جديد.

لقد رأيت خلال الدروس السابقة أمثلةً على دوال مبنيَّة مسبقًا (built-in functions)، مثل alert(message)‎، و prompt(message, default)‎، و confirm(question)‎، ويمكنك أيضًا إنشاء دوال خاصَّة بك.

تعريف الدوال

تُعرَّف الدالة بالصياغة التالية:

function showMessage() {
  alert( 'مرحبًا بالجميع!' );
}

تأتي الكلمة المفتاحية function أولًا، يليها اسم الدالة (showMessage في حالتنا)، ثم المعاملات (parameters) التي هي مجموعة من متغيرات تفصل فيما بينها بفاصلة لاتينية , (غير موجودة في المثال أعلاه لأنَّها اختياريَّة)، وأخيرًا جسم الدالة (function body) بين الأقواس المعقوصة وهو الإجراء المراد تنفيذه.

function name(parameters) {
  // جسم الدالة
}

تُستدعَى الدالة بكتابة اسمها متبوعًا بقوسين هلاليين () مثل showMessage()‎:

function showMessage() {
  alert( مرحبًا جميعًا!' );
}
showMessage();
showMessage();

يُنفِّذ الاستدعاء showMessage()‎ جسم الدالة أي أنك سترى الرسالة مرتين.

يوضِّح هذا المثال أحد أسباب استخدام الدوال، وهو تجنب تكرار الجمل البرمجية ذاتها. وفي حال أحتجت لتغيير الرسالة أو الطريقة التي تُعرَض بها، يكفي أن تُعدِّل الشيفرة من مكان واحد أي من الدالة فقط.

المتغيرات المحلية

المتغير الذي عُرِّف (صُرِّح عنه) داخل حدود دالةٍ ما مرئيٌّ فقط داخل هذه الدالة ويدعى أنذاك «متغيِّرًا محليًّا» (Local variable). إليك المثال التالي:

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // متغِّير محلي
  alert( message );
}
showMessage(); // Hello, I'm JavaScript!
alert( message ); // <-- خطأ! المتغيِّر محلي وموجود ضمن نطاق الدالة فقط

المتغيرات العامة

يُعرَّف المتغير العام (outer variable، ويدعى أيضًا global variable) خارج حدود الدالة ويمكنها الوصول إليه أيضًا مثل المتغيِّر userName في المثال التالي:

let userName = 'محمد';
function showMessage() {
  let message = 'مرحبًا، ' + userName;
  alert(message);
}
showMessage(); // مرحبًا، محمد

تملك الدالة الوصول الكامل إلى المتغير العام، إذ يمكنها التعديل عليه. فيمكننا مثلًا تعديل قيمة المتغيِّر userName العام من داخل الدالة قبل استعماله مثلًا:

let userName = 'محمد';
function showMessage() {
  userName = "أحمد‎"; // (1) تغيير قيمة المتغير العام
  let message = 'مرحبًا، ' + userName;
  alert(message);
}
alert( userName ); // محمد، قبل استدعاء الدالة
showMessage();
alert( userName ); // أحمد، بعد تعديل الدالة قيمته

تستخدم الدالة المتغير العام في حالة واحدة وهي عدم وجود متغير محلي.

إذا عُرِّف متغير محلي داخل دالة يحمل اسم المتغير العام نفسه، يغطي المتغيرالمحلي على العام ضمن حدود الدالة ويطغى عليه. في الشيفرة أدناه مثلًا، تستخدم الدالة showMessage()‎ المتغير userName الذي أنشئ محليًّا وتتجاهل المتغير الخارجي العام:

let userName = 'محمد';
function showMessage() {
  let userName = "أحمد‎"; // التصريح عن متغيِّر محلي
  let message = 'مرحبًا، ' + userName; // أحمد
  alert(message);
}
// ستنشئ الدالة المتغيّر المحلي الخاص بها وتستعمله
showMessage();
alert( userName ); // محمد، لم تغير الدالة المتغير العام أو تصل إليه

ملاحظة: المتغيرات العامة هي المتغيرات التي تُعرَّف خارج حدود الدالة وتكون مرئيةً من أي دالة (إلا إن حُجِبَت [shadowed] بمتغيِّر محلي يحمل الاسم نفسه). يعدُّ الحد من استخدام المتغيرات العامة سلوكًا جيدًا، إذ تحوي الشيفرة الحديثة عددًا قليلًا من المتغيرات العامة أو لا تحتوي عليها إطلاقًا. ومعظم المتغيرات مُعرَّفةٌ داخل دوالها (أي الاقتصار على المتغيرات المحلية). تفيد المتغيرات العامة أحيانًا في تخزين بيانات على مستوى المشروع ككل (project-level data).

المعاملات

يمكنك تمرير أية بيانات إلى الدوال باستخدام «المعاملات» (Parameters، وتسمى أيضًا وسائط الدالة [function arguments]).