تقدّم الكائنات العمومية متغيراتَ ودوال يمكن استعمالها من أي مكان. هذه الكائنات مضمّنة في بنية اللغة أو البيئة مبدئيًا.

في المتصفّحات تُدعى بالنافذة ‎window‎ وفي Node.js تُدعى بالعموميات ‎global‎ وفي باقي البيئات تُدعى بأيّ اسم مناسب يراه مطوّروها.

أُضيف حديثًا الكائن ‎globalThis‎ إلى اللغة ليكون اسم قياسيًا للكائن العمومي على أن تدعمه كلّ البيئات. ولكن بعض المتصفّحات (وبالخصوص عدا Chromium Edge) لا تدعم هذا الكائن بعد، ولكن يمكنك «ترقيعه تعدّديًا» بسهولة تامة.

سنستعمل هنا ‎window‎ على فرضية بأنّ البيئة هي المتصفّح نفسه. لو كنت ستشغّل السكربت الذي تكتبه في بيئات أخرى فربما تستعمل ‎globalThis‎ بدل النافذة تلك.

يمكننا طبعًا الوصول إلى كافة خصائص الكائن العمومي مباشرةً:

alert("Hello");
// تتطابق تمامًا مع
window.alert("Hello");

يمكنك في المتصفّحات التصريح عن الدوال العمومية والمتغيرات باستعمال ‎var‎ (وليس ‎let/const‎ !) لتصير خاصيات للكائن العمومي:

var gVar = 5;

alert(window.gVar); // ‫5 (تصير خاصية من خاصيات الكائن العمومي)

ولكن أرجوك ألا تعتمد على هذا الأمر! هذا السلوك موجود للتوافقية لا غير. تستعمل السكربتات الحديثة «وحداتَ جافاسكربت» (نشرحها في وقت لاحق) حيث لا يحدث هكذا أمر.

لن يحدث هذا لو استعملنا ‎let‎ هنا:

let gLet = 5;

alert(window.gLet); // ‫غير معرّف (لا تصير خاصية للكائن العمومي)

لو كانت القيمة هامّة جدًا جدًا وأردت أن تدخل عليها من أيّ مكان عمومي فاكتبها على أنّها خاصية مباشرةً:

// نجعل من معلومات المستخدم الحالي عمومية لتصل إليها كلّ السكربتات
window.currentUser = {
  name: "John"
};

// وفي مكان آخر يريدها أحد
alert(currentUser.name);  // John

// ‫أو (لو كان هناك المتغير المحلي ذا الاسم «currentUser»
// فنأخذها جهارةً من النافذة (وهذا آمن!)
alert(window.currentUser.name); // John

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

استعمالها للترقيع تعدديًا

المجال الذي نستعمل الكائنات العمومية فيه هو اختبار لو كانت البيئة تدعم مزايا اللغة الحديثة.

فمثلًا يمكننا اختبار لو كانت كائنات الوعود ‎Promise‎ المضمّنة في اللغة مضمّنة حقًا (لم تكن كذلك في المتصفحات العتيقة):

if (!window.Promise) {
  alert("Your browser is really old!"); // ‫تستعمل يا صاح متصفّحا من زمن الطيبين!
}

لو لم نجد هذه الكائنات (مثلًا نستعمل متصفّحًا قديمًا) فيمكننا «ترقيعه تعدّديًا»: أي إضافة الدوال التي لا تدعمها البيئة بينما هي موجودة في معيار اللغة الحديث.

if (!window.Promise) {
  window.Promise = ... // شيفرة نكتبها بنفسنا تؤدّي الميزة الحديثة في اللغة هذه
}

ملخص

• يحمل الكائن العمومي تلك المتغيرات التي يلزم أن نصل إليها أينما كنّا في الشيفرة.

  تشمل المتغيرات هذه كل ما هو مضمّن في بنية لغة جافاسكربت مثل المصفوفات ‎Array‎ والقيم المخصّصة للبيئة مثل ‎window.innerHeight‎ (ارتفاع نافذة المتصفّح).

• للكائن العمومي اسم عام في المواصفة: ‎globalThis‎.

  ولكن… دومًا ما نُشير إليه بالأسماء «الأثرية» حسب كل بيئة مثل ‎window‎ (في المتصفحات) و‎global‎ (في Node.js)، إذ أنّ ‎globalThis‎ هو مُقترح جديد على اللغة وليس مدعومًا في المتصفّحات عدة Chromium Edge (ولكن يمكننا ترقيعه تعدّديًا).

• علينا ألا نخزّن القيم في الكائن العمومي إلّا لو كانت حقًا وفعلًا عمومية للمشروع الذي نعمل عليه. كما ويجب أن يبقى عددها بأقل ما يمكن.

• حين نطوّر لاستعمال الشيفرات في المتصفّحات (لو لم نستعمل الوحدات)، تصير الدوال العمومية والمتغيرات باستعمال ‎var‎ خاصيات للكائن العمومي. علينا استعمال خاصيات الكائن العمومي مباشرةً (مثل ‎window.x‎) لتكون الشيفرة سهلة الصيانة مستقبلًا وأسهل فهمًا.

ترجمة -وبتصرف- للفصل Global object من كتاب The JavaScript language

ذكرنا في أوائل الفصول حين تكلمنا عن المتغيرات - ذكرنا ثلاث طرائق للتصريح عنها:

1. let
2. const
3. var

تتصرّف كلا الإفادتين ‎let‎ و‎const‎ بذات الطريقة (بالمقايسة مع البيئات المُعجمية).

بينما ‎var‎ فهو وحش آخر مختلف جذريًا ويعود في أصله إلى قرون سحيقة. لا نستعمله عادةً في السكربتات الحديثة ولكنّك ستجده حتمًا خلف إحدى صخور السكربتات القديمة.

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

من أول وهلة نرى بأنّ تصرّف ‎var‎ يشابه تصرّف ‎let‎، أي أنّه يُصرّح (مثل الثاني) عن متغير:

function sayHi() {
  // ‫متغير محلي، استعملنا «var» بدل «let»
  var phrase = "Hello"; 

  alert(phrase); // Hello
}

sayHi();

alert(phrase); // ‫خطأ، phrase غير معرّف

ولكن… ما خفي كان أعظم. إليك الفروق.

ليس لإفادة var نطاقًا كتليًا

حين نصرّح عن المتغيرات باستعمال ‎var‎ نكون جعلناها معروفة للدالة كاملةً (لو كانت في دالة) أو عمومية في السكربت. يمكنك أن ترى تلك المتغيرات إن اخترقت «جدران» الكُتل.

مثال:

if (true) {
  var test = true; // ‫نستعمل «var» بدل «let»
}

alert(test); // ‫الناتج true، أي أنّ المتغير «حيّ يُرزق» بعد إفادة if

تجاهل ‎var‎ كتل الشيفرة، وبهذا صار متغير ‎test‎ عموميًا.

لو استعملنا ‎let test‎ بدل ‎var test‎ فسيكون المتغير ظاهرًا لباقي الشيفرة داخل إفادة ‎if‎ فقط لا غير:

if (true) {
  let test = true; // ‫نستعمل «let»
}

alert(test); // ‫خطأ: لم يُعرّف عن test

يسري الأمر ذاته على الحلقات فلا يمكن أن يكون ‎var‎ محليًا حسب الكتلة أو حسب الحلقة:

for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // ‫10، ظهر «i» بعد الحلقة فهو متغير عمومي

لو كتبت كتلة شيفرة في دالة فسيصير ‎var‎ متغيرًا على مستوى الدالة كاملةً.

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // يمكننا فعل هذا
}

sayHi();
alert(phrase); // ‫خطأ: phrase غير معرّف (طالِع مِعراض المطوّر)

كما نرى فإفادة ‎var‎ تخترق كُتل ‎if‎ و‎for‎ وغيرها من كُتل شيفرة. يعزو ذلك إلى أنّه في الزمن الماضي الجميل لم تكن لكُتل جافاسكربت بيئات مُعجمية. و‎var‎ إحدى آثار ذلك الزمن.

تعالج التصريحات باستعمال ‎var‎ عند بدء الدالة

تُعالج التصريحات باستعمال ‎var‎ متى ما بدأت الدالة (أو بدأ السكربت، للمتغيرات العمومية).

أي أنّ متغيرات ‎var‎ تُعرّف من بداية الدالة مهما كان مكان تعريفها (هذا لو لم يكن التعريف في دالة متداخلة أخرى).

يعني ذلك أنّ هذه الشيفرة:

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

متطابقة تقنيًا مع هذه (بتحريك ‎var phrase‎ إلى أعلى):

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

أو حتى هذه (لا تنسَ بأنّ كُتل الشيفرات مُهملة):

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

يدعو الناس هذا السلوك بسلوك «الطفو» hoisting (أو الرفع) إذ أنّ متغيرات ‎var‎ «تطفو» إلى أعلى الدالة (أو ترتفع إلى أعلاها).

أي أنّه في المثال أعلاه، الفرع ‎if (false)‎ من الإفادة لا يعمل قط ولكن هذا ليس بمهم، إذ أنّ ‎var‎ داخله سيُعالج في بداية الدالة، وحين تصل عملية التنفيذ إلى ‎(*)‎ سيكون المتغير موجودًا لا محالة.

التصريحات تطفو صحيح، ولكنّ ليس عبارات الإسناد.

الأفضل لو نمثّل ذلك في هذا المثال:

function sayHi() {
  alert(phrase);  

  var phrase = "Hello";
}

sayHi();

في السطر ‎var phrase = "Hello"‎ إجراءان اثنان:

1. التصريح عن المتغير باستعمال var
2. إسناد قيمة للمتغير باستعمال ‎=‎.

يتعامل المحرّك مع التصريحات متى بدء تنفيذ الدالة (إذ التصريحات تطفو)، ولكنّ عبارة الإسناد لا تعمل إلّا حيثما ظهرت، فقط. إذًا فالشيفرة تعمل بهذا النحو فعليًا:

function sayHi() {
  var phrase; // ‫بادئ ذي بدء، يعمل التصريح...

  alert(phrase); // غير معرّف

  phrase = "Hello"; // ‫...هنا.
}

sayHi();

يُعالج المحرّك التصريحات ‎var‎ حين تبدأ الدوال، وبهذا يمكننا الإشارة إليها أينما أردنا في الشيفرة. ولكن انتبه فالمتغيرات غير معرّفة حتى تُسند إليها قيم.

في الأمثلة أعلاه عمل التابِع ‎alert‎ دون أيّ أخطاء إذ أن المتغير ‎phrase‎ موجود. ولكن لم تُسند فيه قيمة بعد فعرض ‎undefined‎.

ملخص

هناك فرقين جوهرين بين ‎var‎ موازنةً بِـ ‎let/const‎:

1. ليس لمتغيرات ‎var‎ نطاقًا كتليًا وأصغر نطاق لها هو في الدوال.
2. تُعالج التصريحات باستعمال ‎var‎ عند بدء الدالة (أو بدء السكربت، للمتغيرات العمومية).

هناك فرق آخر صغير يتعلّق بالكائن العمومي وسنشرحه في الفصل التالي.

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

ترجمة -وبتصرف- للفصل The old "var"‎ من كتاب The JavaScript language

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

كما نعلم بأنّ الدوال تستطيع الوصول إلى المتغيرات خارجها. نستعمل هذه الميزة كثيرًا.

ولكن، ماذا يحدث حين يتغيّر المتغيّر الخارجي؟ هل تستلم الدالة أحدث قيمة له أو تلك التي كانت موجودة لحظة إنشاء الدالة؟

كما وماذا يحدث حين تنتقل الدالة إلى مكان آخر في الشيفرة واستُدعت من ذلك المكان: هل يمكنها الوصول إلى المتغيرات الخارجية في المكان الجديد؟

يختلف سلوك اللغات عن بعضها من هذه الناحية. في هذا الفصل سنتحدّث عن سلوك جافاسكربت.

أسئلة تحتاج أجوبة

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

• تستعمل الدالة ‎sayHi‎ المتغير الخارجي ‎name‎. ما القيمة التي ستستعملها الدالة حين تعمل؟

let name = "John";

function sayHi() {
  alert("Hi, " + name);
}

name = "Pete";

sayHi(); // ‫ماذا ستعرض؟ «John» أم «Pete»؟

يشيع وجود هذه الحالات في المتصفّحات كما وفي الخواديم عند التطوير. يمكن أن تعمل الدالة بعدما تُنشأ بفترة لو أراد المطوّر (مثلًا بعد أن يتفاعل المستخدم أو يستلم المتصفّح طلبًا من الشبكة).

إذًا فالسؤال هو: هل تستعمل آخر التعديلات؟

• تصنع الدالة ‎makeWorker‎ دالةً أخرى وتُعيدها، ويمكن أن نستعدي تلك الدالة الجديدة من أيّ مكان آخر نريد. السؤال هو: هل يمكنها الوصول إلى المتغيرات الخارجية تلك التي من مكان إنشائها الأصلي، أم تلك التي في المكان الجديد، أم من المكانين معًا؟

function makeWorker() {
  let name = "Pete";

  return function() {
    alert(name);
  };
}

let name = "John";

// نصنع الدالة
let work = makeWorker();

// نستدعيها
work(); 

‫ماذا ستعرض الدالة work()‎؟ «Pete» (الاسم الذي تراه عند الإنشاء) أم «John» (الاسم الذي تراه عند الاستدعاء)؟

البيئات المعجمية

علينا أولًا أن نعرف ما هو «المتغير» هذا أصلًا لنُدرك ما يجري بالضبط.

في لغة جافاسكربت، تملك كلّ دالة عاملة أو كتلة شفرات ‎{...}‎ أو حتّى السكربت كلّه - تملك كائنًا داخليًا مرتبطًا بها (ولكنّه مخفي) يُدعى بالبيئة المُعجمية Lexical Environment.

تتألّف كائنات البيئات المُعجمية هذه من قسمين:

1. سجلّ مُعجمي Environment Record: وهو كائن يخزّن كافة المتغيرات المحلية على أنّها خاصيات له (كما وغيرها من معلومات مثل قيمة ‎this‎).
2. إشارة إلى البيئة المُعجمية الخارجية - أي المرتبطة مع الشيفرة الخارجية للكائن المُعجمي.

ليس «المتغير» إلا خاصية لإحدى الكائنات الداخلية الخاصة: السجل المُعجمي ‎Environment Record‎. وحين نعني «بأخذ المتغير أو تغيير قيمته» فنعني «بأخذ خاصية ذلك الكائن أو تغيير قيمتها».

إليك هذه الشيفرة البسيطة مثالًا (فيها بيئة مُعجمية واحدة فقط):

هذا ما نسمّيه البيئة المُعجمية العمومية (global) وهي مرتبطة بالسكربت كاملًَا.

نعني بالمستطيل (في الصورة أعلاه) السجل المُعجمي (أي مخزن المتغيرات)، ونعني بالسهم الإشارة الخارجية له. وطالما أنّ البيئة المُعجمية العمومية ليس لها إشارة خارجية، فذاك السهم يُشير إلى ‎null‎.

