أهم اختصارات JavaScript للمبتدئين: دليل عملي لكتابة كود أسرع وأنظف

JavaScript Short-Hands: طرق ذكية لكتابة كود أقل وفهم أكثر

إذا كنت كتب جافا سكربت يوميًا وتقضي وقت طويل في كتابة نفس الأنماط من الكود. هنا يأتي دور JavaScript Short-Hands: اختصارات بسيطة تجعل الكود أقصر، أوضح وأسهل في القراءة والتعديل.

في هذا المقال سنتعرّف على أشهر هذه الاختصارات مع أمثلة عملية، بشكل موسّع ومناسب للمبتدئين والمتوسطين.

---

1. Optional Chaining

في المشاريع الحقيقية كثيرًا ما نحتاج للوصول إلى خصائص متداخلة داخل كائنات مثل user.address.city. المشكلة أن هادا جزء ممكن يكون undefined فيسبب لك أخطاء.

الطريقة التقليدية هي كتابة سلسلة طويلة من الشروط للتأكد من وجود كل مستوى، وهذا يجعل الكود مزدحمًا.

قبل (الطريقة التقليدية)

if (user && user.address && user.address.city) {

console.log(user.address.city);

}

الكود طويل ومزدحم، ويصعب قراءته مع تداخل أكثر.

بعد (Optional Chaining)

user?.address?.city

مع Optional Chaining نستخدم الرمز ?. بين الخصائص

بهذا الشكل إن لم يكن user أو address موجودًا، سيعيد التعبير undefined بدون خطأ، وسيبقى الكود نظيفًا وسهل القراءة.

هذه الميزة مثالية عند التعامل مع بيانات قادمة من API أو من قاعدة بيانات غير مضمونة البنية.

---

2. Array Destructuring

قبل (الطريقة التقليدية)

let numbers = [1, 2, 3];
let first = numbers[0];
let second = numbers[1];

بعد (Array Destructuring)

يمكنك استخدام Array Destructuring:

let [first, second] = numbers;

طريقة مختصرة وسريعة لاستخراج القيم، مفيدة جدًا عند التعامل مع الدوال التي تُرجع مصفوفات.

---

3. Spread Operator

قبل (دمج المصفوفات)

عند دمج مصفوفتين كنا نستخدم concat:

let combined = arr1.concat(arr2);

بعد

الآن يمكننا استعمال Spread Operator … لكتابة كود أسهل:

let combined = [...arr1, ...arr2];

قبل (نسخ كائن)

let clone = Object.assign({}, user);

بعد

let clone = {...user};

بهذا تنشئ نسخة سطحية من الكائن بدون التأثير على الأصل، وهي طريقة مستخدمة بكثرة مع React و state management.

---

4. Nullish Coalescing Operator

أحيانًا نريد تعيين قيمة افتراضية إذا كانت القيمة الحالية null أو undefined فقط، وليس كل القيم مثل 0 أو “”.

قبل

let value =

someValue !== null && someValue !== undefined

? someValue

: 'default';

بعد

عوضًا عن شرط طويل، نستخدم ??:

let value = someValue ?? 'default';

وهيك بنحافظ على القيم الصفرية الصحيحة مثل 0 و false، ونستبدل فقط القيم غير المعرفة.

---

5. Increment / Decrement

قبل

count = count + 1;

count = count - 1;

بعد

شكلًا وأوضح استخدام ++ و —:

count++;
count--;

صيغة مختصرة وواضحة، وتُستخدم بكثرة داخل الحلقات loops.

---

6. Array Mapping و Filtering باختصار

بدلًا من استخدام function تقليدية مع map و filter، يمكن استعمال Arrow Functions:

قبل

let doubled = numbers.map(function (n) {

return n * 2;

});

let evens = numbers.filter(function (n) {

return n % 2 === 0;

});

بعد

numbers.map(n => n * 2);

numbers.filter(n => n % 2 === 0);

الكود يصبح على سطر واحد، واضح الهدف، ومناسب جدًا لسلاسل المعالجة على المصفوفات.

---

7. التحويل إلى Boolean

أحيانًا نحتاج فقط لمعرفة إن كانت القيمة “موجودة” أو لا.

استخدام !! يحوّل أي قيمة إلى true أو false مباشرة:

قبل

let isValid;

if (value) {

isValid = true;

} else {

isValid = false;

}

بعد

let isValid = !!value;

هذه التقنية مفيدة في التحقق من المدخلات أو الردود من السيرفر.

---

8. Rounding Numbers

للتقريب كنا نستخدم Math.round(number). هناك اختصار باستعمال العمليات البتّية:

قبل

let rounded = 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 ليست مجرد تقليل للأسطر، بل أسلوب تفكير يساعدك على كتابة كود:

• أوضح
• أسهل قراءة
• أسرع للتعديل

استخدام هذه التقنيات بشكل صحيح سيجعلك مطوّرًا أكثر احترافية، ويُحسّن جودة مشاريعك بشكل ملحوظ.