7 نصائح وحيل في استخدام لغة الجافا سكريبت (JavaScript)

إذا كنت تكتب JavaScript كل يوم، فبعض الحيل الصغيرة توفّر عليك أسطرًا كثيرة وتجعل كودك أوضح. ستجد هنا 7 نصائح عملية، ومع كل نصيحة مثال جاهز للتشغيل، وستعرف أيضًا متى تستخدم كل حيلة ومتى تتجنبها.

جرّب كل مثال بنفسك في الكونسول (Console) داخل المتصفح أو في Node.js، لأن التجربة العملية هي أسرع طريقة لتثبيت الفكرة.

1. اجمع قيم المصفوفة في سطر واحد باستخدام reduce

لنفترض أن لديك مصفوفة أرقام وتريد مجموعها. الطريقة التقليدية هي حلقة for تمر على كل عنصر وتضيفه إلى متغير. الدالة reduce تختصر ذلك:

const numbers = [2, 52, 55, 5];
const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 114

الرقم 0 في النهاية هو القيمة الابتدائية (Initial Value). لا تحذفه، لأن reduce بدونه ترمي خطأ إذا كانت المصفوفة فارغة.

الفكرة نفسها تنفع مع مصفوفة كائنات، مثل حساب إجمالي سلة مشتريات:

const cart = [{ price: 120 }, { price: 80 }, { price: 50 }];
const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 250

2. قصّ المصفوفة بتغيير خاصية length

const array = [11, 12, 12, 122, 1222];
console.log(array.length); // 5

array.length = 4;
console.log(array); // [11, 12, 12, 122]

عندما تضع في خاصية length قيمة أصغر من طول المصفوفة، تُحذف العناصر الزائدة من نهايتها فورًا. والسطر array.length = 0 يفرّغ المصفوفة بالكامل.

انتبه: هذه الطريقة تعدّل المصفوفة الأصلية (Mutation)، فيتأثر كل متغير يشير إليها. إذا أردت نسخة مقصوصة وتريد أن يبقى الأصل كما هو، فاستخدم slice:

const firstFour = array.slice(0, 4);

3. اخلط عناصر المصفوفة بالطريقة الصحيحة

تنتشر حيلة array.sort(() => Math.random() - 0.5) لخلط المصفوفة. هي قصيرة، لكن نتيجتها غير عادلة: بعض الترتيبات تظهر أكثر من غيرها، لأن خوارزمية الترتيب لا تتوقع دالة مقارنة تعطي نتائج عشوائية. تكفي لتجربة سريعة، لكن لا تعتمد عليها في اختبار أو لعبة أو سحب عشوائي.

الحل المعتمد هو خوارزمية فيشر-ييتس (Fisher–Yates Shuffle)، وهي قصيرة أيضًا:

function shuffle(items) {
  const result = [...items];
  for (let i = result.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [result[i], result[j]] = [result[j], result[i]];
  }
  return result;
}

const array = [11, 12, 13, 14, 150, 15, 555, 556, 545];
console.log(shuffle(array)); // a different order each run

الدالة تخلط نسخة من المصفوفة، فتبقى المصفوفة الأصلية كما هي. وإذا احتجت العشوائية لغرض أمني فاستخدم crypto.getRandomValues بدلًا من Math.random.

4. احصل على القيم الفريدة باستخدام Set

المجموعة (Set) هيكل بيانات يخزّن القيم بلا تكرار ويحافظ على ترتيب إدخالها. لذلك تكفيك خطوة واحدة لحذف القيم المكررة من مصفوفة:

const array = [11, 12, 12, 222];
const unique = [...new Set(array)];
console.log(unique); // [11, 12, 222]

هذه الطريقة تنفع مع الأرقام والنصوص. أما الكائنات فتُقارَن بالمرجع (Reference) وليس بالمحتوى، لذلك يُحسب كائنان متطابقان في الشكل قيمتين مختلفتين.

وفي المتصفحات الحديثة والإصدارات الحديثة من Node.js أصبحت في Set دوال جاهزة لعمليات المجموعات، مثل union وintersection وdifference:

const frontend = new Set(["html", "css", "js"]);
const backend = new Set(["js", "sql"]);
console.log(frontend.intersection(backend)); // Set(1) {'js'}

5. افهم مشغل الفاصلة (Comma Operator)

ينفّذ مشغل الفاصلة كل تعبير من اليسار إلى اليمين، ثم يعيد قيمة التعبير الأخير:

let x = 1;
x = (x++, x);
console.log(x); // 2

يُنفَّذ x++ أولًا فتصبح قيمة x هي 2، ثم يعيد المشغل قيمة التعبير الأخير x.

أكثر استخداماته فائدة هو تحديث متغيرين معًا في جزء التحديث من حلقة for، كما في i++, j-- عند عكس مصفوفة بمؤشرين:

const letters = ["a", "b", "c", "d"];
for (let i = 0, j = letters.length - 1; i < j; i++, j--) {
  [letters[i], letters[j]] = [letters[j], letters[i]];
}
console.log(letters); // ["d", "c", "b", "a"]

في غير هذه الحالة يُفضَّل أن تتجنبه، لأنه يجعل الكود صعب القراءة على من يعمل معك.