وهكذا تتغيّر البيئة حين تعرّف عن متغيّر وتُسند له قيمة:

نرى في المستطيلات على اليمين كيف تتغيّر البيئة المُعجمية العمومية أثناء تنفيذ الشيفرة:

1. حين تبدأ الشيفرة، تكون البيئة المُعجمية فارغة.
2. بعدها يظهر التصريح ‎let phrase‎، لكن لم تُسند للمتغيّر أيّ قيمة، لذا تخزّن البيئة ‎undefined‎.
3. تُسند للمتغير ‎phrase‎ قيمة.
4. وهنا تتغيّر قيمة ‎phrase‎.

بسيط حتّى الآن، أم لا؟

نلخّص الموضوع:

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

التصريح بالدوال

لم نرى حتّى اللحظة إلا المتغيرات. حان وقت التصريحات بالدوال.

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

وحين نتكلم عن أعلى الدوال مستوًى، فنعني ذلك لحظة بدء السكربت.

ولهذا السبب يمكننا استدعاء الدوال التي صرّحناها حتّى قبل أن نرى ذاك التعريف.

نرى في الشيفرة أدناه كيف أنّ البيئة المُعجمية تحتوي شيئًا منذ بداية التنفيذ (وليست فارغة)، وما تحتويه هي ‎say‎ إذ أنّها تصريح عن دالة. وبعدها تسجّل ‎phrase‎ المُصرّح باستعمال ‎let‎:

البيئات المُعجمية الداخلية والخارجية

الآن لنتعمّق ونرى ما يحدث حين تحاول الدالة الوصول إلى متغير خارجي.

تستعمل ‎say()‎ أثناء الاستعداء المتغير الخارجي ‎phrase‎. لنرى تفاصيل ما يجري بالضبط.

تُنشأ بيئة مُعجمية تلقائيًا ما إن تعمل الدالة وتخزّن المتغيرات المحلية ومُعاملات ذلك الاستدعاء

فمثلًا هكذا تبدو بيئة استدعاء ‎say("John")‎ (وصل التنفيذ السطر الذي عليه سهم):

let phrase = "Hello";

function say(name) {
 alert( `‎${phrase}, ${name}‎` );
}

say("John"); // Hello, John

إذًا… حين نكون داخل استدعاءً لأحد الدوال نرى لدينا بيئتين مُعجميتين: الداخلية (الخاصة باستدعاء الدالة) والخارجية (العمومية):

• ترتبط البيئة المُعجمية الداخلية مع عملية التنفيذ الحالية للدالة ‎say‎.

  تملك خاصية واحدة فقط: ‎name‎ (وسيط الدالة). ونحن استدعينا ‎say("John")‎ بهذا تكون قيمة ‎name‎ هي ‎"John"‎.

• البيئة المُعجمية الخارجية وهي هنا البيئة المُعجمية العمومية.

  تملك متغير ‎phrase‎ والدالة ذاتها.

للبيئة المُعجمية الداخلية إشارة إلى تلك «الخارجية».

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

لو لم يوجد المتغير في عملية البحث تلك فسترى خطأً (لو استعملت النمط الصارم Strict Mode). لو لم تستعمل ‎use strict‎ فسيُنشئ الإسناد إلى متغير غير موجود (مثل ‎user = "John"‎) متغيرًا عموميًا جديدًا باسم ‎user‎. سبب ذلك هو التوافق مع الإصدارات السابقة.

لنرى عملية البحث تلك في مثالنا:

• حين تحاول ‎alert‎ في دالة ‎say‎ الوصول إلى المتغير ‎name‎ تجده مباشرةً في البيئة المُعجمية للدالة.
• وحين تحاول الوصول إلى متغير ‎phrase‎ ولا تجده محليًا، تتبع الإشارة في البيئة المحلية وتصل البيئة المُعجمية خارجها، وتجد المتغير فيها.

يمكننا أخيرًا تقديم إجابة على السؤال في أول الفصل.

تأخذ الدالة المتغيرات الخارجية من مكانها الآن، أي أنها تستعمل أحدث القيم.

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

إذًا، إجابة السؤال الأول هي ‎Pete‎:

let name = "John";

function sayHi() {
  alert("Hi, " + name);
}

name = "Pete"; // (*)

sayHi(); // (*) Pete

سير تنفيذ الشيفرة أعلاه:

1. للبيئة المُعجمية العمومية ‎name: "John"‎.
2. في السطر ‎(*)‎ يتغيّر المتغير العمومي ويصير الآن ‎name: "Pete"‎.
3. تأخذ الدالة ‎sayHi()‎ حين تتنفّذ قيمة ‎name‎ من الخارج (أي البيئة المُعجمية العمومية) حيث صارت الآن ‎"Pete"‎.

لكلّ استدعاء منك، بيئة مُعجمية من اللغة لاحظ بأنّ محرّك اللغة يُنشئ بيئة مُعجمية جديدة للدالة في كلّ مرة تعمل فيها الدالة.

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

البيئات المُعجمية كائن في توصيف اللغة كائن «البيئة المُعجمية» (Lexical Environment) هو كائن في توصيف اللغة، أي أنّه موجود «نظريًا» فقط في توصيف اللغة لشرح طريقة عمل الأمور، ولا يمكننا أخذ هذا الكائن في الشيفرة ولا التعديل عليه مباشرةً. كما يمكن أن تُحسّن محرّكات جافاسكربت هذا الكائن أو تُهمل المتغيرات غير المستخدمة فتحفظ الذاكرة أو غيرها من خُدع داخلية، كلّ هذا بمنأًى عن السلوك الظاهر لنا فيظلّ كما هو.

الدوال المتداخلة

تكون الدالة «متداخلة» متى صنعتها داخل دالة أخرى.

ويمكنك بسهولة بالغة فعل ذلك داخل جافاسكربت.

يمكننا استعمال هذه الميزة لتنظيم الشيفرة الإسباغيتية، هكذا:

function sayHiBye(firstName, lastName) {

  // دالة مساعدة متداخلة نستعملها أسفله
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert( "Hello, " + getFullName() );
  alert( "Bye, " + getFullName() );

}

صنعنا هنا الدالة المتداخلة ‎getFullName()‎ لتسهّل حياتنا علينا، فيمكنها هي الوصول إلى المتغيرات الخارجية وإعادة اسم الشخص الكامل. كثيرًا ما نستعمل الدوال المتداخلة في جافاسكربت.

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

مثال على ذلك: أسندنا الدالة المتداخلة إلى كائن جديد باستعمال دالة مُنشئة:

// تُعيد الدالة المُنشئة كائنًا جديدًا
function User(name) {

  // نصنع تابِع الكائن على أنّه دالة متداخلة
  this.sayHi = function() {
    alert(name);
  };
}

let user = new User("John");
// ‫يمكن أن تصل شيفرة تابِع الكائن «sayHi» إلى «name» الخارجي
user.sayHi();

وهنا أنشأنا دالة «عدّ» وأعدناها، لا أكثر:

