أهم 15 اختصار JavaScript يجب أن تعرفها

معظم قوائم «اختصارات JavaScript» تعرض الصيغة وتنتقل. المفيد فعلاً هو معرفة متى يعمل الاختصار ومتى ينقلب عليك — وهذا ما تركّز عليه القائمة التالية.

1. Optional chaining

const city = user?.address?.city;

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

2. Nullish coalescing

const name = input ?? "زائر";

يستخدم البديل فقط مع null أو undefined. الفرق الحاسم عن ||: الأخير يستبدل كل قيمة زائفة، فـ count || 10 تعطي 10 حين يكون العدد صفراً فعلاً. مع الأرقام والقيم المنطقية استخدم ?? دائماً.

3. القوالب النصية

const msg = `مرحباً ${name}، لديك ${n} رسالة`;

أوضح من الربط بعلامة الجمع، وتدعم الأسطر المتعددة. الفخ: لا تبنِ بها استعلامات SQL — ذلك هو تعريف ثغرة الحقن بعينه. استخدم استعلامات ذات معاملات.

4. التفكيك

const { name, email = "لا يوجد" } = user;
const [first, ...rest] = items;

مع قيم افتراضية وإعادة تسمية. الفخ: تفكيك كائن قد يكون undefined يرمي خطأ؛ اكتب const { name } = user ?? {}.

5. النشر والباقي

const merged = { ...defaults, ...options };
const copy = [...items];

الفخ الأهم: النسخ سطحي. الكائنات المتداخلة تبقى مشتركة، فتعديل copy[0].name يغيّر الأصل. للنسخ العميق استخدم structuredClone(obj).

6. دوال المصفوفات

const names  = users.map((u) => u.name);
const active = users.filter((u) => u.isActive);
const total  = orders.reduce((sum, o) => sum + o.amount, 0);

الفخ: لا تستخدم map لتنفيذ أثر جانبي بلا استخدام الناتج — هذا دور forEach. ولا تُرجع كل جولة مصفوفة جديدة داخل reduce على بيانات كبيرة؛ الكلفة تصير تربيعية.

7. ‎at()‎ للفهرسة من النهاية

const last = items.at(-1);

أوضح من items[items.length - 1]، وتعمل على النصوص أيضاً.

8. Object.entries مع التفكيك

for (const [key, value] of Object.entries(config)) {
  console.log(`${key}: ${value}`);
}

9. async/await مع معالجة صحيحة

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
} catch (err) {
  // تعامل معه فعلاً
}

الفخ الأكبر: fetch لا يرمي خطأ عند 404 أو 500 — يرمي فقط عند فشل الشبكة. فحص res.ok ضروري وليس اختيارياً.

10. Promise.all للتوازي

const [user, orders] = await Promise.all([
  getUser(id),
  getOrders(id),
]);

طلبان مستقلان بالتتابع يضاعفان زمن الانتظار بلا سبب. ملاحظة: Promise.all يفشل كله إن فشل أحدها؛ استخدم Promise.allSettled إن أردت النتائج الناجحة رغم فشل بعضها.

11. المعاملات المسماة عبر كائن

// ❌ ماذا يعني كل وسيط؟
createUser("أحمد", true, false, 3);

// ✅ يقرأ نفسه
createUser({ name: "أحمد", isAdmin: true, notify: false, level: 3 });

12. Set لإزالة التكرار

const unique = [...new Set(items)];

الفخ: المقارنة بالمرجع لا بالمحتوى، فالكائنات المتشابهة لا تُعد مكرّرة. للكائنات استخدم Map بمفتاح مميز.

13. ‎Object.groupBy‎

const byCategory = Object.groupBy(products, (p) => p.category);

يغني عن reduce طويل. حديث نسبياً — تحقق من دعمه في بيئتك المستهدفة.

14. تنسيق الأرقام والتواريخ بالعربية

new Intl.NumberFormat("ar-SA", {
  style: "currency", currency: "SAR",
}).format(1250.5);

new Intl.DateTimeFormat("ar-SA", { dateStyle: "long" }).format(new Date());

هذا أهم مما يبدو في المواقع العربية: Intl يتولى الفاصلة العشرية والعملة وشكل الأرقام حسب اللغة، بدل تنسيق يدوي ينكسر عند أول حالة حافّة.

15. ‎structuredClone‎ للنسخ العميق

const deepCopy = structuredClone(original);

بديل مدمج عن JSON.parse(JSON.stringify(x))، ويحافظ على Date وMap وSet التي كانت تُفقد في الطريقة القديمة.

القاعدة التي تحكم القائمة كلها

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