1.1مراجعة جافاسكريبت الحديثة (ES6+)
الأساسي في 30 ثانية
- const افتراضيًا، وlet عند الحاجة، وvar أبدًا: const لما لا نعيد إسناده، let لما يتطور — وكلاهما ذو نطاق كتلة متوقّع.
- الصياغة التي نكتبها فعلًا: الدوال السهمية، التفكيك (Destructuring) (const { nom } = obj)، القوالب النصية (Template Literals) (`Bonjour ${nom}`)، spread/rest (...).
- المجموعات بأسلوب دالي: map (تحويل)، filter (انتقاء)، reduce (تجميع) — دون جافاسكريبت حديثة وسلسة، يبدو كل Node مربكًا.
حالة مستمرة — ساليم، مطوّر مبتدئ في الجزائر العاصمة
ساليم، مطوّر مبتدئ في شركة ناشئة بالجزائر العاصمة، يعيد العمل على سكربت قديم مكتوب بـ var وحلقات for متداخلة: المتغيرات «تتسرّب» خارج الكتل ولا أحد يفهم ما يحسبه الكود. يعيد كتابة السكربت بجافاسكريبت الحديثة — const افتراضيًا، ودوال سهمية، وتفكيك الكائنات المستلمة من الـ API، وتسلسل filter/map لاستخراج أسماء المستخدمين النشطين. يتقلّص الكود من 40 سطرًا غامضًا إلى 12 سطرًا مقروءًا.
تعود هذه الحالة نفسها في الدرس والمخطط والنص الجاهز وتحدي 48 ساعة — وتستمر في 1.2 و1.3 و1.4.
1. const وlet، وvar أبدًا
يشغّل Node جافاسكريبت: إتقان JS الحديثة (ES6+) هو المتطلب المسبق لكل شيء. لإعلان متغير: const (غير قابلة لإعادة الإسناد، تُفضَّل افتراضيًا لأن معظم المتغيرات لا تغيّر مرجعها)، let (قابلة لإعادة الإسناد، للعدادات والمراكمات)، وvar أبدًا (نطاق دالة مربك، مصدر أخطاء). const وlet لهما نطاق كتلة (محدود بالأقواس المعقوفة)، أكثر توقعًا بكثير. المنعكس الحديث: const افتراضيًا، وlet عند الحاجة لإعادة الإسناد، وvar أبدًا.
يستبدل ساليم كل var في سكربته القديم بـ const، ما عدا عدّاد الحلقة الذي صار let: تتوقف المتغيرات عن «التسرّب» خارج كتل if ويختفي نصف السلوكيات الغريبة.
2. الصياغة التي نكتبها فعلًا
أساسيات الحياة اليومية: الدوال السهمية (Arrow Functions) ((a, b) => a + b، مثالية لدوال رد الاتصال (Callback) المنتشرة في Node، دون this خاص)، التفكيك (Destructuring) (const { nom, age } = personne — منتشر في كل الاستيرادات والبيانات)، القوالب النصية (Template Literals) (`Bonjour ${nom}` بدل الدمج بـ +)، spread/rest (... للدمج أو التجميع).
يعرض ساليم مستخدميه بقالب نصي ويستخرج nom وemail بالتفكيك: انتهى زمن user.name المكررة عشر مرات والدمج غير المقروء.
3. map / filter / reduce: التفكير بالنوايا
توابع المصفوفات هي الطريقة الحديثة والدالية لمعالجة المجموعات: map تحوّل كل عنصر (مصفوفة جديدة بنفس الحجم)، filter تحتفظ بما يحقق شرطًا، reduce تجمع الكل في قيمة واحدة (مجموع، تجميع). كل واحدة تعبّر عن نية تُقرأ بنظرة واحدة — وكل كود Node حديث يستعملها باستمرار.
يستبدل ساليم حلقة for بـ users.filter(u => u.actif).map(u => u.nom): يُقرأ السطر كجملة («احتفظ بالنشطين، خذ أسماءهم») ويفهمه زميله دون تعليق.
🔎 مثال ملموس — 🔎 مثال عملي — map وfilter وreduce
التعبير عن نية، كما فعل ساليم لمستخدميه.
const users = [{ nom: "Amine", actif: true }, { nom: "Sara", actif: false }];
const noms = users.filter(function (u) { return u.actif; }).map(function (u) { return u.nom; });
console.log(noms); // ["Amine"]
const total = [1, 2, 3].reduce(function (s, n) { return s + n; }, 0);
console.log(total); // 6
const { nom } = users[0];
console.log("Bonjour " + nom);القراءة: «احتفظ بالنشطين، خذ أسماءهم» تُقرأ بنظرة واحدة، دون إدارة فهارس.
الدرس: const افتراضيًا؛ وmap/filter تنشئان مصفوفات جديدة بدل تعديل الأصلية.
مفردات القسم
- const / let (مقابل var)
- const: متغير غير قابل لإعادة الإسناد، يُفضَّل افتراضيًا. let: متغير قابل لإعادة الإسناد. كلاهما ذو نطاق كتلة؛ ويجب تجنّب var (نطاق دالة مربك).
مثال بسيط: الـ const users وعدّاد الـ let في السكربت الذي أعاد ساليم كتابته.
ما ليس كذلك: var معلنة داخل if «تتسرّب» خارج الكتلة.
رد فعل: const افتراضيًا، وlet عند إعادة الإسناد، وvar أبدًا.
- الدالة السهمية (Arrow Function)
- صياغة مختصرة لكتابة الدوال، مستعملة كثيرًا لدوال رد الاتصال (Callback)؛ وليس لها this خاص، ما يتجنّب كثيرًا من الفخاخ.
مثال بسيط: الـ u => u.actif التي مرّرها ساليم إلى filter.
ما ليس كذلك: دالة function كلاسيكية يتغيّر this فيها حسب الاستدعاء.
رد فعل: دوال رد الاتصال القصيرة = أسهم.
- التفكيك (Destructuring)
- استخراج قيم الكائنات أو المصفوفات في سطر واحد: const { nom } = obj أو const [a, b] = arr.
مثال بسيط: يستخرج ساليم nom وemail من كل مستخدم مستلم من الـ API.
ما ليس كذلك: تكرار user.name وuser.email على عشرة أسطر.
رد فعل: استخرج في سطر واحد، وسمِّ بوضوح.
- القالب النصي (Template Literal)
- سلسلة بين علامتي تنصيص خلفية تسمح بإدخال المتغيرات بنظافة، دون دمج بـ +.
مثال بسيط: عرض ساليم للمستخدمين دون دمج قطع السلاسل.
ما ليس كذلك: "Bonjour " + nom + ", tu as " + age + " ans".
رد فعل: متى دخل متغير في سلسلة، استعمل التنصيص الخلفي.
- map / filter / reduce
- توابع المصفوفات الحديثة: تحويل (map)، وانتقاء حسب شرط (filter)، وتجميع في قيمة (reduce) — بأسلوب دالي.
مثال بسيط: الـ filter + map الخاصة بساليم لأسماء المستخدمين النشطين.
ما ليس كذلك: حلقة for بفهرس، ومصفوفة مهيأة ودفع (push) يدوي.
رد فعل: نية واحدة لكل تابع، مسلسلةً بمقروئية.
في التطبيق — عمليًا — ترسيخ جافاسكريبت الحديثة
- أعلنوا متغيرات بـ const (افتراضيًا) وlet (عند إعادة الإسناد)؛ ولاحظوا نطاق الكتلة. احظروا var.
- اكتبوا دوالًا سهمية واستعملوها كدوال رد اتصال؛ وقارنوا مع صياغة function الكلاسيكية.
- تدرّبوا على التفكيك (const { a, b } = obj) والقوالب النصية على أمثلة عملية.
- عالجوا مصفوفة بـ map (تحويل) وfilter (انتقاء) وreduce (تجميع) بدل حلقات for الكلاسيكية.
نص جاهز — تبرير إعادة الكتابة بـ JS الحديثة (30 ثانية)
«أقترح إعادة كتابة هذا السكربت بجافاسكريبت الحديثة: const افتراضيًا، ودوال سهمية، وfilter/map بدل حلقات for. سيكون الكود أقصر بالنصف، وكل سطر سيعبّر عن نيته، وسنقضي على أخطاء النطاق الناتجة عن var.»
يُقال في مراجعة الكود؛ اعرضوا قبل/بعد على مقتطف حقيقي من المشروع.
نموذج نسخ ولصق — مقتطف JS حديث
const users = [
{ nom: "Amine", actif: true },
{ nom: "Sara", actif: false }
];
const nomsActifs = users
.filter(function (u) { return u.actif; })
.map(function (u) { return u.nom; });
console.log(nomsActifs);
const total = [10, 20, 30].reduce(function (s, n) { return s + n; }, 0);
console.log(total);سكربت قديم للمراجعة
لا تعيدوا كتابة كل شيء دفعة واحدة: استبدلوا var بـ const/let أولًا، ثم حوّلوا حلقة for إلى filter/map — كما فعل ساليم، بخطوات صغيرة مُتحقَّق منها مع node.
بيانات API في الجزائر
يفكّك ساليم الكائنات المستلمة من الـ API (const { nom, email } = user): الحقول المستعملة ظاهرة بنظرة واحدة أعلى كل دالة.
عروض نظيفة في الطرفية
متى احتوت رسالة على متغير، انتقلوا إلى القالب النصي: انتهى زمن الدمج بـ + الذي يكسر قراءة السجلات.
مصفوفات كبيرة قيد التحضير
الاعتياد على تسلسل filter/map/reduce يُحضّر مباشرة للقسم 1-2: هذه التوابع ستكون في كل مكان في معالجة النتائج غير المتزامنة.
✓ ممارسات جيدة
- const افتراضيًا، وlet عند إعادة الإسناد.
- نية واحدة لكل تابع (filter/map).
- اختبروا كل مقتطف مع node.
✗ أخطاء شائعة
- الاعتقاد أن const = كائن غير قابل للتغيير.
- الاحتفاظ بـ var «من العادة».
- حلقات for حيث تكفي filter/map.
النقاط الأساسية
- جافاسكريبت الحديثة (ES6+) = متطلب Node المسبق. المتغيرات: const افتراضيًا، وlet عند إعادة الإسناد، وvar أبدًا (نطاق كتلة، متوقّع).
- الدوال السهمية: مختصرة، مثالية لدوال رد الاتصال (Callback) المنتشرة في Node؛ دون this خاص.
- التفكيك والقوالب النصية وspread/rest: الصياغة التي نكتبها فعلًا اليوم.
- توابع المصفوفات (map/filter/reduce) = المعالجة الحديثة والدالية للمجموعات.
تحدي 48 ساعة — طبّق غدًا
أعيدوا كتابة قطعة كود قديمة (النموذج أعلاه): var ← const/let، حلقة for ← filter/map، دمج ← قالب نصي. شغّلوا مع node وتحقّقوا من النتيجة. تكفي 20 دقيقة.
- أستطيع شرح const مقابل let مقابل var (نطاق الكتلة).
- أعرف كتابة الأسهم والتفكيك والقوالب النصية.
- حوّلت حلقة for إلى filter/map.
أسئلة شائعة
const أم let أم var: أيها نستعمل، ولماذا نتجنب var؟
القاعدة الحديثة، للتطبيق المنهجي: const افتراضيًا، وlet إذا وجب إعادة الإسناد، وvar أبدًا. const تعبّر عن أن المرجع لن يتغير، وتحمي من إعادات الإسناد العرضية (خطأ يُرفَع مبكرًا) وتجعل الكود مقروءًا. دقة: const تمنع إعادة الإسناد، لكن محتوى كائن أو مصفوفة يبقى قابلًا للتعديل (arr.push(1) يعمل). let تخدم القيم التي تتطور (عدادات، مراكمات). var يجب تجنبها: نطاق دالة (var معلنة داخل if «تتسرّب» خارج الكتلة) ورفع خادع — بينما const/let لهما نطاق كتلة متوقّع وآمن.
هل يجب فعلًا إتقان map/filter/reduce، أم تكفي حلقات for؟
حلقات for تعمل، لكن map/filter/reduce هي الأسلوب الحديث والاصطلاحي — ويجب عليكم على الأقل فهمها لأنها في كل مكان في كود Node الحقيقي. map تحوّل كل عنصر (مصفوفة جديدة بنفس الحجم)، وfilter تحتفظ بما يحقق شرطًا، وreduce تجمع الكل في قيمة. المزايا: التعبيرية (users.filter(u => u.actif).map(u => u.nom) تُقرأ كجملة)، أخطاء أقل (لا فهرس يُدار)، وهي تنشئ مصفوفات جديدة بدل تعديل الأصلية. كما فعل ساليم، حوّلوا حلقاتكم واحدة واحدة: مكسب المقروئية فوري.
ما المنعكس الذي يجب تبنيه لإعلان المتغيرات في JS الحديثة؟