أنماط JavaScript يجب أن تعرفها
JavaScript لغة مرنة جداً — وهذا يعني أنك تستطيع كتابة نفس الشيء بعشر طرق مختلفة. لكن المطورين المحترفين يستخدمون أنماطاً محددة تجعل الكود أنظف وأسهل في القراءة والصيانة. إليك أهم هذه الأنماط.
١. Destructuring لكود أنظف
بدلاً من الوصول لكل خاصية بشكل منفصل، استخرجها دفعة واحدة:
// ❌ قديم
const name = user.name;
const age = user.age;
// ✅ Destructuring
const { name, age, role = 'student' } = user;
// مع Arrays
const [first, second, ...rest] = items;
٢. Optional Chaining (?.) لتجنب الأخطاء
أحد أكثر الأخطاء شيوعاً هو محاولة الوصول لخاصية على قيمة undefined. الحل البسيط:
// ❌ يسبب خطأ إذا user كان undefined
const city = user.address.city;
// ✅ آمن تماماً
const city = user?.address?.city ?? 'غير محدد';
٣. Array Methods بدل الحلقات
map، filter، reduce هي أدوات قوية تجعل الكود أقصر وأوضح من حلقات for التقليدية:
const students = [
{ name: "أحمد", grade: 85 },
{ name: "سارة", grade: 92 },
{ name: "محمد", grade: 70 },
];
// فقط الناجحون (أكثر من 80)
const passed = students.filter(s => s.grade > 80);
// أسماء الناجحين فقط
const names = passed.map(s => s.name);
٤. Promise و Async/Await
نسيَ Callback Hell — async/await يجعل الكود غير المتزامن يبدو متزامناً وأسهل في الفهم:
async function getUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
const data = await res.json();
return data;
} catch (error) {
console.error('حدث خطأ:', error);
}
}
٥. Spread Operator لنسخ البيانات
لا تعدّل البيانات الأصلية — انسخها وعدّل على النسخة. هذا يمنع أخطاء صعبة الاكتشاف:
// نسخ Object مع تغيير خاصية واحدة
const updatedUser = { ...user, name: 'اسم جديد' };
// دمج Arrayas
const allItems = [...list1, ...list2];
الخلاصة
JavaScript الحديث أجمل وأوضح بكثير من الطرق القديمة. تدرّب على هذه الأنماط حتى تصبح طبيعية عندك، وستلاحظ فرقاً واضحاً في جودة كودك.