function makeCounter() {
  let count = 0;

  return function() {
    // ‫يمكنها الوصول إلى  متغير «count» الخارجي
    return count++; 
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2

لنتفحّص مثال ‎makeCounter‎. تصنع الشيفرة دالة «العدّ» وتُعيد العدد التالي كلّما استدعيناها. صحيح أنّ الدالة بسيطة لكن بتعديلها قليلًا يمكن استعمالها لأمور عديدة مفيدة مثل مولّدات الأعداد شبه العشوائية وغيرها.

ولكن كيف يعمل هذا العدّاد داخليًا؟

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

1. المتغيرات المحلية للدالة المتداخلة…
2. المتغيرات المحلية للدالة الخارجية…
3. وهكذا حتى نصل المتغيرات العمومية.

في هذا المثال وجدنا المتغير ‎count‎ في الخطوة الثانية. فلو عُدّلت قيمة المتغير الخارجي فيحدث هذا التعديل في المكان الذي وجدنا المتغير فيه. لهذا تجد ‎count++‎ المتغير الخارجي وتزيد قيمته في البيئة المُعجمية التي ينتمي المتغير إليها، تمامًا كما لو استعملنا ‎let count = 1‎.

إليك سؤالين تفكّر بهما (أيضًا):

1. هل يمكننا بطريقة أو بأخرى تصفير العدّاد ‎count‎ من الشيفرة التي لا تنتمي إلى ‎makeCounter‎؟ مثلًا بعد استدعاءات ‎alert‎ في المثال أعلاه.
2. حين نستعدي ‎makeCounter()‎ أكثر من مرة تُعيد لنا دوال ‎counter‎ كثيرة. فهل هي مستقلة بذاتها أم تتشارك ذات متغير ‎count‎؟

حاول حلّ السؤالين قبل مواصلة القراءة.

انتهيت؟

إذًا حان وقت الإجابات.

1. ما من طريقة أبدًا: متغير ‎count‎ هو متغير محلي داخل إحدى الدوال ولا يمكننا الوصول إليه من الخارج.
2. كلّ استدعاء من ‎makeCounter()‎ يصنع بيئة مُعجمية جديدة للدالة لها متغير ‎count‎ خاص بها. لذا فدوال ‎counter‎ الناتج مستقلة عن بعضها البعض.

إليك شيئًا تجربّه بنفسك:

function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

let counter1 = makeCounter();
let counter2 = makeCounter();

alert( counter1() ); // 0
alert( counter1() ); // 1

alert( counter2() ); // ‫0 (مستقل)

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

البيئات بالتفصيل الممل

إليك ما يجري في مثال ‎makeCounter‎ خطوةً بخطوة. احرص على اتباعه لتحرص على فهم آلية عمل البيئات بالتفصيل.

لاحظ أنّا شرحنا الخاصية الإضافية ‎[[Environment]]‎ هنا، ولم نشرحها سابقًا للتبسيط.

1. حين يبدأ السكربت لا يكون هناك إلى بيئة مُعجمية عمومية:

   

   في تلك اللحظة ليس هناك إلا دالة ‎makeCounter‎ إذ أنها تصريح عن دالة، ولم يبدأ تشغيلها بعد.

   تستلم كافة الدوال «لحظة إفاقتها للحياة» خاصية مخفية باسم ‎[[Environment]]‎ فيها إشارة إلى البيئة المُعجمية حيث أُنشئت.

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

   هنا أُنشأت ‎makeCounter‎ في البيئة المُعجمية العمومية، ولهذا فتُبقي ‎[[Environment]]‎ إشارة إليها.

   أي وبعبارة أخرى، «نطبع» على الدالة إشارةً للبيئة المُعجمية التي نشأت فيها، وخاصية ‎[[Environment]]‎ هي الخاصية الدالية المخفية التي تسجّل تلك الإشارة.

2. تبدأ أخيرًا الشيفرة بالعمل، ويرى المحرّك متغيرا عموميًا جديدًا بالاسم ‎counter‎ صرّحنا عنه وقيمته هي ناتج استعداء ‎makeCounter()‎. إليك نظرة على اللحظة التي تكون فيها عملية التنفيذ على أول سطر داخل ‎makeCounter()‎:

   

   تُنشأ بيئة مُعجمية لحظة استدعاء ‎makeCounter()‎ لتحمل متغيراتها ومُعاملاتها.

   وكما الحال مع البيئات هذه فهي تخزّن أمرين:

   1. سجلّ بيئي فيه المتغيرات المحلية. في حالتنا هنا متغير ‎count‎ هو الوحيد المحلي (يظهر حين يُنفّذ سطر ‎let count‎).
   2. الإشارة إلى البيئة المُعجمية الخارجية (وتُضبط قيمة لخاصية ‎[[Environment]]‎ للدالة). تُشير هنا ‎[[Environment]]‎ للدالة ‎makeCounter‎ إلى البيئة المُعجمية العمومية.

   إذًا لدينا بيئتين مُعجميتين اثنتين: الأولى عمومية والثانية مخصّصة لاستدعاء ‎makeCounter‎ الحالي، بينما الإشارة الخارجية لها هي البيئة العمومية.

3. تُصنع -أثناء تنفيذ ‎makeCounter()‎- دالة صغيرة متداخلة.

   لا يهمّنا إن كان التصريح عن الدالة أم تعبير الدالة هو من أنشأ… الدالة، فالخاصية ‎[[Environment]]‎ تُضاف لكل الدوال، وتُشير إلى البيئة المُعجمية التي صُنعت فيها تلك الدوال. وبطبيعة الحال فهذه الدالة الصغيرة المتداخلة لديها نصيب من الكعكة.

   قيمة الخاصية ‎[[Environment]]‎ للدالة المتداخلة هذه هي البيئة المُعجمية الحالية للدالة ‎makeCounter()‎ (مكان صناعة الدالة المتداخلة):

   

   لاحظ أنّ الدالة الداخلية (في هذه الخطوة) أُنشئت صحيح ولكن لم نستعدها بعد. الشيفرة في ‎return count++;‎ لا تعمل.

4. تُواصل عملية التنفيذ العمل وينتهي استدعاء ‎makeCounter()‎ ويُسند ناتجها (وهو الدالة المتداخلة الصغيرة) إلى المتغير العمومي ‎counter‎:

   

   ليس لتلك الدالة إلا سطرًا واحدًا: ‎return count++‎ وسيُنفّذ ما إن نشغّل الدالة.

5. وحين استدعاء ‎counter()‎ تُنشأ بيئة مُعجمية جديدة، لكنّها فارغة إذ أن ليس للدالة ‎counter‎ متغيرات محلية فيها، إلّا أنّ لخاصية الدالة ‎counter‎‏ ‎[[Environment]]‎ فائدة ففيها الإشارة «الخارجية» للدالة وهي التي تتيح لنا الوصول إلى متغيرات استدعاء ‎makeCounter()‎ السابق متى ما أنشأناه:

   

   أما الآن فحين يبحث الاستدعاء عن متغير ‎count‎ فهو يبحث أولًا في بيئته المُعجمية (الفارغة)، فلو لم يجدها بحث في البيئة المُعجمية لاستدعاء ‎makeCounter()‎ الخارجي، ويجد المتغير فيه.

   لاحظ آلية إدارة الذاكرة هنا. صحيح أنّ استدعاء ‎makeCounter()‎ انتهى قبل فترة إلا أن بيئته المُعجمية بقيت في الذاكرة لأنّ الدالة المتداخلة تحمل الخاصية ‎[[Environment]]‎ التي تُشير إلى تلك البيئة.

   يمكن القول بصفة عامة بأنّ البيئة المُعجمية لا تموت طالما يمكن لدالة من الدوال استعمالها. وحين لا توجد هكذا دالة - حينها تُمسح البيئة.

6. لا يُعيد استدعاء ‎counter()‎ قيمة الخاصية ‎count‎ فحسب، بل أيضًا يزيدها واحدًا. لاحظ كيف أنّ التعديل حدث «في ذات مكانه» In place، فتعدّلت قيمة ‎count‎ في البيئة ذاتها التي وجدناه فيها.

   

7. تعمل استدعاءات ‎counter()‎ التالية بنفس الطريقة.

أفترض الآن بأنّ إجابة السؤال الثاني في أول الفصل ستكون جليّة.

دالة ‎work()‎ في الشيفرة أدناه تأخذ الاسم ‎name‎ من مكانه الأصل عبر إشارة البيئة المُعجمية الخارجية إليه:

إذًا، فالناتج هنا هو ‎"Pete"‎.

ولكن لو لم نكتب ‎let name‎ في ‎makeWorker()‎ فسينتقل البحث إلى خارج الدالة تلك ويأخذ القيمة العمومية كما نرى من السلسلة أعلاه. في تلك الحالة سيكون الناتج ‎"John"‎.

المنغلقات هناك مصطلح عام يُستعمل في البرمجة باسم «المُنغلِق» Clousure ويُفترض أن يعلم به المطوّرون.

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

يعني ذلك بأنّ الدوال تتذكّر أين أُنشئت باستعمال خاصية ‎[[Environment]]‎ المخفية، كما ويمكن للدوال كافة الوصول إلى متغيراتها الخارجية.

لو كنت عزيزي مطوّر الواجهات في مقابلةً وأتاك السؤال «ما هو المُنغلِق؟» فيمكنك أن تقدّم تعريفه شرحًا، كما وتُضيف بأنّ الدوال في جافاسكربت كلّها مُنغلِقات، وربما شيء من عندك تفاصيل تقنية مثل خاصية ‎[[Environment]]‎ وطريقة عمل البيئات المُعجمية.

كُتل الشفرات والحلقات، تعابير الدوال الآنية

ركّزتُ في الأمثلة أعلاه على الدوال، إلا أنّ البيئة المُعجمية موجودة لكلّ كتلة شيفرات ‎{...}‎.

تُنشأ البيئة المُعجمية حين تعمل أيّ كتلة شيفرات فيها متغيرات تُعدّ محلية لهذه الكتلة. إليك بعض الأمثلة.

الجملة الشرطية If

في المثال أسفله نرى المتغير ‎user‎ موجودًا فقط داخل كتلة ‎if‎:

let phrase = "Hello";

if (true) {
    let user = "John";

    alert(`‎${phrase}, ${user}‎`); // Hello, John
}

alert(user); // ‫خطأ! لا أرى هذا المتغير!

حين تصل عملية التنفيذ داخل كتلة ‎if‎ يُنشئ المحرك البيئة المُعجمية «فقط وفقط إذا كذا…».

لهذه البيئة إشارة إلى البيئة الخارجية، بهذا يمكن أن تجد المتغير ‎phrase‎. ولكن على العكس فالمتغيرات وتعابير الدوال المصرَّح عنها داخل ‎if‎ في تلك البيئة المُعجمية لا يمكن أن نراها من الخارج.

فمثلًا بعدما تنتهي إفادة ‎if‎ لن يرى التابِع ‎alert‎ أسفلها متغير ‎user‎، وهذا سبب الخطأ.

حلقة «كرّر طالما»

لكلّ دورة في حلقة التكرار بيئة مُعجمية خاصة بها. وأيضًا لو صرّحت عن متغير في ‎for(let ...)‎ فسيكون موجودًا فيها:

for (let i = 0; i < 10; i++) {
  // لكلّ دورة بيئة مُعجمية خاصة بها
  // {i: value}
}

alert(i); // خطأ، ما من متغير كهذا

لاحظ كيف أنّ الإفادة ‎let i‎ خارج كتلة ‎{...}‎ بصريًا. مُنشئ حلقة ‎for‎ خاص نوعًا ما: لكلّ دورة من الحقة بيئة مُعجمية خاصة بها تحمل قيمة ‎i‎ الحالية فيها أيضًا.

وكما مع ‎if‎ فبعد انتهاء الحلقة لا نرى ‎i‎ خارجها.

كتل الشفرات

يمكننا أيضًا استعمال كتلة شفرات‎{…}‎ «مجرّدة» لنعزل المتغيرات في «نطاق محلي» خاص بها.

فمثلًا في متصفّح الوب تتشارك كل السكربتات (عدا التي فيها ‎type="module"‎) نفس المساحة العمومية. لذا لو أنشأنا متغيرًا عموميًا في واحد من السكربتات يمكن أن تراه البقية. هذا الأمر يتسبب بمشكلة لو استعمل سكربتان اثنان نفس اسم المتغير وبدأ كلّ منهما بتعويض الذي عند الآخر.

يمكن أن يحدث هذا لو كان اسم المتغير كلمة شائعة (مثلًا ‎name‎) ولا يدري مطورو السكربتات ما يفعله الغير.

يمكن أن نستعمل كتلة شيفرات لغول السكربت كاملًا أو جزءًا منه حتى لو أردنا تجنّب هذه المشكلة:

{
  // نُجري أمرًا على المتغيرات المحلية يُمنع على ما خارجنا رؤيته

  let message = "Hello";

  alert(message); // Hello
}

alert(message); // ‫خطأ: message غير معرّف

لا ترى الشيفرات خارج تلك الكتلة (أو حتى الموجودة في سكربت آخر) المتغيرات داخل الكتلة إذ أنّ لها بيئتها المُعجمية الخاصة بها.

تعابير الدوال الآنية IIFE

سابقًا لم تكن هناك بيئات مُعجمية للكُتل في جافاسكربت.

وكما «الحاجة أمّ الاختراع»، فكان على المطوّرين حلّ ذلك، وهكذا صنعوا ما سمّوه «تعابير الدوال آنيّة الاستدعاء» Immediately-Invoked Function Expressions.

لست تريد أن تكتب هذا النوع من الدوال في وقتنا الآن، ولكن يمكن أن تصادفك وأنت تطالع السكربتات القديمة فالأفضل لو تعرف كيف تعمل من الآن.

إليك شكل الدوال الآنية هذه:

(function() {

  let message = "Hello";

  alert(message); // Hello

})();

هنا أنشأنا تعبير دالة واستدعيناه مباشرةً/آنيًا. لذا فتعمل الشيفرة في لحظتها كما وفيها متغيراتها الخاصة بها.

الطريقة هي أن نُحيط تعبير الدالة بأقواس ‎(function {...})‎ إذ أنّ محرّك جافاسكربت حين يقابل ‎"function"‎ في الشيفرة الأساسية يفهمها وكأنّها تصريح عن دالة. ولكن، التصريح عن الدوال يحتاج اسمًا لها، بهذا فهذه الشيفرة ستَسبّب بخطأ:

// نحاول التصريح عن الدالة واستدعائها آنيًا
function() { // <-- Error: Unexpected token (

  let message = "Hello";

  alert(message); // Hello

}();

حتّى لو قلنا «طيب لنضيف ذلك الاسم» فلن ينفع إذ أنّ محرّك جافاسكربت لا يسمح باستدعاء التصاريح عن الدوال آنيًا:

// خطأ صياغي بسبب الأقواس أسفله
function go() {

}(); // <-- لا يمكن أن نستدعي التصريح عن الدوال آنيًا

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

ثمّة طرق أخرى دون الأقواس لنُقنع المحرّك بأنّ ما نعني هو تعبير الدالة:

// طرائق إنشاء هذه التعابير الآنية

(function() {
  alert("أقواس تحيط بالدالة");
}) ();

(function() {
  alert("أقواس تحيط بكامل الجملة");
}() );

! function() {
  alert("عملية الأعداد الثنائية NOT أوّل التعبير");
}();

+ function() {
  alert("عملية الجمع الأحادية أوّل التعبير");
}();

في كلّ الحالات أعلاه: صرّحنا عن تعبير دالة واستدعيناها آنيًا. لنوضّح ذلك ثانيةً: لم يعد هناك أيّ داع لنكتب هكذا شيفرات في وقتنا الحاضر.

كنس المهملات

عادةً ما تُمسح وتُحذف البيئة المُعجمية بعدما تعمل الدالة. مثال:

function f() {
  let value1 = 123;
  let value2 = 456;
}

f();

هنا القيمتين (تقنيًا) خاصيتين للبيئة المُعجمية. ولكن حين تنتهي ‎f()‎ لا يمكن أن نصل إلى تلك البيئة بأيّ طريقة فتُحذف من الذاكرة.

…ولكن لو كانت هناك دالة متداخلة يمكن أن نصل إليها بعدما تنتهي ‎f‎ (ولديها خاصية ‎[[Environment]]‎ التي تُشير إلى البيئة المُعجمية الخارجية)، لو كانت فيمكن أن نصل إليها:

function f() {
  let value = 123;

  function g() { alert(value); }

  return g; // (*)
}

let func = f(); // ‫يمكن أن تصل func الآن بإشارة إلى g
// بذلك تبقى في الذاكرة، ومعها بيئتها المُعجمية الخارجية

لاحظ بأنّه لو استدعينا ‎f()‎ أكثر من مرة، فسوف تُحفظ الدوال الناتجة منها وتبقى كائنات البيئة المُعجمية لكلّ واحدة منها في الذاكرة. إليك ثلاثة منها في الشيفرة أدناه:

function f() {
  let value = Math.random();

  return function() { alert(value); };
}

// في المصفوفة ثلاث دوال تُشير كلّ منها إلى البيئة المُعجمية
// ‫في عملية التنفيذ f()‎ المقابلة لكلّ واحدة
let arr = [f(), f(), f()];

يموت كائن البيئة المُعجمية حين لا يمكن أن يصل إليه شيء (كما الحال مع أيّ كائن آخر). بعبارة أخرى فهو موجود طالما ثمّة دالة متداخلة واحدة (على الأقل) في الشيفرة تُشير إليه.

في الشيفرة أسفله، بعدما تصير ‎g‎ محالة الوصول تُمسح بيئتها المُعجمية فيها (ومعها متغير ‎value‎) من الذاكرة:

function f() {
  let value = 123;

  function g() { alert(value); }

  return g;
}

// ‫طالما يمكن أن تصل func بإشارة إلى g، ستظلّ تشغل حيّزًا في الذاكرة
let func = f(); 

// ...والآن لم تعد كذلك ونكون قد نظّفنا الذاكرة
func = null; 

التحسينات على أرض الواقع

كما رأينا، فنظريًا طالما الدالة «حيّة تُرزق» تبقى معها كل متغيراتها الخارجية.

ولكن عمليًا تُحاول محرّكات جافاسكربت تحسين أداء ذلك. فهي تحلّل استعمال المتغيرات فلو كان واضحًا لها في الشيفرة بأنّ المتغير الخارجي لم يعد مستعملًا، تحذفه.

ثمّة -في محرّك V8 (كروم وأوبرا)- تأثير مهمّ ألا وهو أنّ هذا المتغير لن يكون مُتاحًا أثناء التنقيح.

جرّب تشغيل المثال الآتي في «أدوات المطوّرين» داخل متصفّح كروم.

ما إن يُلبث تنفيذ الشيفرة، اكتب ‎alert(value)‎ في الطرفية.

function f() {
  let value = Math.random();

  function g() {
    debugger; // ‫اكتب في المِعراض: alert(value);‎ ما من متغير كهذا!
  }

  return g;
}

let g = f();
g();

كما رأينا، ما من متغير كهذا! يُفترض نظريًا أن نصل إليه ولكنّ المحرّك حسّن أداء الشيفرة وحذفه.

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

let value = "Surprise!";

function f() {
  let value = "the closest value";

  function g() {
    debugger; // ‫اكتب في المِعراض: alert(value);‎ إليك Surprise!
  }

  return g;
}

let g = f();
g();

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

هذه ليست علّة في المنقّح بل هي ميزة خاصة في معيار V8. ربما تتغير لاحقًا من يدري. يمكنك أن تتحقّق منها متى أردت بتجربة الأمثلة في هذه الصفحة.

تمارين

هل العدّادات مستقلة عن بعضها البعض؟

الأهمية: 5

صنعنا هنا عدّادين اثنين ‎counter‎ و ‎counter2‎ باستعمال ذات الدالة ‎makeCounter‎.

هل هما مستقلان عن بعضهما البعض؟ ما الذي سيعرضه العدّاد الثاني؟ ‎0,1‎ أم ‎2,3‎ أم ماذا؟

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();
let counter2 = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1

alert( counter2() ); // ؟
alert( counter2() ); // ؟

الحل

الإجابة هي: 0,1.

صنعنا الدالتين ‎counter‎ و ‎counter2‎ باستدعاءين ‎makeCounter‎ مختلفين تمامًا.

لذا فلكلّ منهما بيئات مُعجمية خارجية مستقلة عن بعضها، ولكلّ منهما متغير ‎count‎ مستقل عن الثاني.

كائن عد

الأهمية: 5

هنا صنعنا كائن عدّ بمساعدة دالة مُنشئة Constructor Function.

هل ستعمل؟ ماذا سيظهر؟

function Counter() {
  let count = 0;

  this.up = function() {
    return ++count;
  };
  this.down = function() {
    return --count;
  };
}

let counter = new Counter();

alert( counter.up() ); // ؟
alert( counter.up() ); // ؟
alert( counter.down() ); // ؟

الحل

طبعًا، ستعمل كما يجب.

صُنعت الدالتين المتداخلتين في نفس البيئة المُعجمية الخارجية، بهذا تتشاركان نفس المتغير ‎count‎ وتصلان إليه:

function Counter() {
  let count = 0;

  this.up = function() {
    return ++count;
  };

  this.down = function() {
    return --count;
  };
}

let counter = new Counter();

alert( counter.up() ); // 1
alert( counter.up() ); // 2
alert( counter.down() ); // 1

دالة في شرط if

طالِع الشيفرة أسفله. ما ناتج الاستدعاء في آخر سطر؟

let phrase = "Hello";

if (true) {
  let user = "John";

  function sayHi() {
    alert(`‎${phrase}, ${user}‎`);
  }
}

sayHi();

الحل

الناتج هو: خطأ.

صُرّح عن الدالة ‎sayHi‎ داخل الشرط ‎if‎ وتعيش فيه فقط لا غير. ما من دالة ‎sayHi‎ خارجية.

المجموع باستعمال المُنغلِقات

الأهمية: 4

اكتب الدالة ‎sum‎ لتعمل هكذا: ‎sum(a)(b) = a+b‎.

نعم عينك سليمة، هكذا تمامًا باستعمال قوسين اثنين (ليست خطأً مطبعيًا).

مثال:

sum(1)(2) = 3
sum(5)(-1) = 4

الحل

ليعمل القوسين الثانيين، يجب أن يُعيد الأوليين دالة.

هكذا:

function sum(a) {

  return function(b) {
    return a + b; // ‫تأخذ «a» من البيئة المُعجمية الخارجية
  };

}

alert( sum(1)(2) ); // 3
alert( sum(5)(-1) ); // 4

الترشيح عبر دالة

الأهمية: 5

نعلم بوجود التابِع ‎arr.filter(f)‎ للمصفوفات. ووظيفته هي ترشيح كلّ العناصر عبر الدالة ‎f‎. لو أرجعت ‎true‎ فيُعيد التابِع العنصر في المصفوفة الناتجة.

اصنع مجموعة مرشّحات «جاهزة لنستعملها مباشرة»:

• ‎inBetween(a, b)‎ -- بين ‎a‎ و‎b‎بما فيه الطرفين (أي باحتساب ‎a‎ و‎b‎).
• ‎inArray([...])‎ -- في المصفوفة الممرّرة.

هكذا يكون استعمالها:

• ‎arr.filter(inBetween(3,6))‎ -- تحدّد القيم بين 3 و6 فقط.
• ‎arr.filter(inArray([1,2,3]))‎ -- تحدّد العناصر المتطابقة مع أحد عناصر ‎[1,2,3]‎ فقط.

مثال:

// .. ‫شيفرة الدالتين inBetween وinArray
let arr = [1, 2, 3, 4, 5, 6, 7];

alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6

alert( arr.filter(inArray([1, 2, 10])) ); // 1,2

الحل

1. المرشّح inBetween

function inBetween(a, b) {
  return function(x) {
    return x >= a && x <= b;
  };
}

let arr = [1, 2, 3, 4, 5, 6, 7];
alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6

2. المرشّح inArray

function inArray(arr) {
  return function(x) {
    return arr.includes(x);
  };
}

let arr = [1, 2, 3, 4, 5, 6, 7];
alert( arr.filter(inArray([1, 2, 10])) ); // 1,2

الترشيح حسب حقل الاستمارة

الأهمية: 5

أمامنا مصفوفة كائنات علينا ترتيبها:

let users = [
  { name: "John", age: 20, surname: "Johnson" },
  { name: "Pete", age: 18, surname: "Peterson" },
  { name: "Ann", age: 19, surname: "Hathaway" }
];

الطريقة الطبيعية هي الآتي:

// ‫حسب الاسم (Ann, John, Pete)
users.sort((a, b) => a.name > b.name ? 1 : -1);

// ‫حسب العمر (Pete, Ann, John)
users.sort((a, b) => a.age > b.age ? 1 : -1);

هل يمكن أن تكون بحروف أقل، هكذا مثلًا؟

users.sort(byField('name'));
users.sort(byField('age'));

أي، بدل أن نكتب دالة، نضع ‎byField(fieldName)‎ فقط.

اكتب الدالة ‎byField‎ لنستعملها هكذا.

الحل

let users = [
  { name: "John", age: 20, surname: "Johnson" }, 
  { name: "Pete", age: 18, surname: "Peterson" },
  { name: "Ann", age: 19, surname: "Hathaway" }
];

function byField(field) {
  return (a, b) => a[field] > b[field] ? 1 : -1;
}

users.sort(byField('name'));
users.forEach(user => alert(user.name)); // Ann, John, Pete

users.sort(byField('age'));
users.forEach(user => alert(user.name)); // Pete, Ann, John

جيش عرمرم من الدوال

الأهمية: 5

تصنع الشيفرة الآتية مصفوفة من مُطلقي النار ‎shooters‎.

يفترض أن تكتب لنا كلّ دالة رقم هويّتها، ولكن ثمّة خطب فيها…

function makeArmy() {
  let shooters = [];

  let i = 0;
  while (i < 10) {
    let shooter = function() { // دالة مُطلق النار
      alert( i ); // المفترض أن ترينا رقمها
    };
    shooters.push(shooter);
    i++;
  }

  return shooters;
}

let army = makeArmy();

army[0](); // مُطلق النار بالهويّة 0 يقول أنّه 10
army[5](); // ‫مُطلق النار بالهويّة 5 يقول أنّه 10...
// ... كلّ مُطلقي النار يقولون 10 بدل هويّاتهم 0 فَـ 1 فَـ 2 فَـ 3...

لماذا هويّة كلّ مُطلق نار نفس البقية؟ أصلِح الشيفرة لتعمل كما ينبغي أن تعمل.

الحل

لنُجري مسحًا شاملًا على ما يجري في ‎makeArmy‎، حينها يظهر لنا الحل جليًا.

1. تُنشئ مصفوفة ‎shooters‎ فارغة:

   let shooters = [];

    

2. تملأ المصفوفة في حلقة عبر ‎shooters.push(function...)‎.

   كلّ عنصر هو دالة، بهذا تكون المصفوفة الناتجة هكذا:

   shooters = [
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); },
     function () { alert(i); }
   ];

    

