قواعد كتابة الكود في لغة JavaScript

يا هلا! بما إنك وصلت هنا، فأكيد حابب تكتب كود JavaScript نظيف ومفهوم، مو بس لك، لأي حد تاني ممكن يشتغل على نفس المشروع (أو حتى لنفسك بعد 6 شهور لما تنسى إيش كتبت!). الموضوع مو رفاهية، بل ضرورة عشان الكود يكون سهل القراءة، الصيانة، وإصلاح الأخطاء.

1. تسمية المتغيرات والدوال (Naming Conventions)

هذي يمكن أهم نقطة! تخيل تشوف متغير اسمه x أو temp1. وش يعني؟

• المتغيرات والدوال (Variables & Functions): استخدم camelCase. خلي الاسم وصفي وواضح.

مثال:

let userName = 'أحمد';

function calculateTotalPrice() { /* ... */ }

ابتعد عن:

let un = 'أحمد';

function calcPrice() { /* ... */ }

• الثوابت (Constants): استخدم UPPER_SNAKE_CASE.

مثال:

const MAX_ITEMS = 100;

const API_KEY = 'some_secret_key';

• الكلاسات (Classes): استخدم PascalCase.

مثال:

class UserProfile { /* ... */ }

2. المسافات البادئة (Indentation)

الكود بدون مسافات بادئة زي الجدار اللي انهد، صعب تعرف وين البداية والنهاية. استخدم مسافتين أو أربع مسافات (الأهم تكون ثابتة في كل المشروع).

مثال:

function greet(name) {
  if (name) {
    console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">Hello, ${name}!</code>);
  } else {
    console.log('Hello, guest!');
  }
}

3. الفواصل المنقوطة (Semicolons)

الـ JavaScript ممكن تشتغل بدونها أحياناً بفضل ميزة Automatic Semicolon Insertion (ASI)، لكن الأفضل دايماً تحطها عشان تتجنب أي سلوك غير متوقع.

مثال:

let count = 0;

count++;

console.log(count);

4. الأقواس المتعرجة (Braces)

فيه مدرستين هنا، لكن الأكثر شيوعاً هو إن القوس الافتتاحي يكون على نفس السطر مع الكلمة المفتاحية (if, for, function).

مثال:

if (condition) {
  // code here
}

function doSomething() {
  // code here
}

5. المساواة الصارمة (Strict Equality)

استخدم === و !== بدلاً من == و !=. المساواة الصارمة تقارن القيمة والنوع، وهذا يجنبك مشاكل التحويل التلقائي للأنواع.

مثال:

'5' == 5; // true (مشكلة!)

'5' === 5; // false (صحيح)

6. التعليقات (Comments)

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

مثال:

// This function calculates the factorial of a number recursively.
function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1); // Recursive call
}

7. المسافات البيضاء (Whitespace)

استخدم المسافات البيضاء حول المعاملات (operators)، بعد الفواصل، وبين العناصر عشان الكود يكون سهل القراءة.

مثال:

let sum = a + b;

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

const arr = [1, 2, 3];

8. استخدم ميزات ES6+ الحديثة

الـ JavaScript تتطور بسرعة! استخدم الميزات الجديدة زي:

• let و const: بدلاً من var.
• Arrow Functions: للاختصار والوضوح خاصة في الـ callbacks.
• Template Literals: لبناء الـ strings بسهولة (Hello, ${name}).
• Destructuring: لفك قيم الكائنات والمصفوفات.

مثال:

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(num => num * 2); // Arrow function

const user = { firstName: 'Ali', lastName: 'Mohammad' };
const { firstName, lastName } = user; // Destructuring
console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">Welcome, ${firstName} ${lastName}!</code>); // Template literal

9. تقسيم الكود (Modularity)

لا تخلي دالتك تسوي كل شي! قسم الكود لمهام صغيرة ومنطقية. كل دالة أو وحدة (module) تسوي شي واحد بس، وتسويه صح.

مثال:

بدلاً من دالة واحدة كبيرة تسوي جلب بيانات، معالجة، وعرض:

function processAndDisplayUserData() { /* ... */ }

قسمها إلى:

async function fetchUserData() { /* ... */ }

function transformUserData(data) { /* ... */ }

function renderUserCard(user) { /* ... */ }

في النهاية، الأهم هو الثبات. اختار مجموعة من القواعد والتزم فيها في كل مشروعك. فيه أدوات زي ESLint و Prettier ممكن تساعدك تفرض هالقواعد بشكل تلقائي. بالتوفيق!

← السابقالفهرسالتالي →