6. بدّل قيمتي متغيرين دون متغير مؤقت

إذا كان لديك متغيران x = 5 وy = 10 وتريد أن تتبادل قيمتاهما، فالطريقة المعروفة تحتاج متغيرًا ثالثًا:

let x = 5;
let y = 10;
let temp = x;
x = y;
y = temp;
console.log(x); // 10
console.log(y); // 5

أما التفكيك (Array Destructuring) فيختصر العملية إلى سطر واحد:

let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x); // 10
console.log(y); // 5

الطريقة نفسها تنفع مع عناصر المصفوفة، وقد استخدمناها في دالة الخلط وفي مثال عكس المصفوفة.

7. اختصر جملة if بالمشغلات المنطقية

const isAlmdrasa = true;

if (isAlmdrasa) {
  console.log("I love Almdrasa");
}

يمكنك أن تكتبها هكذا:

const isAlmdrasa = true;

isAlmdrasa && console.log("I love Almdrasa");

ينفّذ المشغل && الطرف الأيمن فقط إذا كانت قيمة الطرف الأيسر صحيحة (Truthy). استخدمه في الشروط القصيرة الواضحة، وهو شائع في React لعرض عنصر بشرط. أما إذا احتجت else أو أكثر من سطر فجملة if أوضح.

انتبه: إذا كانت قيمة الطرف الأيسر 0 فسيعيد المشغل الرقم 0 نفسه، وقد يظهر هذا الرقم في واجهة React بدلًا من ألا يظهر شيء.

مشغلان حديثان يكمّلان الفكرة: ?. و ??

const user = { name: "Sara", profile: null };

console.log(user.profile?.city); // undefined instead of an error
const city = user.profile?.city ?? "Unknown";
console.log(city); // "Unknown"

const count = 0;
console.log(count || 10); // 10
console.log(count ?? 10); // 0

التسلسل الاختياري (Optional Chaining) ?. يمنع الخطأ عندما تكون قيمة في منتصف السلسلة null أو undefined. ومشغل ?? (Nullish Coalescing) يضع القيمة البديلة فقط عندما تكون القيمة null أو undefined، بينما يضعها || مع أي قيمة خاطئة (Falsy) مثل 0 والنص الفارغ. لهذا يكون ?? أدق مع الأرقام.

نصائح إضافية لكود JavaScript حديث

أضافت اللغة في السنوات الأخيرة دوال تحل مشكلات كانت تحتاج إلى حيل خاصة:

• at(): تقرأ بها العنصر الأخير مباشرة بكتابة arr.at(-1) بدلًا من arr[arr.length - 1].
• structuredClone(): تنسخ بها الكائن نسخًا عميقًا (Deep Copy)، وهي أفضل من حيلة JSON.parse(JSON.stringify(obj)) التي تحوّل التواريخ إلى نصوص.
• Object.groupBy(): تجمّع بها العناصر حسب خاصية معيّنة، مثل Object.groupBy(courses, c => c.level).

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

أدوات إكمال الكود الذكية ستقترح عليك هذه الأنماط كثيرًا. وفهمك لما تفعله كل دالة هو ما يجعلك تفرّق بين الاقتراح الصحيح والاقتراح الخاطئ، مثل حيلة الخلط باستخدام sort. وإذا أردت أن تتعمق في هذه المفاهيم بالتطبيق، فدورة JavaScript Intermediate ثم دورة Advanced JavaScript تبنيانها خطوة بخطوة.

الخلاصة

• استخدم reduce للجمع، وSet للقيم الفريدة، والتفكيك لتبديل القيم.
• تعديل length يقصّ المصفوفة الأصلية، فاستخدم slice إذا أردت نسخة.
• اخلط المصفوفة بخوارزمية Fisher–Yates وليس بالدالة sort مع قيم عشوائية.
• استخدم && ومشغل الفاصلة في الحالات القصيرة الواضحة فقط، وقدّم وضوح الكود على قِصره.

إذا كنت تريد أن تبني أساسًا متينًا في اللغة من البداية بالعربية ومع مشاريع عملية، فابدأ مسار تعلم JavaScript من الصفر حتى الاحتراف.

أسئلة شائعة

هل يمكنني استخدام خاصية length لتقليل طول المصفوفة؟

نعم. عندما تضع في length قيمة أصغر تُحذف العناصر الزائدة من نهاية المصفوفة. انتبه إلى أن هذا يعدّل المصفوفة الأصلية نفسها.

ما دور مشغل الفاصلة (Comma Operator) في JavaScript؟

ينفّذ كل تعبير من اليسار إلى اليمين ويعيد قيمة التعبير الأخير. أكثر استخداماته فائدة هو تحديث أكثر من متغير في حلقة for.

لماذا لا أستخدم sort مع Math.random لخلط المصفوفة؟

لأن النتيجة غير متساوية الاحتمالات، فبعض الترتيبات تتكرر أكثر من غيرها. خوارزمية Fisher–Yates تعطي كل ترتيب الفرصة نفسها.

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

المشغل ?? يضع القيمة البديلة فقط عندما تكون القيمة null أو undefined، أما || فيضعها مع أي قيمة خاطئة مثل 0 أو النص الفارغ.