3. تُعيد الدالة المصفوفة.

لاحقًا، يستلم استدعاء ‎army[5]()‎ العنصر ‎army[5]‎ من المصفوفة، وهي دالة فيستدعيها.

الآن، لماذا تعرض كلّ هذه الدوال نفس الناتج؟

يعزو ذلك إلى عدم وجود أيّ متغير محلي باسم ‎i‎ في دوال ‎shooter‎. فحين تُستدعى هذه الدالة تأخذ المتغير ‎i‎ من البيئة المُعجمية الخارجية.

وماذا ستكون قيمة ‎i‎؟

لو رأينا مصدر القيمة:

function makeArmy() {
  ...
  let i = 0;
  while (i < 10) {
    let shooter = function() { // دالة مُطلق النار
      alert( i ); // المفترض أن ترينا رقمها
    };
    ...
  }
  ...
}

كما نرى… «تعيش» القيمة في البيئة المُعجمية المرتبطة بدورة ‎makeArmy()‎ الحالية. ولكن متى استدعينا ‎army[5]()‎، تكون دالة ‎makeArmy‎ قد أنهت مهمّتها فعلًا وقيمة ‎i‎ هي آخر قيمة، أي ‎10‎ (قيمة نهاية حلقة ‎while‎).

وبهذا تأخذ كلّ دوال ‎shooter‎ القيمة من البيئة المُعجمية الخارجية، ذات القيمة الأخيرة ‎i=10‎.

يمكن أن نُصلح ذلك بنقل تعريف المتغير إلى داخل الحلقة:

function makeArmy() {

  let shooters = [];

  // (*)
  for(let i = 0; i < 10; i++) {
    let shooter = function() { // دالة مُطلق النار
      alert( i ); // المفترض أن ترينا رقمها
    };
    shooters.push(shooter);
  }

  return shooters;
}

let army = makeArmy();

army[0](); // 0
army[5](); // 5

الآن صارت تعمل كما يجب إذ في كلّ مرة تُنفّذ كتلة الشيفرة في ‎for (let i=0...) {...}‎، يُنشئ المحرّك بيئة مُعجمية جديدة لها فيها متغير ‎i‎ المناسب لتلك الكتلة.

إذًا لنلخّص: قيمة ‎i‎ صارت «تعيش» أقرب للدالة من السابق. لم تعد في بيئة ‎makeArmy()‎ المُعجمية بل الآن في تلك البيئة المخصّصة لدورة الحلقة الحالية. هكذا صارت تعمل كما يجب.

أعدنا كتابة الشيفرة هنا وعوّضنا ‎while‎ بحلقة ‎for‎.

يمكننا أيضًا تنفيذ حيلة أخرى. لنراها لنفهم الموضوع أكثر:

function makeArmy() {
  let shooters = [];

  let i = 0;
  while (i < 10) {
    let j = i; // (*)
    let shooter = function() { // دالة مُطلق النار
      alert( j ); // (*) المفترض أن ترينا رقمها
    };
    shooters.push(shooter);
    i++;
  }

  return shooters;
}

let army = makeArmy();

army[0](); // 0
army[5](); // 5

كما حلقة ‎for‎، فحلقة ‎while‎ تصنع بيئة مُعجمية جديدة لكلّ دورة، وهكذا نتأكّد بأن تكون قيمة ‎shooter‎ صحيحة.

باختصار ننسخ القيمة ‎let j = i‎ وهذا يصنع المتغير ‎j‎ المحلي داخل الحلقة وينسخ قيمة ‎i‎ إلى نفسه. تُنسخ الأنواع الأولية «حسب قيمتها» By value، لذا بهذا نأخذ نسخة كاملة مستقلة تمامًا عن ‎i‎، ولكنّها مرتبطة بالدورة الحالية في الحلقة.

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

تتوقّع العديد من دوال جافاسكربت المضمّنة في اللغة عددًا من الوُسطاء لا ينتهي.

مثال:

• ‎Math.max(arg1, arg2, ..., argN)‎ -- يُعيد أكبر وسيط من الوُسطاء.
• ‎Object.assign(dest, src1, ..., srcN)‎ -- ينسخ الخصائص من ‎src1..N‎ إلى ‎dest‎.
• …وهكذا.

سنتعلّم في هذا الفصل كيف نفعل ذلك أيضًا. كما وكيف نمرّر المصفوفات إلى هذه الدوال على أنّها مُعاملات.

المعاملات «البقية» ...

يمكن أن ننادي الدالة بأيّ عدد من الوُسطاء كيفما كانت معرّفة الدالة.

هكذا:

function sum(a, b) {
  return a + b;
}

alert( sum(1, 2, 3, 4, 5) );

لن ترى أيّ خطأ بسبب تلك الوُسطاء «الزائدة». ولكن طبعًا فالنتيجة لن تأخذ بالحسبان إلا أوّل اثنين.

يمكن تضمين بقية المُعاملات في تعريف الدالة باستعمال الثلاث نقاط ‎...‎ ثمّ اسم المصفوفة التي ستحتويهم. تعني تلك النقط حرفيًا «اجمع المُعاملات الباقية في مصفوفة».

فمثلًا لجمع كلّ الوُسطاء في المصفوفة ‎args‎:

function sumAll(...args) { // ‫اسم المصفوفة هو args
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

يمكن لو أردنا أن نأخذ المُعاملات الأولى في متغيّرات ونجمع البقية فقط.

هنا نأخذ الوسيطين الأوليين في متغيرات والباقي نرميه في المصفوفة ‎titles‎:

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // ‫الباقي نضعه في مصفوفة الأسماء titles
  // ‫مثلًا titles = ["Consul", "Imperator"]‎
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

يجب أن تُترك المُعاملات البقية إلى النهاية تجمع المُعاملات البقية كلّ الوُسطاء التي بقيت. وبهذا فالآتي ليس منطقيًا وسيتسبّب بخطأ:

function f(arg1, ...rest, arg2) { // ‫الوسيط arg2 بعد ...البقية؟!
  // خطأ
}

يجب أن يكون ‎...rest‎ الأخير دومًا.

متغير الوسطاء arguments

هناك كائن آخر شبيه بالمصفوفات يُدعى ‎arguments‎ ويحتوي على كلّ الوُسطاء حسب ترتيب فهارسها.

مثال:

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // المصفوفة مُتعدَّدة
  // for(let arg of arguments) alert(arg);
}

// ‫تعرض: 2, Julius, Caesar
showName("Julius", "Caesar");

// ‫تعرض: 1, Ilya, undefined (ما من مُعطى ثانٍ)
showName("Ilya");

قديمًا لم تكن المُعاملات البقية موجودة في اللغة ولم يكن لدينا سوى استعمال ‎arguments‎ لنجلب كلّ مُعاملات الدالة. وما زالت تعمل الطريقة إلى يومنا هذا ويمكن أن تراها في الشيفرات القديمة.

ولكن السلبية هنا هي أنّ ‎arguments‎ ليست مصفوفة (على الرغم من أنّها شبيهة بالمصفوفات ومُتعدّدة). بهذا لا تدعم توابِع المصفوفات فلا ينفع أن نستدعي عليها ‎arguments.map(...)‎ مثلًا.

كما وأنّها تحتوي على كل الوُسطاء دومًا. لا يمكن أن نأخذ منها ما نريد كما نفعل مع المُعاملات البقية.

لهذا متى ما احتجنا إلى ميزة كهذه، فالأفضل استعمال المُعاملات البقية بدلًا من ‎arguments‎.

ليس للدوال السهمية ‎"arguments"‎ لو حاولت الوصول إلى كائن الوُسطاء ‎arguments‎ من داخل الدالة السهمية، فستستلم الناتج من الدالة «الطبيعية» الخارجية. إليك مثالًا:

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

كما نذكر فليس للدوال السهمية قيمة ‎this‎ تخصّها، أمّا الآن صرنا نعلم بأنّ ليس لها كائن ‎arguments‎ أيضًا.

مُعامل التوزيع

رأينا كيف نأخذ مصفوفة من قائمة من المُعطيات.

ولكن ماذا لو أردنا العكس من ذلك؟

فمثلًا لنقل أردنا استعمال الدالة المبنية في اللغة Math.max والتي تُعيد أكبر عدد من القائمة:

alert( Math.max(3, 5, 1) ); // 5

لنقل أنّ لدينا المصفوفة ‎[3, 5, 1]‎. كيف نستدعي ‎Math.max‎ عليها؟

لا ينفع تمريرها «كما هي» لأنّ ‎Math.max‎ يتوقّع قائمةً بالوُسطاء العددية لا مصفوفة واحدة:

let arr = [3, 5, 1];

alert( Math.max(arr) ); // NaN

وطبعًا لا يمكن أن نفكّ عناصر القائمة يدويًا في الشيفرة ‎Math.max(arr[0], arr[1], arr[2])‎ لأنّنا في حالات لا نعرف كم من عنصر هناك أصلًا. وما إن يتنفّذ السكربت يمكن أن يكون فيه أكبر مما كتبناه أو حتّى لا شيء أصلًا، وسنحصد لاحقًا ما جنته هذه الشيفرة.

عاش مُنقذنا مُعامل التوزيع! عاش عاش عاش! من بعيد نراه مشابهًا تمامًا للمُعاملات البقية، كما ويستعمل ‎...‎، إلّا أنّ وظيفته هي العكس تمامًا.

فحين نستعمل ‎‎...arr‎ في استدعاء الدالة، «يتوسّع» الكائن المُتعدَّد ‎...arr‎ إلى قائمة من الوُسطاء.

فمثلًا نعود إلى ‎Math.max‎:

let arr = [3, 5, 1];

// (يحوّل التوزيع المصفوفة إلى قائمة من الوُسطاء)
alert( Math.max(...arr) ); // 5

يمكن أيضًا أن نمرّر أكثر من مُتعدَّد واحد بهذه الطريقة:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

أو حتّى ندمج مُعامل التوزيع مع القيم العادية:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

كما يمكن أن نستعمل مُعامل التوزيعة لدمج المصفوفات:

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // ‫0,3,5,1,2,8,9,15 (0 ثمّ arr ثمّ 2 ثمّ arr2)

استعملنا في الأمثلة أعلاه مصفوفة لنشرح مُعامل التوزيع، إلّا أنّ المُتعدَّدات أيًا كانت تنفع أيضًا.

فمثلًا نستعمل هنا مُعامل التوزيع لنحوّل السلسلة النصية إلى مصفوفة محارف:

let str = "Hello";

alert( [...str] ); // H,e,l,l,o

يستعمل مُعامل التوزيع هذا داخليًا المُعدِّدات لجمع العناصر، كما تفعل حلقة ‎for..of‎.

لذا لو استلمت ‎for..of‎ سلسلةً نصيّة فتُعيد لنا المحارف وتصير ‎‎...str‎ بالقيمة ‎"H","e","l","l","o"‎. وهكذا تُمرّر قائمة المحارف إلى مُهيّئ المصفوفة ‎[...str]‎.

