إزاي تقسم الدالة الكبيرة لدوال أصغر

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

ابدأ بتحديد المهام الموجودة

في المثال التالي فيه حساب إجمالي وحساب شحن وتجهيز رسالة وطباعتها هنفترض إن الأسعار والكميات أعداد صحيحة صالحة علشان نركز على التنظيم

function showOrder(items) {
  let subtotal = 0;
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }
  const shipping = subtotal >= 300 ? 0 : 25;
  const total = subtotal + shipping;
  console.log("Total: " + total);
}

showOrder([{ price: 100, quantity: 2 }]);

Total: 225

استخرج جزء له اسم ومعنى

حساب الإجمالي مهمة مفهومة ليها مدخلات ونتيجة نقدر نفصلها من غير ما تحتاج تعرف طريقة عرض الرسالة

function calculateSubtotal(items) {
  let subtotal = 0;
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }
  return subtotal;
}

console.log(calculateSubtotal([{ price: 100, quantity: 2 }]));

افصل القرار عن العرض

حساب الشحن قرار مستقل ممكن تختبره عند الحد الفاصل 300 وتجهيز الرسالة مختلف عن طباعتها الفصل ده بيساعدك تعيد استخدام الحساب في شاشة أو API

function calculateSubtotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

function calculateShipping(subtotal) {
  return subtotal >= 300 ? 0 : 25;
}

function orderMessage(items) {
  const subtotal = calculateSubtotal(items);
  const shipping = calculateShipping(subtotal);
  return "Total: " + (subtotal + shipping);
}

console.log(orderMessage([{ price: 100, quantity: 2 }]));
console.log(orderMessage([{ price: 100, quantity: 3 }]));

Total: 225
Total: 300

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

ثبت السلوك قبل ما تحسنه

لو بتعمل Refactoring فالهدف ترتيب الكود مع الحفاظ على سلوكه الملحوظ اختبر الأمثلة الحالية قبل التعديل وبعده ومتغيرش قواعد الشحن في نفس الخطوة من غير طلب واضح

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

function calculateShipping(subtotal) {
  return subtotal >= 300 ? 0 : 25;
}

console.log(calculateShipping(299));
console.log(calculateShipping(300));
console.log(calculateShipping(301));

25
0
0

بلاش دوال صغيرة من غير معنى

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

خلي البيانات اللي الدالة محتاجاها واضحة

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

تدريب على كود حقيقي

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