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

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

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

هنا السالفة كلها في الوضوح. لما تسمي شي، خله يعبر عن وظيفته.

• camelCase للمتغيرات والدوال: يعني تبدأ الكلمة الأولى بحرف صغير، وكل كلمة بعدها تبدأ بحرف كبير.
• مثال: myVariableName, calculateTotalPrice()
• PascalCase للفئات (Classes) والبناة (Constructors): كل كلمة تبدأ بحرف كبير.
• مثال: User, ProductFactory
• UPPER_SNAKE_CASE للثوابت (Constants): كل الحروف كبيرة وبين الكلمات شرطة سفلية.
• مثال: MAX_ITEMS, API_KEY

ملاحظة: لا تستخدم أسماء مختصرة أو غامضة مثل x, tmp, data إلا إذا كان سياقها واضح جداً ومحدود. خلك واضح عشان ما تتوهق بعدين.

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 there!');
  }
}

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

فيه ناس تحبها وناس تكرهها. لكن الأفضل إنك تستخدمها بشكل ثابت في نهاية كل جملة (statement). كذا تضمن إن الكود حقك ما يتصرف تصرفات غريبة بسبب ميزة الـ Automatic Semicolon Insertion (ASI).

مثال:

const name = 'Ahmed';
let age = 30;
console.log(name);

4. علامات الاقتباس (Quotes)

أغلب المطورين يفضلون علامات الاقتباس المفردة (') للسلاسل النصية (strings)، لكن الأهم هو الثبات. إذا بديت تستخدم المفردة، كمل عليها. إذا كنت تحتاج تستخدم متغيرات داخل النص، استخدم الـ template literals (الباكتيك ).

مثال:

const message = 'Hello world!';
const user = 'Ali';
const greeting = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">Welcome, ${user}!</code>; // Template literal for variables

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

التعليقات مهمة، بس لا تصير حشوي. علّق على الـ "لماذا" وليس الـ "ماذا". يعني اشرح سبب قرار برمجي معين، مو تشرح إن المتغير name يحمل اسم.

// BAD: هذا تعليق سيء
// const name = 'Sara'; // تعريف متغير للاسم

// GOOD: هذا تعليق جيد يوضح سبب قرار برمجي معقد
// Optimization: Using a Map for faster lookups in large datasets
const userMap = new Map();

6. الدوال الصغيرة والمركزة (Small, Focused Functions)

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

// BAD: دالة تسوي أكثر من شغلة
function processUserData(user) {
  // Validate user
  // Save user to DB
  // Send welcome email
}

// GOOD: دالة تسوي شغلة واحدة
function validateUser(user) { /* ... */ }
function saveUserToDatabase(user) { /* ... */ }
function sendWelcomeEmail(user) { /* ... */ }

7. التعامل مع الأخطاء (Error Handling)

استخدم try...catch لما تتوقع حدوث أخطاء ممكن تعطل الكود، خاصةً مع العمليات اللي تعتمد على عوامل خارجية زي استدعاء الـ APIs أو قراءة الملفات.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

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

جافاسكريبت تتطور بسرعة. استغل الميزات الجديدة اللي تخلي الكود أنظف وأسهل:

• const و let بدلاً من var.
• Arrow Functions (=>) للدوال القصيرة.
• Destructuring للمصفوفات والكائنات.
• Template Literals ( ) للسلاسل النصية.

مثال:

// بدل var
const userId = 123;
let userName = 'Khaled';

// بدل الدوال التقليدية
const add = (a, b) => a + b;

// Destructuring
const user = { id: 1, name: 'Fahad' };
const { id, name } = user;
console.log(id, name); // 1 Fahad

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

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

// BAD: يمكن يعطيك نتائج غير متوقعة
console.log(5 == '5');   // true
console.log(0 == false); // true

// GOOD: تقارن القيمة والنوع
console.log(5 === '5');   // false
console.log(0 === false); // false

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

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

// BAD
const x=1+2*3;
const arr=[1,2,3];

// GOOD
const x = 1 + 2 * 3;
const arr = [1, 2, 3];

وبس والله! هذي كانت أهم القواعد اللي بتخلي كودك احترافي ونظيف. طبقها، وبتشوف الفرق بنفسك. بالتوفيق!

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