اختصارات مفيدة في JavaScript مع أمثلة عملية

اختصارات JavaScript ممكن تقلل التكرار وتوضح الفكرة لكن السطر الأقصر مش دايما الحل الأفضل المهم إنك تفهم الاختصار بيعمل إيه وإمتى يغير سلوك الكود

الأمثلة الجاية مستقلة عن بعض تقدر تجرب كل مثال لوحده وتركز على النتيجة قبل ما تستخدم نفس الفكرة في مشروعك

اختصار أسماء الخصائص داخل ال Object

لو اسم الخاصية هو نفس اسم المتغير تقدر تكتبه مرة واحدة بدل تكراره القيمة اللي هتتحفظ هي قيمة المتغير وقت إنشاء ال Object

const name = "Mona";
const score = 95;
const student = { name, score };

console.log(student.name);
console.log(student.score);

Mona
95

استخراج القيم باستخدام Destructuring

بدل ما تكرر اسم ال Object مع كل خاصية تقدر تستخرج القيم اللي محتاجها وتديها أسماء واضحة تقدر كمان تضيف قيمة افتراضية لكنها بتشتغل مع undefined فقط مش null

const product = { name: "Keyboard", price: 40 };
const { name: productName, price, stock = 0 } = product;

console.log(productName);
console.log(price);
console.log(stock);

Keyboard
40
0

تبديل قيمتين من غير متغير مؤقت

تقدر تستخدم تفكيك المصفوفة لتبديل قيم متغيرين لازم المتغيرات هنا تكون قابلة لإعادة الإسناد لذلك استخدمنا let

let first = "A";
let second = "B";
[first, second] = [second, first];

console.log(first);
console.log(second);

B
A

اختيار قيمة بشرط بسيط

ال Ternary Operator مناسب لما تختار بين قيمتين بناء على شرط واضح لو جوا كل اختيار خطوات كتير أو شروط متداخلة فال if غالبا هتكون أوضح

const score = 75;
const result = score >= 60 ? "Passed" : "Try Again";
console.log(result);

Passed

قيمة بديلة تحافظ على الصفر

ال || بيستخدم البديل مع أي قيمة Falsy زي الصفر والنص الفاضي و false أما ال ?? بيستخدم البديل مع null أو undefined فقط اختار بناء على المطلوب مش بناء على عدد الحروف

const quantity = 0;
console.log(quantity || 10);
console.log(quantity ?? 10);
console.log(null ?? 10);

10
0
10

قراءة خاصية اختيارية من غير خطأ

ال Optional Chaining بيوقف القراءة عند null أو undefined في الجزء اللي حطيت عنده ?. وده مفيد لما بعض البيانات ممكن تكون ناقصة جمعناه هنا مع ?? علشان نعرض قيمة بديلة

const member = {};
const city = member.address?.city ?? "Unknown";
console.log(city);

Unknown

لازم member نفسه يكون متعرف الاختصار مش بيحل مشكلة متغير غير موجود ولو member ممكن يكون null استخدم member?.address?.city

تعيين القيمة الافتراضية وقت الحاجة فقط

ال ??= بيحفظ قيمة بديلة لو القيمة الحالية null أو undefined وفي المثال الصفر هيفضل زي ما هو لأنه قيمة موجودة

const settings = { retries: 0, theme: null };
settings.retries ??= 3;
settings.theme ??= "dark";

console.log(settings.retries);
console.log(settings.theme);

0
dark

دالة قصيرة بترجع نتيجة مباشرة

ال Arrow Function ينفع ترجع منها تعبيرا واحدا من غير كتابة return لو محتاج ترجع Object مباشرة حطه بين أقواس علشان الأقواس المعقوفة متتفهمش كجسم الدالة

const createProduct = (name) => ({ name, available: true });
console.log(createProduct("Mouse").name);

Mouse

متستبدلش كل function بسهم بشكل آلي لأن ال Arrow Function ليها سلوك مختلف مع this ومش بتستخدم كدالة إنشاء مع new

نسخ المصفوفة باستخدام Spread

تقدر تنشئ مصفوفة جديدة وتضيف لها عنصرا من غير تعديل المصفوفة الأصلية لكن النسخة هنا سطحية لو العناصر Objects فالمراجع الداخلية لسه مشتركة

const original = ["HTML", "CSS"];
const updated = [...original, "JavaScript"];

console.log(original.join(" | "));
console.log(updated.join(" | "));

HTML | CSS
HTML | CSS | JavaScript

اختصار الشرط مش دايما نفس المعنى

ال if مع قيمة مباشرة بيختبر هل هي Truthy لكن المقارنة مع true بتطلب قيمة Boolean true نفسها النص "false" مثلا نص غير فاضي وبالتالي Truthy رغم شكل الكلمة

const enabled = "false";
console.log(Boolean(enabled));
console.log(enabled === true);

true
false

إمتى تسيب الكود أطول

لو الاختصار هيخفي معنى القيمة أو هيصعب اكتشاف الخطأ اكتب النسخة الواضحة تجنب الإسناد المتسلسل لمتغيرات مش متعرفة واستخدم const أو let لكل متغير بشكل واضح

قبل استبدال كود موجود جرب نفس المدخلات قبل وبعد الاختصار خصوصا الصفر والنص الفاضي و null و undefined علشان تتأكد إنك اختصرت الكتابة من غير ما تغير المطلوب