يمكننا أيضًا لهذه المهمة استعمال ‎Array.from‎ إذ أنّه يحوّل المُتعدَّد (مثل السلاسل النصية) إلى مصفوفة:

let str = "Hello";

// ‫يُحوّل Array.from المُتعدَّد إلى مصفوفة
alert( Array.from(str) ); // H,e,l,l,o

ناتجه هو ذات ناتج ‎[‎...str]‎.

ولكن… هناك فرق ضئيل بين ‎Array.from(obj)‎ و‎[...obj]‎:

• يعمل ‎Array.from‎ على الشبيهات بالمصفوفات والمُتعدَّدات.
• ويعمل مُعامل التوزيع على المُتعدَّدات فقط لا غير.

لذا لو أردت تحويل شيء إلى مصفوفة فالتابِع ‎Array.from‎ أكثر استعمالًا وشيوعًا.

ملخص

متى رأينا ‎"..."‎ في الشيفرة نعرف أنّه إمّا المُعاملات البقية وأمّا مُعامل التوزيع.

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

• حين ترى ‎...‎ موجودة في نهاية مُعاملات الدالة فهي «المُعاملات البقية» وستجمع بقية قائمة الوُسطاء في مصفوفة.
• وحين ترى ‎...‎ في استدعاء دالة أو ما شابهه فهو «مُعامل توزيع» يوسّع المصفوفة إلى قائمة.

طُرق الاستعمال:

• تُستعمل المُعاملات البقية لإنشاء دوال تقبل أيّ عدد كان من الوُسطاء.
• يُستعمل مُعامل التوزيع لتمرير مصفوفة إلى دوال تطلب (عادةً) قائمة طويلة من الوُسطاء.

كلا الميزتين تساعدك في التنقل بين القائمة ومصفوفة المُعاملات بسهولة ويُسر.

يمكنك أيضًا أن ترى كل وُسطاء استدعاء الدالة «بالطريقة القديمة» ‎arguments‎ وهو كائن مُتعدَّد شبيه بالمصفوفات.

ترجمة -وبتصرف- للفصل Rest parameters and spread syntax من كتاب The JavaScript language

فلنعد الآن إلى الدوال ونرى أمرها بتمعّن وتعمّق أكثر. سنتكلم أولًا عن التعاود (Rescursion).

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

يُعدّ التعاود (Rescursion) نمطًا برمجيًا نستعمله حين يمكن تقسيم المهمة الكبيرة جدًا إلى مهام أبسط منها متشابهة، أو حين يمكن تبسيط المهمة الواحدة إلى عملية بعضها بسيط وآخر يتشابه بين بعضه، أو نستعمله (كما سنرى قريبًا) للتعامل مع أنواعٍ محدّدة من بنى البيانات.

يمكن للدالة حين تحاول إجراء مهمّة ما نداءَ دوال أخرى. أحيانًا يمكن أن تنادي تلك الدالة نفسها ثانيةً. هذا ما ندعوه بالتعاود.

نهجان في التطوير

لنبدأ بما هو أبسط. لنكتب دالة ‎pow(x, n)‎ ترفع ‎x‎ إلى الأسّ الطبيعي ‎n‎. بعبارة أخرى، تضرب ‎x‎ بنفسه ‎n‎ مرّة.

pow(2, 2) = 4
pow(2, 3) = 8
pow(2, 4) = 16

يمكننا تنفيذ هذه الدالة بطريقتين اثنتين.

• التفكير بالتكرار: حلقة ‎for‎:

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

  // ‫نضرب الناتج في x - ‏n مرّة داخل الحلقة
  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

alert( pow(2, 3) ); // 8

• التفكير بالتعاود: تبسيط المهمة ونداء «الذات»:

function pow(x, n) {
  if (n == 1) {
    return x;
  } else {
    return x * pow(x, n - 1);
  }
}

alert( pow(2, 3) ); // 8

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

حين تُستدعى ‎pow(x, n)‎ تنقسم عملية التنفيذ إلى فرعين:

              if n==1  = x
             /
pow(x, n) =
             \       
              else     = x * pow(x, n - 1)

1. حين ‎n == 1‎، نرى كل شيء كالعادة. نسمّي تلك الحالة بأساس التعاود، لأنها تُعطينا الناتج البديهي مباشرة: ‎pow(x, 1)‎ تساوي ‎x‎.
2. عدى تلك فيمكننا تمثيل ‎pow(x, n)‎ على أنها ‎x * pow(x, n - 1)‎. يمكنك رياضيًا كتابة x<sup>n</sup> = x * x<sup>n-1</sup>. نسمّي هذه خطوة تعاودية: فنعدّل مهمة الأس الكبيرة لتصير عملية أبسط (الضرب في ‎x‎) ونستعمل استدعاءً أبسط لمهمة الأس (‎pow‎ ولكن ‎n‎ أقل). في الخطوات اللاحقة تصير أبسط وأبسط إلى أن تصل ‎n‎ إلى ‎1‎.

يمكن أيضًا أن نقول بأن ‎pow‎ تستدعي نفسها تعاوديًا حتى تكون ‎n == 1‎.

فمثلًا كي نحسب قيمة ‎pow(2, 4)‎ على التعاود إجراء هذه المهام:

1. pow(2, 4) = 2 * pow(2, 3)
2. pow(2, 3) = 2 * pow(2, 2)
3. pow(2, 2) = 2 * pow(2, 1)
4. pow(2, 1) = 2

للتلخيص، يبسّط التعاود استدعاء الدالة إلى استدعاءً آخر أبسط، وبعدها أبسط، وأبسط، وأبسط، حتّى يظهر الناتج ويصير معلومًا.

غالبًا ما تكون شيفرة التعاود أقصر عادةً ما يكون الحل باستعمال التعاود أقصر من التكرار بالحلقات.

يمكننا هنا مثلًا إعادة كتابة نفس الشيفرة ولكن باستعمال المُعامل الشرطي ‎?‎ بدل ‎if‎ لتصير ‎pow(x, n)‎ أقصر أكثر وتبقى مقروءةً لنا:

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

يُسمّى أقصى عدد من الاستدعاءات المتداخلة (بما في ذلك أول استدعاء) بعمق التعاود (Rescursion Depth). في حالتنا هنا سيكون هذا العمق ‎n‎.

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

يقصّر هذا من تطبيقات استعمال التعاود، ولكنّه مع ذلك مستعمل بشدة، إذ هناك مهام كثيرة لو استعملت عليها التعاود لأعطتك شيفرة أقصر وأسهل للصيانة.

سياق التنفيذ والمكدس

لنرى الآن كيف يعمل التعاود أصلًا، ولذلك لا بدّ من أن نرى ما خلف كواليس الدوال هذه.

تُخزّن المعلومات حول عملية تنفيذ الدالة (حين تعمل) في سياقها التنفيذي (execution context). يُعدّ سياق التنفيذ بنيةَ بيانات داخلية تحوي التفاصيل التي تخصّ عملية تنفيذ الدالة: إلى أين وصلت الآن؟ ما المتغيرات الحالية؟ ما قيمة ‎this‎ (لا نستعملها هنا) وتفاصيل أخرى داخلية. لكلّ استدعاء دالة سياق تنفيذي واحد مرتبط بها.

حين تستدعي الدالة دوال أخرى متداخلة، يحدث:

• تتوقف الدالة الحالية مؤقتًا.
• يُحفظ سياق التنفيذ المرتبط بها في بنية بيانات خاصّة تسمى مكدس سياق التنفيذ execution context stack.
• يتنفّذ الاستدعاء المتداخل.
• ما إن ينتهي، يجلب المحرّك التنفيذ القديم ذاك من المكدس، وتواصل الدالة الخارجية عملها حيث توقفت.

لنرى ما يحدث أثناء استدعاء ‎pow(2, 3)‎.

pow(2, 3)‎

يخزّن سياق التنفيذ (في بداية استدعاء ‎pow(2, 3)‎) المتغيرات هذه: ‎x = 2, n = 3‎ وأنّ سير التنفيذ هو في السطر رقم ‎1‎ من الدالة.

يمكن أن نرسمه هكذا:

• السياق: { x: 2, n: 3, عند السطر 1 } pow(2, 3)‎

هذا ما يجري حين يبدأ تنفيذ الدالة. بعد أن يصير الشرط ‎n == 1‎ خطأً، ينتقل سير التنفيذ إلى الفرع الثاني من الإفادة ‎if‎:

function pow(x, n) {
  if (n == 1) {
    return x;
  } else {
    return x * pow(x, n - 1);
  }
}

alert( pow(2, 3) );

ما زالت المتغيرات كما هي، ولكن السطر تغيّر. بذلك يصير السياق الآن:

• السياق: { x: 2, n: 3, عند السطر 5 } pow(2, 3)‎

علينا لحساب ‎x * pow(x, n - 1)‎ استدعاء ‎pow‎ فرعيًا بالوُسطاء الجديدة ‎pow(2, 2)‎.

pow(2, 2)‎

كي يحدث الاستدعاء المتداخل، يتذكّر محرّك جافاسكربت سياق التنفيذ الحالي داخل مكدس سياق التنفيذ.

هنا نستدعي ذات الدالة ‎pow‎، ولكن ذلك لا يهم إذ أنّ العملية هي ذاتها لكلّ الدوال:

1. «يتذكّر المحرّك» السياقَ الحالي أعلى المكدس.
2. يَصنع سياقًا جديدًا للاستدعاء الفرعي.
3. متى انتهى الاستدعاء الفرعي يُطرح (pop) السياق السابق من المكدس ويتواصل التنفيذ.

هذا مكدس السياق حين ندخل الاستدعاء الفرعي ‎pow(2, 2)‎:

• السياق: { x: 2, n: 2, عند السطر 1 } pow(2, 2)‎
• السياق: { x: 2, n: 3, عند السطر 5 } pow(2, 3)‎

سياق التنفيذ الحالي والجديد هو الأعلى (بالخط الثخين) وأسفله السياقات التي تذكّرها المحرّك سابقًا.

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

ملاحظة: نرى في الصورة أنّا استعملنا كلمة «سطر» إذ ليس في المثال إلّا استدعاءً فرعيًا واحدًا في السطر، ولكن يمكن أن تحتوي الشيفرات ذات السطر الواحد (بصفة عامة) على أكثر من استدعاءً فرعيًا، هكذا: ‎pow(…) + pow(…) + somethingElse(…)‎.

لذا سنكون أدقّ لو قلنا بأن عملية التنفيذ تتواصل «بعد الاستدعاء الفرعي مباشرةً».

pow(2, 1)‎

تتكرّر العملية: يُصنع استدعاء فرعي جديد في السطر ‎5‎ بالوسطاء الجديدة ‎x=2‎ و ‎n=1‎.

صنعنا سياقًا جديدًا، إذًا ندفع (push) الأخير أعلى المكدس:

• السياق: { x: 2, n: 1, عند السطر 1 } pow(2, 1)‎
• السياق: { x: 2, n: 2, عند السطر 5 } pow(2, 2)‎
• السياق: { x: 2, n: 3, عند السطر 5 } pow(2, 3)‎

الآن هناك سياقين اثنين قديمين، وواحد يعمل للاستدعاء ‎pow(2, 1)‎.

المخرج

نرى الشرط ‎n == 1‎ صحيحًا أثناء تنفيذ الاستدعاء ‎pow(2, 1)‎ (عكس ما سبقه من مرّات)، إذًا فالفرع الأول من إفادة ‎if‎ سيعمل هنا:

function pow(x, n) {
  if (n == 1) {
    return x;
  } else {
    return x * pow(x, n - 1);
  }
}

لا استدعاءات متداخلة من هنا، بذلك تنتهي الدالة وتُعيد ‎2‎.

وحين تنتهي الدالة لا يكون هناك حاجة لسياق التنفيذ فيُزال من الذاكرة، وبعدها يرجع السياق السابق أعلى المكدس:

• السياق: { x: 2, n: 2, عند السطر 5 } pow(2, 2)‎
• السياق: { x: 2, n: 3, عند السطر 5 } pow(2, 3)‎

يتواصل تنفيذ الاستدعاء ‎pow(2, 2)‎، وفيه ناتج الاستدعاء الفرعي ‎pow(2, 1)‎ لذا يُنهي أيضًا تنفيذ ‎x * pow(x, n - 1)‎ فيُعيد ‎4‎.

بعدها يستعيد المحرّك السياقَ السابق:

• السياق: { x: 2, n: 3, عند السطر 5 } pow(2, 3)‎

وحين ينتهي، يكون عندنا ناتج ‎pow(2, 3) = 8‎.

عمق التعاود في هذه الحالة هو: 3.

كما نرى في الصور أعلاه فعمق التعاود يساوي أقصى عدد من السياقات في المكدس.

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

خوارزميات الحلقات والتكرار أفضل من حيث استعمال الذاكرة:

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

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

  return result;
}

تستعمل دالة ‎pow‎ المتكرّرة سياقًا واحدًا تغيّر فيه المتغيران ‎i‎ و‎result‎ أثناء عملها، كما وأنّ احتياجاتها للذاكرة قليلة وثابتة ولا تعتمد على قيمة ‎n‎.

يمكن كتابة التعاودات أيًا كانت بصيغة الحلقات، وغالبًا ما تكون تلك الحلقات أفضل أداءً.

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

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

مسح الأشجار تعاوديًا

مسح الأشجار تعاوديًا Recursive Traversal هو تطبيق آخر عن روعة التعاود.

لنقل بأنّ لدينا شركة ويمكن أن نمثّل بنية موظّفيها في هذا الكائن:

let company = {
  sales: [{
    name: 'John',
    salary: 1000
  }, {
    name: 'Alice',
    salary: 600
  }],

  development: {
    sites: [{
      name: 'Peter',
      salary: 2000
    }, {
      name: 'Alex',
      salary: 1800
    }],

    internals: [{
      name: 'Jack',
      salary: 1300
    }]
  }
};

أي أنّ في الشركة أقسام عدّة.

• يمكن أن يحتوي كل قسم على مصفوفة من العاملين. فمثلًا لقسم المبيعات ‎sales‎ عاملين اثنين: John وAlice.

• أو أن ينقسم القسم إلى أقسام فرعية، مثل قسم التطوير ‎development‎ له فرعان: تطوير المواقع ‎sites‎ والبرمجيات الداخلية ‎internals‎. ولكلّ من الفرعين موظفين منفصلين.

• يمكن أيضًا أن يكبُر القسم الفرعي ويصير فروع من القسم الفرعي (أي «فِرَق»).

  مثلًا قسم المبيعات ‎sites‎ سيتطوّر ويتحسّن وينقسم مستقبلًا إلى فرعين ‎siteA‎ و ‎siteB‎. وبعدها ربما (لو عمل فريق التسويق بجدّ) ينقسم أكثر أيضًا. طبعًا هذا تخيّل فقط وليس في الصورة تلك.

الآن، ماذا لو أردنا دالة تعطينا مجموع كل الرواتب؟ كيف السبيل؟

