JavaScript Short-Hands: طرق ذكية لكتابة كود أقل وفهم أكثر
إذا كنت كتب جافا سكربت يوميًا وتقضي وقت طويل في كتابة نفس الأنماط من الكود. هنا يأتي دور JavaScript Short-Hands: اختصارات بسيطة تجعل الكود أقصر، أوضح وأسهل في القراءة والتعديل.
في هذا المقال سنتعرّف على أشهر هذه الاختصارات مع أمثلة عملية، بشكل موسّع ومناسب للمبتدئين والمتوسطين.
1. Optional Chaining
في المشاريع الحقيقية كثيرًا ما نحتاج للوصول إلى خصائص متداخلة داخل كائنات مثل user.address.city. المشكلة أن هادا جزء ممكن يكون undefined فيسبب لك أخطاء.
الطريقة التقليدية هي كتابة سلسلة طويلة من الشروط للتأكد من وجود كل مستوى، وهذا يجعل الكود مزدحمًا.
مع Optional Chaining نستخدم الرمز ?. بين الخصائص:
user?.address?.cityبهذا الشكل إن لم يكن user أو address موجودًا، سيعيد التعبير undefined بدون خطأ، وسيبقى الكود نظيفًا وسهل القراءة.
هذه الميزة مثالية عند التعامل مع بيانات قادمة من API أو من قاعدة بيانات غير مضمونة البنية.
2. Array Destructuring
بدلًا من:
let numbers = [1, 2, 3];
let first = numbers[0];
let second = numbers[1];يمكنك استخدام Array Destructuring:
let [first, second] = numbers;هذه الطريقة مفيدة عندما تستقبل دوالك مصفوفات وتريد استخراج قيم معيّنة بسرعة، أو عندما ترجّع دالة أكثر من قيمة في مصفوفة واحدة.
3. Spread Operator
عند دمج مصفوفتين كنا نستخدم concat:
let combined = arr1.concat(arr2);الآن يمكننا استعمال Spread Operator … لكتابة كود أسهل:
let combined = [...arr1, ...arr2];نفس الفكرة تنطبق على الكائنات:
let clone = {...user};بهذا تنشئ نسخة سطحية من الكائن بدون التأثير على الأصل، وهي طريقة مستخدمة بكثرة مع React و state management.
4. Nullish Coalescing Operator
أحيانًا نريد تعيين قيمة افتراضية إذا كانت القيمة الحالية null أو undefined فقط، وليس كل القيم مثل 0 أو “”.
عوضًا عن شرط طويل، نستخدم ??:
let value = someValue ?? 'default';وهيك بنحافظ على القيم الصفرية الصحيحة مثل 0 و false، ونستبدل فقط القيم غير المعرفة.
5. Increment / Decrement
كتابة:
count = count + 1;تعمل، لكن أقصر شكلًا وأوضح استخدام ++ و —:
count++;وكذلك
count--;هذه الصيغة شائعة في الحلقات loops، وتُعتبر معيارًا في كتابة جافا سكربت.
6. Array Mapping و Filtering باختصار
بدلًا من استخدام function تقليدية مع map و filter، يمكن استعمال Arrow Functions:
numbers.map(n => n * 2);
numbers.filter(n => n % 2 === 0);الكود يصبح على سطر واحد، واضح الهدف، ومناسب جدًا لسلاسل المعالجة على المصفوفات.
7. التحويل إلى Boolean
أحيانًا نحتاج فقط لمعرفة إن كانت القيمة “موجودة” أو لا.
استخدام !! يحوّل أي قيمة إلى true أو false مباشرة:
let isValid = !!value;هذه التقنية مفيدة في التحقق من المدخلات أو الردود من السيرفر.
8. Rounding Numbers
للتقريب كنا نستخدم Math.round(number). هناك اختصار باستعمال العمليات البتّية:
let rounded = ~~(number + 0.5);هذه حيلة قديمة وسريعة، لكنها أقل وضوحًا من Math.round، لذلك يُفضّل استخدامها فقط إن كنت تفهم تمامًا ما يحدث في الخلفية.
9. Swapping Variables
لتبديل قيم متغيرين كنا نستخدم متغيرًا مؤقتًا:
let temp = a;
a = b;
b = temp;مع Destructuring يمكننا كتابة:
[a, b] = [b, a];جملة واحدة أنيقة توضح الفكرة مباشرة.
الخلاصة
اختصارات JavaScript ليست مجرد تقليل للأسطر، بل أسلوب تفكير يساعدك على كتابة كود:
- أوضح
- أسهل قراءة
- أسرع للتعديل