الـ callbacks والـ closures وأول لمسة async: setTimeout

أهلًا بيك. الدرس ده أصعب شوية من اللي فاتوا، بس هو اللي هيخليك تفهم Node بجد. أول فكرة: الـ function قيمة، زي الرقم والـ string. يعني ممكن تحطها في متغير، وتبعتها لـ function تانية. format بتاخد نص، و function اسمها style، وبتنادي عليها. ونبعتلها shout مرة، و whisper مرة. وآخر سطر: map بتاخد function برضه. نشغّل.

// الـ function قيمة زي أي قيمة
const shout = (s) => s.toUpperCase();
const whisper = (s) => s.toLowerCase();

function format(text, style) {
  return style(text);
}

console.log(format("Hello", shout));
console.log(format("Hello", whisper));
console.log(["a", "b"].map(shout));

$ node main.js
HELLO
hello
[ 'A', 'B' ]

HELLO الكبيرة، و hello الصغيرة، والحرفين اتكبّروا بالـ map. الـ function اللي بتتبعت لـ function تانية علشان تتنادي بعدين اسمها callback. وإنتَ استخدمتها فعلًا في الدرس اللي فات مع filter و map. دلوقتي أهم استخدام للـ callback: إنها تتنادي بعدين، مش دلوقتي. setTimeout بتاخد callback ووقت بالـ milliseconds، وبتقول: نادي الـ function دي بعد الوقت ده. هنحط واحدة بعد نص تانية، وواحدة بعد zero. وقبل ما تشغّل، خمّن: الترتيب هيبقى إيه؟ نشغّل.

console.log("1: بدأنا");

setTimeout(() => {
  console.log("3: بعد نص ثانية");
}, 500);

setTimeout(() => {
  console.log("2: بعد zero ms؟");
}, 0);

console.log("1.5: آخر سطر في الملف");

$ node main.js
1: بدأنا
1.5: آخر سطر في الملف
2: بعد zero ms؟
3: بعد نص ثانية

واحد، وبعده واحد ونص، يعني آخر سطر في الملف اشتغل قبل الـ setTimeout اللي بـ zero! وبعدين اتنين، وبعدين تلاتة. ليه؟ لأن Node بيخلّص الملف كله الأول، والـ callbacks بتستنى في طابور لحد ما الملف يخلص، حتى لو الوقت zero. الطابور ده جزء من حاجة اسمها الـ event loop، وليها درس كامل قريب. بس الفكرة دي هي سر Node: بيكمّل شغله وما يقفش يستنى. في Node، الـ callbacks ليها شكل متفق عليه، هتشوفه في مكتبات كتير: أول parameter هو الـ error، والتاني النتيجة. findUser بتدوّر بعد مِيّة millisecond، كأنها بتسأل database. لو مش موجود: callback بـ Error. لو موجود: callback بـ null والمستخدم. واللي بينادي بيفحص الـ error الأول دايمًا. نشغّل.

// شكل الـ callback في Node: (err, result)
function findUser(id, callback) {
  setTimeout(() => {
    if (id !== 7) return callback(new Error("مش موجود"));
    callback(null, { id, name: "مُنى" });
  }, 100);
}

findUser(7, (err, user) => {
  if (err) return console.log("خطأ:", err.message);
  console.log("لقيته:", user.name);
});

findUser(9, (err, user) => {
  if (err) return console.log("خطأ:", err.message);
  console.log("لقيته:", user.name);
});

$ node main.js
لقيته: مُنى
خطأ: مش موجود

لقيته مُنى، وخطأ مش موجود. الشكل ده اسمه error first callback. بس لما تحط callback جُوّه callback جُوّه callback، الـ code بيبقى سلّم لتحت ويتوه، وده اسمه callback hell. وعلشان كده اتعملت الـ Promises و async await، ودول هنعملهم بالتفصيل في القسم الجاي. تاني فكرة: الـ closure. makeCounter جُوّاها count. وبترجّع function صغيرة بتزوّد count. الغريب إن makeCounter خلصت، ومع كده الـ function الصغيرة لسه فاكرة count وبتغيّره. وكل مرة تنادي makeCounter، بيتعمل count جديد خالص. a و b عدادين منفصلين. نشغّل.

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

const a = makeCounter();
const b = makeCounter();
console.log(a(), a(), a(), b());

// closure بيحمي البيانات: مفيش طريقة توصل لـ count من برة
console.log(a.count);

$ node main.js
1 2 3 1
undefined

a عدّت واحد واتنين وتلاتة، و b بدأت من واحد لوحدها. و a dot count: undefined. مفيش أي طريقة توصل للعداد من برة، غير عن طريق الـ function. وده اسمه closure: function شايلة معاها المتغيرات اللي اتولدت جنبها. وهنستخدمه في الـ middleware والـ rate limiting والـ caching. فخ مشهور: var جُوّه loop مع setTimeout. نفس الـ loop مرة بـ var، ومرة بـ let. نشغّل.

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log("var:", i), 10);
}
for (let j = 1; j <= 3; j++) {
  setTimeout(() => console.log("let:", j), 20);
}

$ node main.js
var: 4
var: 4
var: 4
let: 1
let: 2
let: 3

var طبعت أربعة تلات مرات! لأن var متغير واحد للـ loop كلها، ولما الـ callbacks اشتغلت بعدين، كان وصل أربعة. أما let فبتعمل متغير جديد لكل لفة، فكل callback فاكرة رقمها. علشان كده في الكورس ده مفيش var خالص: const و let بس. التحدي: rate limiter بـ closure. createLimiter بتاخد أقصى عدد. وبترجّع function، كل ما تتنادي تحسب محاولة. ولما المحاولات تخلص ترد: استنى شوية. وكل مستخدم ليه عداد لوحده. وممنوع عداد global. التفاصيل والناتج المطلوب في الكومنت.

الحل. used جُوّه createLimiter، والـ arrow function اللي راجعة شايلاه. لو أقل من max نزود ونرجّع مسموح، وغير كده استنى شوية. وكل limiter اتعمل بنداء منفصل، فليه used لوحده. نشغّل.

function createLimiter(max) {
  let used = 0;
  return (name) => {
    if (used < max) {
      used++;
      return `${name}: مسموح (${used}/${max})`;
    }
    return `${name}: استنى شوية`;
  };
}

const mona = createLimiter(2);
console.log(mona("mona"));
console.log(mona("mona"));
console.log(mona("mona"));

const omar = createLimiter(1);
console.log(omar("omar"));

$ node main.js
mona: مسموح (1/2)
mona: مسموح (2/2)
mona: استنى شوية
omar: مسموح (1/1)

مُنى مرتين مسموح وبعدين استنى، وعمر لسه عنده محاولته. الدرس الجاي: الـ classes والـ errors، وإزاي تقرا stack trace من أوله لآخره.