لو جرّبنا بالتكرار فسيكون أمرًا عسيرًا إذ أنّ البنية ليست ببسيطة. أول فكرة على البال هي حلقة ‎for‎ تمرّ على الشركة ‎company‎ وداخلها حلقات فرعية على الأقسام بالمستوى الأول. ولكن هكذا سنحتاج حلقات فرعية متداخلة أيضًا لتمرّ على الموظفين في الأقسام بالمستوى الثاني مثل قسم ‎sites‎… وبعدها حلقات أخرى داخل تلك فوقها للأقسام بالمستوى الثالث إن عمل فريق التسويق كما يجب… لو وضعنا 3-4 من هذه الحلقات الفرعية المتداخلة في شيفرة لتعمل جولة مسح على كائن واحد، فستنتج لنا شيفرة قبيحة حقًا.

لنجرّب التعاود الآن.

كما رأينا، حين تُلاقي الدالة قسمًا عليها جمع رواتبه، تواجه حالتين اثنتين:

1. إمّا يكون قسمًا «بسيطًا» فيه مصفوفة من الناس، وهكذا تجمع رواتبهم في حلقة بسيطة.
2. أو تجد كائنًا فيه ‎N‎ من الأقسام الفرعية، حينها تصنع ‎N‎ من الاستدعاءات المتعاودة لتحصي مجموع كلّ قسم فرعي وتدمج النتائج كلها.

الحالة الأولى هي أساس التعاود، أي عملنا العادي حين نستلم مصفوفة.

الحالة الثانية (حين نرى كائنًا) هي خطوة في التعاود. يمكن تقسيم تلك المهمة المعقّدة إلى مهام فرعية لكلّ قسم. ربّما تنقسم تلك المهام الفرعية ثانيةً، ولكنّها عاجلًا أم آجلًا ستنتهي بالحالة (1) لا محالة.

ربّما… يكون أسهل لو قرأت الخوارزمية من الشيفرة ذاتها:

// الكائن كما هو، ضغطناه لألا نُطيل القصة فقط
let company = { 
  sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 600 }],
  development: {
    sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }],
    internals: [{name: 'Jack', salary: 1300}]
  }
};

// الدالة التي ستنفّذ هذا العمل
function sumSalaries(department) {
  if (Array.isArray(department)) { // ‫حالة (1)
    return department.reduce((prev, current) => prev + current.salary, 0); // نجمع عناصر المصفوفة
  } else { // ‫حالة (2)
    let sum = 0;
    for (let subdep of Object.values(department)) {
      // نستدعي الأقسام الفرعية تعاوديًا، ونجمع النتائج
      sum += sumSalaries(subdep); 
    }
    return sum;
  }
}

alert(sumSalaries(company)); // 6700

الشيفرة قصيرة وسهل فهمها (كما هو أملي). هنا تظهر قوّة التعاود، فسيعمل على أيّ مستوى من الأقسام الفرعية المتداخلة.

إليك رسمة توضّح الاستدعاءات:

الفكرة بسيطة للغاية: لو كان كائنًا ‎{...}‎، نستعمل الاستدعاءات الفرعية، ولو كانت مصفوفات ‎[...]‎ هي آخر «أوراق» شجرة التعاود، فتعطينا الناتج مباشرةً.

لاحظ كيف أنّ الشيفرة تستعمل مزايا ذكيّة ناقشناها سابقًا:

التابِع ‎arr.reduce‎ في الفصل «توابِع المصفوفات» لنجمع الرواتب.

• الحلقة ‎for(val of Object.values(obj))‎ للمرور على قيم الكائن إذ يُعيد التابِع ‎Object.values‎ مصفوفة بالقيم.

بنى التعاود

بنية البيانات التعاودية (أيّ التي يحدّد أساسها التعاود) هي بنية تكرّر نفسها على أجزاء منفصلة.

رأينا لتوّنا مثالًا عن هذه البنية: بنية الشركة أعلاه.

القسم في الشركة هو إمّا:

• مصفوفة من الناس.
• أو كائنًا فيه أقسام أخرى.

لو كنت مطوّر وِب فالأمثلة التي تعرفها وتُدركها هي مستندات HTML وXML.

ففي مستندات HTML، يمكن أن يحتوي وسم HTML على قائمة من:

• أجزاء من نصوص.
• تعليقات HTML.
• وسوم HTML أخرى (أي ما يمكن أن يحتوي على أجزاء من نصوص أو تعليقات أو وسوم أخرى وهكذا).

وهذا ما نسمّيه بالبنى التعاوديّة.

لنفهم التعاود أكثر سنشرح بنية تعاود أخرى تسمّى «القوائم المترابطة» (Linked List). يمكن أن تكون هذه القوائم أحيانًا بديلًا أفضل موازنةً بالمصفوفات.

القوائم المترابطة

لنقل بأنّا نريد تخزين قائمة كائنات مرتّبة.

ستصنع مصفوفة كالعادة:

let arr = [obj1, obj2, obj3];

ولكن… هناك مشكلة تخصّ المصفوفات. عمليات «حذف العنصر» و«إدراج العنصر» مُكلفة. فمثلًا على عملية ‎arr.unshift(obj)‎ إعادة ترقيم كلّ العناصر للكائن الجديد ‎obj‎، ولو كانت المصفوفة كبيرة فستأخذ العملية وقتًا طويلًا. الأمر نفسه ينطبق لعملية ‎arr.shift()‎.

التعديلات على بنية البيانات (التي لا تحتاج إلى إعادة الترقيم بالجملة) هي تلك التي تؤثّر على نهاية المصفوفة: ‎arr.push/pop‎. لذا يمكن أن تكون المصفوفة بطيئة حقًا لو كانت الطوابير طويلة حين نعمل مع المصفوفات من عناصرها الأولى.

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

يُعرّف عنصر القائمة المترابطة تعاوديًا على أنّه كائن فيه:

• قيمة ‎value‎.
• خاصية «التالي» ‎next‎ تُشير إلى عنصر القائمة المترابطة التالي أو إلى ‎null‎ لو كانت هذه نهاية القائمة.

مثال:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

إليك التمثيل البصري لهذه القائمة:

هذه شيفرة أخرى لنصنع القائمة:

let list = { value: 1 };
list.next = { value: 2 };
list.next.next = { value: 3 };
list.next.next.next = { value: 4 };
list.next.next.next.next = null;

هنا نرى بوضوح أكثر كيف أنّ هناك كائنات متعدّدة لكلّ منها خاصية ‎value‎ وأخرى ‎next‎ تُشير إلى العنصر بقرب «هذا». متغيّر ‎list‎ هو أول الكائنات في السلسلة وبهذا لو اتّبعنا إشارات ‎next‎ بدءًا منها سنصل إلى أيّ عنصر آخر نريد.

يمكننا قسمة القائمة إلى أجزاء عدّة ودمجها لاحقًا لو أردنا:

let secondList = list.next.next;
list.next.next = null;

للدمج:

list.next.next = secondList;

وطبعًا يمكننا إدخال العناصر إلى أي مكان وإزالتها من أي مكان.

فمثلًا لو أردنا إضافة قيمة جديدة للبداية فعلينا تحديث رأس القائمة:

let list = { value: 1 };
list.next = { value: 2 };
list.next.next = { value: 3 };
list.next.next.next = { value: 4 };

// نُضيف قيمة جديدة إلى بداية القائمة
list = { value: "new item", next: list };

ولنُزيل قيمة من المنتصف نعدّل خاصية ‎next‎ للكائن الذي يسبق الجديد:

list.next = list.next.next;

هكذا أجبرنا ‎list.next‎ بأن «تقفز» فوق ‎1‎ لتصل ‎2‎، بهذا استثنينا القيمة ‎1‎ من السلسلة. وطالما أنّها ليست مخزّنة في أيّ مكان آخر فستُزال من الذاكرة تلقائيًا.

وعلى عكس المصفوفات فلسنا هنا نُعيد الترقيم بالجملة، أي أنّ إعادة ترتيب العناصر أسهل.

بالطبع فالقوائم ليست أفضل من المصفوفات دومًا وإلا فاستعملناها هي دومًا وما احتجنا المصفوفات أبدًا.

السلبية الأساس هي أنّ الوصول إلى العنصر حسب رقمه ليس سهلًا كما في المصفوفات حيث نستعمل الإشارة المباشرة ‎arr[n]‎. ولكن في القوائم علينا البدء من العنصر الأول والانتقال ‎N‎ مرّة عبر ‎next‎ لنصل إلى العنصر بالرقم N.

…ولكننا لا نحتاج دومًا إلى هذه العمليات فمثلًا حين نريد طابورًا أو حتّى طابورًا متعدّد الطرفين فيجب أن نستعمل بنية مرتّبة تتيح بإضافة/إزالة العناصر من الجهتين بسرعة فائقة، وليس بالضروري أن نعرف ما في وسطها.

يمكننا تحسين القوائم هكذا:

• إضافة الخاصية ‎prev‎ مع الخاصية ‎next‎ للإشارة إلى العنصر السابق، لننتقل وراءً بسهولة أكبر.
• إضافة متغيّر بالاسم ‎tail‎ يُشير إلى آخر عنصر من القائمة (وتحديثه متى أضفنا/أزلنا عناصر من النهاية).
• …يمكن أن تتغيّر بنية البيانات حسب متطلباتنا واحتياجاتنا.

ملخص

المصطلحات:

• التعاود* هو مصطلح برمجي يعني استدعاء دالة من داخلها. يمكن استعمال الدوال التعاودية لحلّ المهام المختلفة بطرق ذكية نظيفة.

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

• بنية البيانات التعاودية هي أيّة بنية بيانات تُحدّد نفسها بنفسها.

  فمثلًا يمكن تعريف القائمة المترابطة على أنّها بنية بيانات تحتوي على كائن يُشير إلى قائمة (أو يُشير إلى null).

  list = { value, next -> list }

  تُعدّ الأشجار مثل شجرة عناصر HTML أو شجرة الأقسام في هذا الفصل كائنات تعاودية بطبعها، فهي تتفرّع ولكلّ فرع فروع أخرى.

  يمكن استعمال الدوال التعاودية للمرور فيها كما رأينا في مثال ‎sumSalary‎.

يمكن إعادة كتابة أيّ دالة تعاودية لتصير دالة تستعمل التكرار، وغالبًا ما نفعل هذا لتحسين أداء الدوال. ولكن هناك مهام عديدة يكون الحلّ التعاودي سريعًا كفايةً وأسهل كتابةً ودعمًا.

تمارين

اجمع كلّ الأعداد إلى أن تصل للممرّر

الأهمية: 5

اكتب الدالة ‎sumTo(n)‎ التي تجمع الأعداد ‎‎1 + 2 + ... + n‎.

مثال:

sumTo(1) = 1
sumTo(2) = 2 + 1 = 3
sumTo(3) = 3 + 2 + 1 = 6
sumTo(4) = 4 + 3 + 2 + 1 = 10
...
sumTo(100) = 100 + 99 + ... + 2 + 1 = 5050

اكتب 3 شيفرات:

1. واحدة باستعمال حلقة for.
2. واحدة باستعمال التعاود، إذ أنّ ‎sumTo(n) = n + sumTo(n-1)‎ طالما ‎n > 1‎.
3. واحدة باستعمال المتتاليات الحسابية.

مثال عن الناتج:

function sumTo(n) { /*... شيفرتك هنا ... */ }

alert( sumTo(100) ); // 5050

ملاحظة: أيّ الشيفرات أسرع من الأخرى؟ وأيها أبطأ؟ ولماذا؟

ملاحظة أخرى: هل يمكن أن نستعمل التعاود لحساب ‎sumTo(100000)‎؟

الحل

الحلّ باستعمال الحلقة:

