العمليات الحسابية في JavaScript للمبتدئين: شرح Arithmetic Operators بأمثلة كثيرة من الواقع

تخيّل أنك تبني صفحة متجر: تحتاج جمع الأسعار، حساب الخصم، وإظهار المبلغ النهائي للمستخدم. كل هذا يعتمد على Arithmetic Operators في JavaScript.

إذا كنت تبحث عن شرح العمليات الحسابية في JavaScript أو كيف أستخدم % و ++ و -- أو لماذا 10 + "5" تعطي 105، فهذا الدرس يشرحها خطوة بخطوة مع أمثلة كثيرة.

ما هي Arithmetic Operators في JavaScript؟

هي رموز رياضية تُطبق على القيم العددية لإنتاج نتيجة جديدة، مثل الجمع والطرح والضرب والقسمة وباقي القسمة.

قاعدة مهمة: قبل أي عملية، تأكد أن القيم أرقام فعلاً وليست نصوصاً.

1) مثال عملي: حساب المجموع في متجر

let price = 100;
let tax = 15;
let total = price + tax;

console.log(total); // 115
console.log(price * 2); // 200
console.log(price % 7); // 2

ماذا يفعل هذا الكود؟ يجمع السعر مع الضريبة، ثم ينفذ الضرب وباقي القسمة.

النتيجة المتوقعة: إجمالي 115، ومضاعفة السعر 200، وباقي القسمة 2.

خطأ شائع: نسيان أن % تعطي "باقي القسمة" وليس النسبة المئوية.

2) معامل modulo % في سيناريو واقعي (زوجي/فردي)

let number = 14;

if (number % 2 === 0) {
  console.log('Even');
} else {
  console.log('Odd');
}

ماذا يفعل هذا الكود؟ يختبر هل الرقم زوجي أم فردي باستخدام باقي القسمة على 2.

النتيجة المتوقعة: مع 14 تظهر Even.

خطأ شائع: استخدام / بدل % عند اختبار الزوجي/الفردي.

3) عمليات ++ و -- في JavaScript

تستخدم لزيادة أو إنقاص القيمة بمقدار 1، وغالباً في العدادات والحلقات.

let count = 0;
count++; // 1
count++; // 2
count--; // 1
console.log(count); // 1

ماذا يفعل هذا الكود؟ يزيد وينقص العداد بطريقة مختصرة.

النتيجة المتوقعة: القيمة النهائية 1.

خطأ شائع: الخلط بين count++ و++count في نفس التعبير.

مثال سريع على pre-increment و post-increment

let x = 5;
console.log(x++); // 5 (يطبع ثم يزيد)
console.log(x);   // 6

let y = 5;
console.log(++y); // 6 (يزيد ثم يطبع)

ماذا يفعل هذا الكود؟ يوضح ترتيب التنفيذ بين x++ و++y.

النتيجة المتوقعة: post-increment يعطي القيمة القديمة أولاً، pre-increment يعطي الجديدة مباشرة.

خطأ شائع: توقع نفس النتيجة للحالتين داخل console.log.

4) معلومة مهمة: + في JavaScript ليست فقط للجمع

إذا كان أحد القيم نصاً (String)، فإن + قد تتحول إلى دمج نصي.

console.log(10 + "5");         // "105"
console.log(10 + Number("5")); // 15

ماذا يفعل هذا الكود؟ يقارن بين الدمج النصي والجمع الحسابي بعد التحويل.

النتيجة المتوقعة: بدون تحويل تحصل على نص، ومع Number() تحصل على رقم.

خطأ شائع: تنفيذ حسابات على قيم input مباشرة بدون تحويلها إلى Number.

5) أولوية العمليات (Order of Operations)

JavaScript تتبع أولوية رياضية: الأقواس ثم الأس ثم الضرب/القسمة ثم الجمع/الطرح.

let result1 = 10 + 2 * 5;    // 20
let result2 = (10 + 2) * 5;  // 60

console.log(result1, result2);

ماذا يفعل هذا الكود؟ يوضح كيف تغيّر الأقواس النتيجة.

النتيجة المتوقعة: النتيجة الأولى 20 والثانية 60.

خطأ شائع: الاعتماد على الذاكرة بدل استخدام أقواس توضح النية.

Story قصيرة: خطأ فاتورة بسبب نوع البيانات

مبتدئ جمع سعرين قادمين من input: "100" و"50". ظهرت النتيجة 10050 بدل 150. المشكلة لم تكن في العملية الحسابية، بل في النوع (String). بعد استخدام Number() قبل الجمع، صارت الفاتورة صحيحة.

let x = 10;
let y = 3;
console.log(x + y); // 13
console.log(x % y); // 1
console.log((x + y) * 2); // 26

Checklist سريعة قبل أي عملية حسابية

• هل القيم Number فعلاً أم String؟
• هل تحتاج تحويل عبر Number()؟
• هل استخدمت أقواساً لتوضيح الأولوية؟
• هل استخدمت % عندما تحتاج باقي القسمة؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: عمليات المقارنة في JavaScript ثم الجمل الشرطية if/else في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي Arithmetic Operators في JavaScript؟

هي معاملات حسابية مثل + و- و* و/ و% و** تستخدم لإجراء العمليات الرياضية.

ما وظيفة % في JavaScript؟

تعطي باقي القسمة، وتستخدم كثيراً للتحقق من الزوجي/الفردي أو تكرار منطق معين كل N خطوات.

لماذا 10 + "5" تعطي 105 في JavaScript؟

لأن وجود String يجعل + تعمل كدمج نصي. حوّل النص إلى رقم عبر Number() قبل الجمع.

ما الفرق بين ++x و x++؟

++x تزيد القيمة أولاً ثم تعيدها، بينما x++ تعيد القيمة الحالية ثم تزيدها.

كيف أتجنب أخطاء الحساب للمبتدئين؟

تحقق من نوع البيانات، استخدم الأقواس، واطبع القيم الوسيطة في Console أثناء التطوير.

للمتابعة مباشرة: ابدأ بدرس عمليات المقارنة في JavaScript ثم انتقل إلى الجمل الشرطية if/else في JavaScript.