كود نظيف في JavaScript: دليل لمن يكتبون للبشر

لماذا "الكود النظيف" ليس متعلقًا بالجماليات، بل بالمال والوقت

تخيل أنك تفتح مشروعًا لشخص آخر بلغة JavaScript. المتغيرات تُسمى a، b، x1. دالة بطول 300 سطر. تداخل الشروط مثل الدمية الروسية. هل هذا مألوف؟ إذا كنت قد لعنت يومًا مثل هذا "المؤلف"، فأنت تدرك بالفعل سبب الحاجة إلى الكود النظيف.

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

القاعدة رقم 1: أسماء المتغيرات والدوال يجب أن تتحدث عن نفسها

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

let d = new Date();\nlet n = d.getDay();\nlet r = n === 0 || n === 6 ? 'عطلة نهاية الأسبوع' : 'يوم عمل';\nconsole.log(r);\n

مثال جيد:

const currentDate = new Date();\nconst dayOfWeek = currentDate.getDay();\nconst isWeekend = dayOfWeek === 0 || dayOfWeek === 6;\nconst dayType = isWeekend ? 'عطلة نهاية الأسبوع' : 'يوم عمل';\nconsole.log(dayType);\n

الفرق واضح. في الخيار الثاني، نفهم فورًا ما يفعله الكود دون تعليقات إضافية. نصيحة: استخدم الأسماء للمتغيرات والأفعال للدوال. على سبيل المثال: getUserData()، calculateTotal()، isValidEmail().

كيف تتجنب "الأرقام السحرية"؟

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

// سيء\nif (user.role === 1) { ... }\n\n// جيد\nconst ROLE_ADMIN = 1;\nif (user.role === ROLE_ADMIN) { ... }\n

القاعدة رقم 2: الدوال يجب أن تكون صغيرة وتقوم بشيء واحد فقط

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

function processOrder(order) {\n    // التحقق\n    if (!order.items || order.items.length === 0) {\n        throw new Error('السلة فارغة');\n    }\n    // حساب الخصم\n    let discount = 0;\n    if (order.total > 1000) {\n        discount = 0.1;\n    }\n    // إرسال البريد الإلكتروني\n    sendEmail(order.email, 'تم استلام طلبك');\n    return order.total - order.total * discount;\n}\n

مثال جيد (إعادة هيكلة):

function validateOrder(order) {\n    if (!order.items || order.items.length === 0) {\n        throw new Error('السلة فارغة');\n    }\n}\n\nfunction calculateDiscount(total) {\n    return total > 1000 ? 0.1 : 0;\n}\n\nfunction notifyCustomer(email) {\n    sendEmail(email, 'تم استلام طلبك');\n}\n\nfunction processOrder(order) {\n    validateOrder(order);\n    const discount = calculateDiscount(order.total);\n    notifyCustomer(order.email);\n    return order.total - order.total * discount;\n}\n

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

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

كلما زادت مستويات التداخل (if داخل if داخل for)، زادت صعوبة قراءة الكود. استخدم الإرجاع المبكر (early return) و جمل الحراسة (guard clauses).

// سيء\nfunction getUserDisplayName(user) {\n    if (user) {\n        if (user.name) {\n            if (user.name.length > 0) {\n                return user.name;\n            }\n        }\n    }\n    return 'مجهول';\n}\n\n// جيد\nfunction getUserDisplayName(user) {\n    if (!user || !user.name || user.name.length === 0) {\n        return 'مجهول';\n    }\n    return use