أهم 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 لا يرمي خطأ عند أخطاء HTTP مثل 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);

// ar-SA وحدها قد تطبع تاريخاً هجرياً في بعض البيئات، فحدّد التقويم الميلادي صراحةً
new Intl.DateTimeFormat("ar-SA-u-ca-gregory", { dateStyle: "long" }).format(new Date());

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

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

const deepCopy = structuredClone(original);

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

الأسئلة الشائعة

ما الفرق بين عامل ?? وعامل || في JavaScript؟

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

هل يرمي fetch خطأ عندما يرد الخادم بحالة 404 أو 500؟

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

كيف أنسخ كائناً نسخاً عميقاً في JavaScript دون مشاركة الكائنات المتداخلة؟

النسخ بعامل النشر سطحي، فتبقى الكائنات المتداخلة مشتركة ويؤدي تعديلها في النسخة إلى تغيير الأصل. للنسخ العميق استخدم structuredClone، وهو بديل مدمج عن JSON.parse(JSON.stringify(x)) ويحافظ على Date وMap وSet التي كانت تُفقد في تلك الطريقة القديمة.

كيف أشغّل عدة طلبات غير متزامنة بالتوازي في JavaScript؟

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

ما أفضل طريقة لعرض الأسعار بالريال والتواريخ بالعربية في JavaScript؟

استخدم واجهة Intl، مثل Intl.NumberFormat مع اللغة ar-SA ونمط العملة ورمز SAR، وIntl.DateTimeFormat للتواريخ. فهي تتولى الفاصلة العشرية والعملة وشكل الأرقام حسب اللغة، بدل تنسيق يدوي ينكسر عند أول حالة حافّة.

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

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