function sumTo(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

alert( sumTo(100) );

الحلّ باستعمال التعاود:

function sumTo(n) {
  if (n == 1) return 1;
  return n + sumTo(n - 1);
}

alert( sumTo(100) );

الحلّ باستعمال المعادلة ‎sumTo(n) = n*(n+1)/2‎:

function sumTo(n) {
  return n * (n + 1) / 2;
}

alert( sumTo(100) );

عن الملاحظة: بالطبع فالمعادلة هي أسرع الحلول فلا تستعمل إلا ثلاث عمليات لكلّ عدد ‎n‎. الرياضيات إلى جانبنا هنا!

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

عن الملاحظة الأخرى: تدعم بعض المحرّكات «تحسين نهاية الاستدعاء» (tail call optimization)، ويعني أنّه لو كان الاستدعاء التعاودي هو آخر ما في الدالة (مثلما في الدالة ‎sumTo‎ أعلاه)، فلن تواصل الدالة الخارجية عملية التنفيذ كي لا يتذكّر المحرّك سياقها التنفيذي. يتيح هذا للمحرّك إزالة قضية الذاكرة بذلك يكون ممكنًا عدّ ‎sumTo(100000)‎. ولكن، لو لم يدعم محرّك جافاسكربت هذا النوع من التحسين (وأغلبها لا تدعم) فستواجه الخطأ: تخطّيت أكبر حجم في المكدس، إذ يُفرض -عادةً- حدّ على إجمالي حجم المكدس.

احسب المضروب

الأهمية: 4

المضروب هو عدد طبيعي مضروب بِ‍ ‎«العدد ناقصًا واحد»‎ وثمّ بِ‍ ‎«العدد ناقصًا اثنين»‎ وهكذا إلى أن نصل إلى ‎1‎. نكتب مضروب ‎n‎ بهذا الشكل: n!‎

يمكننا كتابة تعريف المضروب هكذا:

n! = n * (n - 1) * (n - 2) * ...*1

قيم المضاريب لأكثر من ‎n‎:

1! = 1
2! = 2 * 1 = 2
3! = 3 * 2 * 1 = 6
4! = 4 * 3 * 2 * 1 = 24
5! = 5 * 4 * 3 * 2 * 1 = 120

مهمّتك هي كتابة الدالة ‎factorial(n)‎ لتحسب ‎n!‎‎ باستعمال الاستدعاءات التعاودية.

alert( factorial(5) ); // 120

ملاحظة وفائدة: يمكنك كتابة ‎n!‎‎ هكذا ‎n * (n-1)!‎‎ مثلًا: ‎3! = 3*2! = 3*2*1! = 6

الحل

حسب التعريف فيمكن كتابة المضروب ‎n!‎‎ هكذا ‎n * (n-1)!‎.

أي أنّه يمكننا حساب ناتج ‎factorial(n)‎ على أنّه ‎n‎ مضروبًا بناتج ‎factorial(n-1)‎. ويمكن أن ينخفض استدعاء ‎n-1‎ أنزل وأنزل إلى أن يصل ‎1‎.

function factorial(n) {
  return (n != 1) ? n * factorial(n - 1) : 1;
}

alert( factorial(5) ); // 120

القيمة الأساس للتعاود هي ‎1‎. يمكننا أن نجعل ‎0‎ هي الأساس ولكنّ ذلك لا يهم، ليست إلا خطوة تعاود أخرى:

function factorial(n) {
  return n ? n * factorial(n - 1) : 1;
}

alert( factorial(5) ); // 120

أعداد فيبوناتشي

الأهمية: 5

لمتتالية فيبوناتشي الصيغة F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub>. أي أنّ العدد التالي هو مجموع العددين الذين سبقاه.

أوّل عددين هما ‎1‎، وبعدها ‎‎2(1+1)‎ ثمّ ‎‎3(1+2)‎ ثمّ ‎‎5(2+3)‎ وهكذا: ‎‎1, 1, 2, 3, 5, 8, 13, 21...‎‎.

ترتبط أعداد فيبوناتشي بالنسبة الذهبية وبظواهر طبيعية أخرى عديدة حولنا من كلّ مكان.

اكتب الدالة ‎fib(n)‎ لتُعيد عدد فيبوناتش ‎n-th‎.

مثال لطريقة عملها:

function fib(n) { /* شيفرتك هنا */ }

alert(fib(3)); // 2
alert(fib(7)); // 13
alert(fib(77)); // 5527939700884757

ملاحظة: يجب أن تعمل الدالة بسرعة. يجب ألا يأخذ استعداء ‎fib(77)‎ أكثر من جزء من الثانية.

الحل

أوّل حلّ نفكّر به هو الحلّ بالتعاود.

أعداد فيبوناتشي تعاودية حسب تعريفها:

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

alert( fib(3) ); // 2
alert( fib(7) ); // 13
// fib(77); // سيكون استدعاءً أبطأ من السلحفاة

…ولكن لو كانت قيمة ‎n‎ كبيرة فسيكون بطيئًا جدًا. يمكن أن يعلّق الاستدعاء ‎fib(77)‎ محرّك جافاسكربت لفترة من الوقت بينما يستهلك موارد المعالج كاملةً.

يعزو ذلك إلى أنّ الدالة تؤدّي استدعاءات فرعية كثيرة، وتُعيد تقدير (evaluate) القيم ذاتها مرارًا وتكرارًا.

لنرى مثلًا جزءًا من حسابات ‎fib(5)‎:

...
fib(5) = fib(4) + fib(3)
fib(4) = fib(3) + fib(2)
...

يمكننا أن نرى هنا بأنّ قيمة ‎fib(3)‎ مفيدة للاستدعائين ‎fib(5)‎ و‎fib(4)‎. لذا فستُستدعى ‎fib(3)‎ وتُقدّر قيمتها مرتين كاملتين منفصلتين عن بعضهما البعض.

إليك شجرة التعاود كاملةً:

نرى بوضوح كيف أنّ ‎fib(3)‎ تُقدّر مرتين اثنتين و‎fib(2)‎ تُقدّر ثلاث مرات. إجمالي الحسابات يزداد أسرع مما تزداد قيمة ‎n‎، ما يجعل الحسابات مهولة حين نصل ‎n=77‎.

يمكننا تحسين أداء الشيفرة بتذكّر القيم التي قدّرنا ناتجها قبل الآن: لو حسبنا قيمة ‎fib(3)‎ مثلًا، فيمكننا إعادة استعمالها في أيّ حسابات مستقبلية.

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

فبدلًا من أن نبدأ بِ ‎n‎ وننطلق نحو أسفل، يمكن أن نصنع حلقة تبدأ من ‎1‎ و‎2‎ ثمّ تسجّل ناتج ذلك على أنّه ‎fib(3)‎، وناتج القيمتين السابقتين على أنّه ‎fib(4)‎ وهكذا دواليك إلى أن تصل إلى القيمة المطلوبة. هكذا لا نتذكّر في كلّ خطوة إلى قيمتين سابقتين فقط.

إليك خطوات الخوارزمية الجديدة هذه بالتفصيل الممل.

البداية:

// ‫a = fib(1)‎، ‏b = fib(2)‎، هذه القيم حسب التعريف رقم 1
let a = 1, b = 1;

// ‫نأخذ c = fib(3)‎ ليكون مجموعها
let c = a + b;

/* ‫لدينا الآن fib(1)‎ و fib(2)‎ و fib(3)‎
a  b  c
1, 1, 2
*/

الآن نريد معرفة ‎fib(4) = fib(2) + fib(3)‎.

لنحرّك ما في المتغيّرات إلى الجانب: ‎a,b‎ سيكونان ‎fib(2),fib(3)‎ و‎c‎ سيكون مجموعهما:

a = b; // now a = fib(2)
b = c; // now b = fib(3)
c = a + b; // c = fib(4)

/* الآن لدينا المتتابعة:
   a  b  c
1, 1, 2, 3
*/

الخطوة التالية تعطينا عددًا آخر في السلسلة:

a = b; // ‫الآن صار a = fib(3)‎
b = c; // ‫الآن صار b = fib(4)‎
c = a + b; // c = fib(5)

/* ‫الآن لدينا المتتابعة (أضفنا عددًا آخر):
      a  b  c
1, 1, 2, 3, 5
*/

…وهكذا إلى أن نصل إلى القيمة المطلوبة. وهذا أسرع بكثير من التعاود وليس فيه أيّة حسابات متكرّرة.

الشيفرة كاملةً:

function fib(n) {
  let a = 1;
  let b = 1;
  for (let i = 3; i <= n; i++) {
    let c = a + b;
    a = b;
    b = c;
  }
  return b;
}

alert( fib(3) ); // 2
alert( fib(7) ); // 13
alert( fib(77) ); // 5527939700884757

تبدأ الحلقة بالقيمة ‎i=3‎ إذ أنّ قيمتا المتتابعة الأولى والثانية مكتوبتان داخل المتغيّران ‎a=1‎ و ‎b=1‎.

يُدعى هذا الأسلوب بالبرمجة الديناميكية من أسفل إلى أعلى.

طباعة قائمة مترابطة

لنقل بأنّ أمامنا القائمة المترابطة هذه:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

اكتب الدالة ‎printList(list)‎ لتطبع لنا عناصر القائمة واحدةً واحدة.

اصنع نسختين من الحل: واحدة باستعمال الحلقات وواحدة باستعمال التعاود.

أيّ الحلّين أفضل؟ بالتعاود أو بدون؟

الحل

نسخة الحلقات

هذا الحلّ باستعمال الحلقات:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

function printList(list) {
  let tmp = list;

  while (tmp) {
    alert(tmp.value);
    tmp = tmp.next;
  }

}

printList(list);

لاحظ كيف استعملنا المتغير المؤقت ‎tmp‎ للمرور على عناصر القائمة. يمكننا نظريًا استعمال مُعامل الدالة ‎list‎ بدل ذلك:

function printList(list) {

  while(list) { // (*)
    alert(list.value);
    list = list.next;
  }

}

ولكن… سنندم على ذلك لاحقًا إذ قد نحتاج إلى توسيع عمل الدالة وإجراء عملية أخرى غير هذه على القائمة، ولو بدّلنا ‎list‎ فلن نقدر على ذلك حتمًا.

وعلى سيرة الحديث عن تسمية المتغيرات «كما ينبغي»، فهنا تُعدّ القائمةُ ‎list‎ ذاتَ القائمة، أي العنصر الأوّل من تلك القائمة، ويجب أن يبقى الاسم كما هو هكذا، مقروءًا وواضحًا.

بينما لا يعدو دور ‎tmp‎ إلّا أداةً لمسح القائمة، تمامًا مثل ‎i‎ في حلقات ‎for‎.

نسخة التعاود

مفهوم النسخة التعاودية من الدالة ‎printList(list)‎ بسيط: علينا -كي نطبع قائمةً- طباعةَ العنصر الحالي ‎list‎ وتكرار ذلك على كلّ ‎list.next‎:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

function printList(list) {

  alert(list.value); // نطبع العنصر الحالي

  if (list.next) {
    printList(list.next); // ذات الحركة لكلّ عنصر باقٍ في القائمة
  }

}

printList(list);

أمّا الآن، فأيّ النسختين أفضل؟

نظريًا تُعدّ نسخة الحلقات أفضل أداءً. صحيح أنّ الاثنتين عملهما واحد إلّا أن الحلقات لا تستهلك الموارد بتداخل استدعاءات الدوال.

ولكن لو نظرنا للجهة الأخرى من الكأس فالنسخة التعاودية أقصر وأسهل فهمًا أحيانًا.

طباعة قائمة مترابطة بالعكس

الأهمية: 5

اطبع القائمة المترابطة من التمرين السابق، ولكن بعكس ترتيب العناصر.

اصنع نسختين من الحل: واحدة باستعمال الحلقات وواحدة باستعمال التعاود.

الحل

نسخة التعاود

هنا توجد خدعة في فكرة التعاود، إذ علينا أوّلًا طباعة الباقي من القائمة وبعدها طباعة القائمة الحالية:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

function printReverseList(list) {

  if (list.next) {
    printReverseList(list.next);
  }

  alert(list.value);
}

printReverseList(list);

نسخة الحلقات

نسخة الحلقات هنا أكثر تعقيدًا (بقليل) عن سابقتها.

ما من طريقة لنأخذ آخر قيمة في قائمتنا ‎list‎، ولا يمكننا أن «نعود» فيها.

لذا يمكننا أوّلًا المرور على العناصر بالترتيب المباشر وحِفظها في مصفوفة، بعدها طباعة ما حفظناه بالعكس:

let list = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: {
        value: 4,
        next: null
      }
    }
  }
};

function printReverseList(list) {
  let arr = [];
  let tmp = list;

  while (tmp) {
    arr.push(tmp.value);
    tmp = tmp.next;
  }

  for (let i = arr.length - 1; i >= 0; i--) {
    alert( arr[i] );
  }
}

printReverseList(list);

لاحظ كيف أنّ الحل باستعمال التعاود هو بالضبط كما باستعمال الحلقات، إذ يتبع القائمة ويحفظ العناصر في سلسلة من الاستدعاءات المتداخلة (في مكدس سياق التنفيذ)، وبعدها يطبع القيم.

ترجمة -وبتصرف- للفصل Recursion and stack من كتاب The JavaScript language

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

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

  toString() {
    return `{name: "${this.name}", age: ${this.age}}`;
  }
};

alert(user); // {name: "John", age: 30}

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

لحسن حظّنا فكتابة تلك الشيفرة لهذه المعضلة ليس له داعٍ، فهناك من حلّها بالفعل.

JSON.stringify

نسق JSON (صيغة كائنات جافاسكربت JavaScript Object Notation) هو نسق عام لتمثيل القيم والكائنات، ويوثّقه المعيار RFC 4627. في بادئ الأمر كان غرض كتابته هو لاستعماله في جافاسكربت، ولكن رويدًا رويدًا بدأت اللغات الأخرى صناعة مكتبات تتعامل معه أيضًا. لهذا يسهل لنا استعمال JSON لتبادل البيانات حين يستعمل جهاز العميل جافاسكربت بينما الخادوم مكتوب بلغة روبي/PHP/جافا/أي لغة خنفشارية أخرى.

تقدّم جافاسكربت التوابِع الآتية:

• JSON.stringify لتحويل الكائنات إلى صياغة JSON.
• JSON.parse لإرجاع بيانات مصاغة بصياغة JSON إلى كائن كما كان.

فمثلًا هنا نستعمل JSON.stringify على طالب student:

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

alert(typeof json); // حصلنا على سلسلة نصيةّ

alert(json);

/* ‫كائن مرمّز بِـJSON:
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

يأخذ التابِع JSON.stringify(student)‎ الكائن ويحوّله إلى سلسلة نصية. تُسمّى سلسلة json النصية الناتج بكائن مرمّز بِـJSON (JSON-encoded)‎ أو مُسلسل (serialized) أو stringified أو marshalled. صرنا مستعدّين لإرسال الكائن عبر الوِب أو تخزينه في مخزن بيانات خام.

لاحظ من فضلك الاختلافات المهمة بين الكائن المرمّز بِـJSON من الكائن العادي الحرفي:

• تستعمل السلاسل النصية علامات اقتباس مزدوجة. لا مكان لعلامات الاقتباس المفردة أو الفواصل ` في JSON. بهذا يصير 'John' هكذا "John".
• حتّى خاصيات الكائنات تُحاط بعلامات اقتباس مزدوجة، ولا مناص من ذلك. بهذا يصير age:30 هكذا "age":30.

يمكن استعمال JSON.stringify على الأنواع الأولية أيضًا.

تدعم JSON أنواع البيانات الآتية:

• الكائنات { ... }

• المصفوفات [ ... ]

• الأنواع الأولية:

  • السلاسل النصية,
  • الأعداد,
  • القيم المنطقية true/false,
  • قيمة اللاشيء null.

  مثال:

// ‫العدد في JSON ليس إلّا عددًا
alert( JSON.stringify(1) ) // 1

// ‫السلسلة النصية في JSON ليست إلّا سلسلة نصيّة، بين علامات اقتباس مزودجة
alert( JSON.stringify('test') ) // "test"

alert( JSON.stringify(true) ); // true

alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]

مواصفة JSON هي مواصفة مستقلّة لغويًا وتحمل البيانات فقط. لذا يُهمِل JSON.stringify خاصيات الكائنات الخاصّة بجافاسكربت.

نذكر منها:

• خاصيات الدوال (التوابِع).
• الخاصيات الرمزية.
• الخاصيات التي تُخزّن undefined.

let user = {
  sayHi() { // ignored
    alert("Hello");
  },
  [Symbol("id")]: 123, // يتجاهلها
  something: undefined // يتجاهلها
};

alert( JSON.stringify(user) ); // ‫{} (كائن فارغ)

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

let meetup = {
  title: "Conference",
  room: {
    number: 23,
    participants: ["john", "ann"]
  }
};

alert( JSON.stringify(meetup) );
/* البنية كاملة تتحوّل إلى سلسلة نصية:
{
  "title":"Conference",
  "room":{"number":23,"participants":["john","ann"]},
}
*/

إليك التقييد: وجود الإشارات التعاودية (circular references) ممنوع. مثال:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: ["john", "ann"]
};

meetup.place = room;      // ‫يُشير الاجتماع إلى الغرفة (meetup -> room)
room.occupiedBy = meetup; // ‫تُشير الغرفة إلى الاجتماع (room -> meetup)

JSON.stringify(meetup); // ‫خطأ تحاول تحويل بنية تعاوية إلى JSON

هنا فشل التحويل بسبب الإشارات التعاودية: فتُشير room.occupiedBy إلى meetup وmeetup.place إلى room:

الاستثناءات وتعديل الكائنات: آلة الاستبدال

إليك الصياغة الكاملة للتابِع JSON.stringify:

let json = JSON.stringify(value[, replacer, space])

المعاملات:

• value: القيمة التي ستُرمّز.

• replacer: : مصفوفة من الخاصيات لترميزها، أو دالة ربط (mapping‏) بالشكل function(key, value)‎.

• space: عدد المسافات لاستعمالها لتنسيق السلسلة النصية.

