شرح مسألة FizzBuzz بواسطة جافاسكريبت

أولاً قبل حل المسألة نتفهم ما هي الفكرة منها، حيث FizzBuzz هي لعبة بسيطة تعتمد على العد، والهدف هو طباعة الأرقام من 1 إلى 100، ولكن مع استبدال بعض الأرقام بكلمات معينة حسب قواعد محددة:

• لو كان الرقم يقبل القسمة على 3، نطبع "Fizz" بدلاً منه.
• في حال الرقم يقبل القسمة على 5، نطبع "Buzz" بدلاً منه.
• في حال الرقم يقبل القسمة على 3 و 5 معاً، نطبع "FizzBuzz" بدلاً منه.

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

أولاً نحتاج إلى طريقة لتكرار العملية على الأرقام من 1 إلى 100. يمكن استخدام حلقة تكرارية (loop) لهذا الغرض.

 داخل الحلقة التكرارية، نتحقق من كل رقم:

• هل يقبل القسمة على 3؟
• هل يقبل القسمة على 5؟
• هل يقبل القسمة على 3 و 5 معاً؟

حسب نتيجة التحقق من الشروط، نطبع:

• "Fizz" في حال كان الرقم يقبل القسمة على 3 فقط.
• "Buzz" لو كان الرقم يقبل القسمة على 5 فقط.
• "FizzBuzz" في حال الرقم يقبل القسمة على 3 و 5 معاً.
• الرقم نفسه إذا لم ينطبق عليه أي شرط من الشروط السابقة.

هنا console.log(output || n استخدام جيد للمعاملات المنطقية، وذلك يسمى Short circuiting أي دائرة قصيرة، بحيث نستخدم المعامل المنطقي || ويعني أو وهو يقوم بالتفقد هل القيمة الأولى هي True أي هناك قيمة؟ في حال ذلك يتم طباعتها وإن كان لا يوجد قيمة مثل سلسلة نصية فارغة " " وتعني Flase، إذن يتم طباعة n

بمعنى let output = ""  في بداية كل دورة، نقوم بإنشاء متغير جديد اسمه output ونعطيه قيمة نصية فارغة ""، وفائدة المتغير هي تجميع النص الذي سيتم طباعته في النهاية لكل رقم.

if (n % 3 == 0) output += "Fizz" نتحقق هل الرقم n يقبل القسمة على 3 بدون باقي، إن كان يقبل القسمة، نقوم بإضافة النص "Fizz" إلى قيمة المتغير output، وهكذا

تحليل وشرح بالأرقام للمسألة في البداية الحلقة التكرارية for loop ستمر على كل الأرقام من 1 إلى 100 ولنجرب على الأرقام  1،3،5,15.

الرقم 1

• بداية الحلقة هل هذا الرقم أقل من 100 نعم سيتم الدخول للحلقة
• المتغير output يكون فارغا 
• سيتم الدخول للشروط 

if (n % 3 == 0) output += "Fizz";
if (n % 5 == 0) output += "Buzz";

في كلا الحالتان الشرط لم يتحقق لأن هذا الرقم 1 باقى القسمة له لا يساوى 0 إذا ستكون النتيجة أنه سيدخل في أمر الطباعة output لأنها فارغة تكون false ويطبع الرقم.

console.log(output || n);
// 1

الرقم 3

• بداية الحلقة هل هذا الرقم أقل من 100 نعم سيتم الدخول للحلقة
• المتغير output يكون فارغا 
• سيتم الدخول للشروط

if (n % 3 == 0) output += "Fizz";
if (n % 5 == 0) output += "Buzz";

 الشرط الأول تحقق وباقي القسمة له على 3 تساوى صفر إذا يتم تنفيذ ما بداخل الشرط وهو إضافة الكلمة Fizz إلى القيمة الفارغة output وحفظها في المتغير output والشرط الثاني لم يتحقق لأن باقي قسمة هذا الرقم 3 على 5 لاتساوى 0 سيتم الدخول إلى أمر الطباعة ويطبع القيمة output وليس الرقم لأنه مادام يوجد قيمة output تكون true وسيتم طباعتها

console.log(output || n);
// Fizz

 الرقم 5

• بداية الحلقة هل هذا الرقم أقل من 100 نعم سيتم الدخول للحلقة
• المتغير output يكون فارغا 
• سيتم الدخول للشروط

if (n % 3 == 0) output += "Fizz";
if (n % 5 == 0) output += "Buzz";

 الشرط الأول لم يتحقق لأن باقي القسم لا يساوي صفر وسيتم الدخول للشرط الثانى وباقي القسمة له على 5 تساوى صفر فى هذه الحالة الشرط تحقق إذا يتم تنفيذ ما بداخل الشرط وهو إضافة الكلمة Buzz إلى القيمة الفارغة output وحفظها فى المتغير output سيتم الدخول إلى أمر الطباعة ويطبع القيمة output

console.log(output || n);
// Buzz

 الرقم 15

• بداية الحلقة هل هذا الرقم أقل من 100 نعم سيتم الدخول للحلقة
• المتغير output يكون فارغا 
• سيتم الدخول للشروط

if (n % 3 == 0) output += "Fizz";
if (n % 5 == 0) output += "Buzz";

 الشرط الأول تحقق وباقي القسمة له على 3 تساوى صفر إذا يتم تنفيذ ما بداخل الشرط وهو إضافة الكلمة Fizz إلى القيمة الفارغة output وحفظها في المتغير output ثم الدخول للشرط الثاني وباقي القسمة له على 5 تساوى صفر فى هذه الحالة الشرط تحقق إذا يتم تنفيذ ما بداخل الشرط وهو إضافة الكلمة Buzz إلى القيمة السابقة output وسيتم الدخول إلى أمر الطباعة ويطبع القيمة output

console.log(output || n);
// FizzBuzz

فائدة الoutput في كل مرة يتم تكرار الحلقة تصبح القيمة فارغة وبناءا علي الشروط يتم تغيير قيمتها. 

كيف تم طباعة  fizz buzz مع بعض؟
في جافاسكربت يتم تجميع السلسلة النصية عن طريق + أي نستطيع إضافة قيمة فارغة إلى نص ثم بعد ذلك نستطيع إضافة قيمة نصية إلى قيمة نصية أخرى وهو ماتم بناءا على الشروط تم إضافة fizz وحفظها فى output  ثم تم الإضافة للقيمة السابقة buzz وحفظها فى output .

المعامل =+ يسمى معامل الإسناد والجمع أي جمع القيمة الجديدة للقيمة السابقة للمتغير وحفظها (اسنادها) للمتغير أيضا.