في أغلب الوقت نستعمل JSON.stringify بتمرير المُعامل الأول فقط. ولكن لو أردنا تعديل عملية الاستبدال مثل تعديل الإشارات التعاودية، فيمكننا استعمال المُعامل الثاني للتابِع.

لو مرّرنا مصفوفة فيها خاصيات، فستُرمّز تلك الخاصيات فقط. مثال:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // يُشير الاجتماع إلى الغرفة
};

room.occupiedBy = meetup; // room references meetup

alert( JSON.stringify(meetup, ['title', 'participants']) );
// {"title":"Conference","participants":[{},{}]}

ربّما نكون هنا صارمين كثيرًا، فقائمة الخاصيات تُطبّق على كامل بنية الكائن، بهذا الكائنات في participants فارغة إذ أنّ name ليست في القائمة.

لنضمّن في تلك القائمة كلّ خاصية عدا room.occupiedBy إذ ستتسبّب بإشارة تعاودية:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // يُشير الاجتماع إلى الغرفة
};

room.occupiedBy = meetup; // تُشير الغرفة إلى الاجتماع

alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
/*
{
  "title":"Conference",
  "participants":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

الآن سَلسلنا كلّ ما في occupiedBy، ولكن قائمة الخاصيات صارت طويلة. لحسن حظّنا يمكننا استعمال دالة بدل المصفوفة لتكون آلة الاستبدال replacer. ستُستدعى الدالة لكلّ زوج (key, value) ويجب أن تُعيد القيمة ”المُستبدَلة“ التي ستحلّ مكان الأصلية، أو undefined لو أردنا إهمال الخاصية.

في حالتنا هذه سنُعيد القيمة value ”كما هي“ لكل الخاصيات باستثناء occupiedBy. لنُهمل occupiedBy ستُعيد الشيفرة undefined:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // يُشير الاجتماع إلى الغرفة
};

room.occupiedBy = meetup; // تُشير الغرفة إلى الاجتماع

alert( JSON.stringify(meetup, function replacer(key, value) {
  alert(`${key}: ${value}`);
  return (key == 'occupiedBy') ? undefined : value;
}));

/* أزواج ‫key:value التي تدخل آلة الاستبدال:
:             [object Object]
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

لاحِظ بأنّ الدالة replacer تأخذ كلّ زوج ”مفتاح/قيمة“ بما في ذلك الكائنات المتداخلة وعناصر المصفوفات، فهي تتطبّق تكراريًا. وقيمة this داخل replacer هي الكائن الذي يحتوي على الخاصية الحالية.

الاستدعاء الأوّل خاصّ قليلًا، فهو يستلم ”كائن تغليف“: {"": meetup}. بعبارة أخرى فأوّل زوج (key, value) يكون مفتاحه فارغًا وقيمته هي الكائن الهدف كلّه. لهذا نرى السطر الأول في المثال أعلاه: ":[object Object]".

الغرض هو تقديم كلّ ما أمكن من ”تسلّط“ لأداة الاستبدال، بهذا يمكنها تحليل الكائنات كاملةً واستبدالها أو إهمالها لو تطلّب الأمر.

التنسيق: المسافات

المُعامل الثالث للتابِع JSON.stringify(value, replacer, space)‎ هو عدد المسافات التي ستُستعمل لتنسيقها تنسيقًا جميلًا (Pretty format).

في المثال السابق، لم يكن للكائنات المُسلسلة (stringified objects) أيّة مسافات أو مسافات بادئة. لا بأس لو كنّا سنرسل الكائن عبر الشبكة، فالمُعامل space يُستعمل فقط لتجميل الناتج.

هنا بعبارة space = 2 نقول لجافاسكربت بأن تعرض الكائنات المتداخلة على عدّة أسطر، بمسافتين بادئتين داخل كل كائن:

let user = {
  name: "John",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

alert(JSON.stringify(user, null, 2));
/* ‫إزاحة بمسافتين:
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}
*/

/* ‫بينما JSON.stringify(user, null, 4)‎ يعطينا إزاحة أكبر:
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/

نستعمل المُعامل space فقط لغرض الناتج الجميل وعمليات تسجيل المخرجات.

تابِع ”toJSON“ مخصّص

كما يوجد toString للتحويل إلى سلاسل نصية، يمكن للكائنات أيضًا تقديم تابِع toJSON للتحويل إلى JSON. تستدعي JSON.stringify ذاك التابِع تلقائيًا لو وجدته. مثال:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  date: new Date(Date.UTC(2017, 0, 1)),
  room
};

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "date":"2017-01-01T00:00:00.000Z",  // (1)
    "room": {"number":23}               // (2)
  }
*/

نرى هنا بأنّ date (في (1)) صار سلسلة نصية. هذا لأنّ التواريخ كلّها توفّر تنفيذًا للتابِع toJSON مضمّنًا فيها، وهو يُعيد سلاسل نصية بهذا التنسيق.

لنُضيف الآن تابِع toJSON مخصّص للكائن room (في (2)):

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

let meetup = {
  title: "Conference",
  room
};

alert( JSON.stringify(room) ); // 23

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "room": 23
  }
*/

كما نرى، استُعمِل التابِع toJSON مرتين، مرة حين استدعاه JSON.stringify(room)‎ مباشرةً، ومرة حين كانت الخاصية room داخل كائن مرمّز آخر.

التابع JSON.parse

لنفكّ ترميز سلسلة JSON نصية، سنحتاج تابِعًا آخر بالاسم JSON.parse. صياغته هي:

let value = JSON.parse(str, [reviver]);

المعاملات:

• str: سلسلة JSON النصية التي سيُحلّلها.

• reviver: دالة اختيارية function(key,value)‎ تُستدعى لكلّ زوج (key, value) ويمكن لها تعديل القيمة.

مثال:

// ‫مصفوفة مُسلسلة (stringified array)
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1

أو حين استعمالها للكائنات المتداخلة:

let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1

يمكن أن يكون كائن JSON بالتعقيد اللازم مهمًا كان. يمكن أن تحتوي الكائنات والمصفوفات كائناتَ ومصفوفات أخرى، ولكنّ لزامٌ عليها أن تلتزم بنفس نسق JSON.

إليك بعض المشاكل الشائعة حين كتابة JSON يدويًا (أحيانًا نفعل ذلك لأغراض تنقيح الشيفرات):

let json = `{
  name: "John",                     // خطأ: اسم خاصية بدون علامات اقتباس
  "surname": 'Smith',               // خطأ: علامات اقتباس مُفردة في القيمة (يجب أن تكون مزودجة)‏
  'isAdmin': false                  // خطأ: علامات اقتباس مُفردة في المفتاح (يجب أن تكون مزدوجة)‏
  "birthday": new Date(2000, 2, 3), // ‫خطأ: استعمال "new" ممنوع، فقط وفقط قيم
  "friends": [0,1,2,3]              // هنا لا بأس
}`;

وأجل، لا تدعم JSON التعليقات، فلو أضفتها سيتحوّل الكائن إلى كائن غير صالح.

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

استعمال آلة الإحياء

تخيّل أنّنا استلمنا كائن meetup مُسلسل من الخادوم، وهذا شكله:

// title: (meetup title), date: (meetup date)
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

…نريد الآن فكّ ترميزه، أي إعادته إلى كائن جافاسكربت عادي. يكون ذلك باستدعاء JSON.parse:

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

alert( meetup.date.getDate() ); // خطأ‫!

لحظة… خطأ؟!

قيمة الخاصية meetup.date هي سلسلة نصية وليست كائن تاريخ Date. كيف سيعرف JSON.parse بأنّ عليه تعديل تلك السلسلة النصية لتصير Date؟

لنمرّر الآن إلى JSON.parse دالة ”آلة الإحياء“ في المُعامل الثاني، وستُحيي كلّ القيم ”كما هي“، عدا date ستعدّلها لتكون تاريخًا:

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // ‫الآن صار يعمل!

وأجل، تعمل الشيفرة للكائنات المتداخلة أيضًا:

let schedule = `{
  "meetups": [
    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
  ]
}`;

schedule = JSON.parse(schedule, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( schedule.meetups[1].date.getDate() ); // ‫يعمل!

ملخص

• تنسيق JSON هو تنسيق بيانات يستقلّ بمعياره ومكتباته في غالبية لغات البرمجة.
• يدعم JSON الكائنات العادية والمصفوفات والسلاسل النصية والأعداد والقيم المنطقية وnull.
• تقدّم جافاسكربت التوابِع JSON.stringify لسَلسلة الكائنات إلى JSON، وJSON.parse للقراءة من JSON.
• يدعم كلا التابِعين دوال تعديل لتكون القراءة والكتابة ”ذكيّة“.
• لو كان في الكائن تابِع toJSON، فسيستدعيه JSON.stringify.

تمارين

تحويل الكائن إلى JSON وتحويله كما كان

الأهمية: 5

حوّل الكائن user إلى JSON واقرأه ثانيةً ليكون متغيرًا آخرًا.

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

الحل

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

let user2 = JSON.parse(JSON.stringify(user));

استثناء الإشارات السابقة

الأهمية: 5

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

اكتب دالة replacer تُسلسل كل شيء ولكن تُزيل الخاصيات التي تُشير إلى meetup:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  occupiedBy: [{name: "John"}, {name: "Alice"}],
  place: room
};

// إشارات تعاودية
room.occupiedBy = meetup;
meetup.self = meetup;

alert( JSON.stringify(meetup, function replacer(key, value) {
  /* شيفرتك هنا*/
}));

/* ‫هكذا النتيجة المطلوبة:
{
  "title":"Conference",
  "occupiedBy":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

الحل

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  occupiedBy: [{name: "John"}, {name: "Alice"}],
  place: room
};

room.occupiedBy = meetup;
meetup.self = meetup;

alert( JSON.stringify(meetup, function replacer(key, value) {
  return (key != "" && value == meetup) ? undefined : value;
}));

/* 
{
  "title":"Conference",
  "occupiedBy":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

ترجمة -وبتصرف- للفصل JSON methods, toJSON من كتاب The JavaScript language

اقرأ أيضًا

• المقال التالي: توابع الأنواع الأولية
• المقال السابق: النوع Date: تمثيل التاريخ والوقت

حان وقت الحديث عن كائن آخر مضمّن في اللغة: التاريخ Date. يخزّن هذا الكائن التاريخ والوقت ويقدّم توابِع تُدير أختام التاريخ والوقت. يمكننا مثلًا استعماله لتخزين أوقات الإنشاء/التعديل أو حساب الوقت أو طباعة التاريخ الحالي في الطرفية.

الإنشاء

استدعِ new Date()‎ بتمرير واحدًا من الوُسطاء الآتية فتصنع كائن Date جديد:

الدالة new Date()‎ 

تنشئ هذه الدالة بلا وُسطاء كائن Date بالتاريخ والوقت الحاليين:

    let now = new Date();
    alert( now ); // نعرض التاريخ والوقت الحاليين

إليك كيفية إنشاء كائن Date: new Date(milliseconds)‎ يُنشئ كائن Date إذ تساوي قيمته عدد المليثوان الممرّرة (المليثانية هي 1/1000 من الثاني) حسابًا من بعد الأول من يناير عام ١٩٧٠ بتوقيت UTC+0.

    // UTC+0
    // 01.01.1970 نعني بـ 0 التاريخ
    let Jan01_1970 = new Date(0);
    alert( Jan01_1970 );

    // نضيف الآن 24 ساعة لنحصل على  02.01.1970 
    let Jan02_1970 = new Date(24 * 3600 * 1000);
    alert( Jan02_1970 );

يُسمّى العدد الصحيح الذي يمثّل عدد المليثوان التي مرّت من بداية عام 1970 بالختم الزمني (بصمة وقت). وهو يمثّل التاريخ بنحوٍ عددي خفيف (lightweight). يمكننا إنشاء التواريخ من الأختام الزمنية باستعمال new Date(timestamp)‎ وتحويل كائن التاريخ Date الموجود إلى ختم زمني باستعمال التابِع date.getTime()‎ (طالع أسفله).

والتواريخ قبل الأول من يناير 1970 أختامها سالبة:

    // ‫31 ديسمبر 1969
    let Dec31_1969 = new Date(-24 * 3600 * 1000);
    alert( Dec31_1969 );

new Date(datestring)‎ لو كان هناك وسيط واحد وكان سلسلة نصيّة، فسيحلّله المحرّك تلقائيًا. الخوازرمية هنا هي ذات التي يستعملها Date.parse. لا تقلق، سنتكلم عنه لاحقًا.

    let date = new Date("2017-01-26");
    alert(date);

نجد في هذا المثال أن الوقت غير محدد لذا يكون بتوقيت GMT منتصف الليل، ويحدد وفقًا للمنطقة الزمنية التي تنفذ الشيفرة ضمنها، فالنتيجة يمكن أن تكون Thu Jan 26 2017 11:00:00 للبلدان ذات المنطقة الزمنية GMT+1100 أو يمكن أن تكون Wed Jan 25 2017 16:00:00 للبلدان الواقعة في المنطقة الزمنية GMT-0800.

new Date(year, month, date, hours, minutes, seconds, ms)‎ يُنشئ تاريخًا بالمكوّنات الممرّرة حسب المنطقة الزمنية المحلية. أوّل وسيطين إلزاميين أما البقية اختيارية.

يجب أن يكون العام year بأربع خانات: 2013 صح، 98 خطأ. يبدأ الشهر month بالرقم 0 (يناير) وينتهي بالعدد 11 (ديسمبر). مُعامل التاريخ date هو رقم اليوم من الشهر. لو لم يكن موجودًا فسيعدّه الكائن 1. لو لم تكن مُعاملات الساعة والدقيقة والثانية والمليثانية hours/minutes/seconds/ms موجودة، فسيعدّها الكائن 0.

مثال:

    new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00
    new Date(2011, 0, 1); // نفس تلك. الساعات والدقائق وغيرها 0 مبدئيًا

أدنى دقّة للتاريخ هي مليثانية واحدة (واحد من ألف من الثانية):

    let date = new Date(2011, 0, 1, 2, 3, 4, 567);
    alert( date ); // 1.01.2011, 02:03:04.567

الوصول إلى مكوّنات التاريخ

إليك التوابِع التي تتيح لك الوصول إلى العام والشهر وغيرها داخل كائن Date:

• getFullYear()‎: يجلب العام (٤ خانات)

• getMonth()‎: يجلب الشهر، من 0 إلى 11.

• getDate()‎: يجلب رقم اليوم من الشهر، من 1 إلى 31. قد يبدو الاسم غريبًا قليلًا لك.

• التوابع getHours()‎ وgetMinutes()‎ وgetSeconds()‎ وgetMilliseconds()‎: تجلب مكوّنات الوقت حسب كل تابِع. (الساعة/الدقيقة/الثانية/المليثانية)

إياك بـ getYear()‎ بل getFullYear()‎ تقدّم الكثير من محرّكات جافاسكربت التابِع غير القياسي getYear()‎. هذا التابِع أصبح بائدًا، فهو يُعيد العام بخانتين أحيانًا. من فضلك لا تستعمله أبدًا، بل getFullYear()‎ لتجلب العام.