يستطيع Pocket أن يجمع ما أنفقته. والآن عليه أن يخبرك كيف حالك: بخير، أو تقترب من ميزانيتك، أو تجاوزتها. وهذا يعني تنفيذ كود مختلف بحسب البيانات، وهذا ما وُجدت الشروط من أجله.
\nتعليمة if تنفّذ كتلة من الكود فقط حين يكون شرطها صحيحًا:
const budgetCents = 2000;\nconst spentCents = 1750;\n\nif (spentCents > budgetCents) {\n console.log(\"Over budget\");\n} else if (spentCents >= budgetCents * 0.8) {\n console.log(\"Close to your budget\");\n} else {\n console.log(\"On track\");\n}يحسب المحرّك الشرط الأول، 1750 > 2000، فيحصل على false، وينتقل إلى ما بعده. الشرط الثاني، 1750 >= 1600، صحيح (true)، فتُنفَّذ كتلته، ويُتخطّى باقي السلسلة. أما كتلة else فلا تُنفَّذ إلا حين تكون كل الشروط التي فوقها خاطئة. ولا تُنفَّذ أبدًا أكثر من كتلة واحدة في السلسلة.
لأن أول شرط صحيح هو الذي يفوز، فإن الترتيب مهم. ضع الحالة الأضيق أولًا. لو فحصت “80% على الأقل” قبل “تجاوز الميزانية”، فإن الشهر الذي تجاوز الميزانية سيكون أيضًا 80% على الأقل، ولن ترى رسالة “Over budget” أبدًا. وفي الاختبار أدناه سؤال فيه هذا الخطأ بالضبط.
\nالأقواس المعقوفة تحدّد كتلة (block)، أي مجموعة من التعليمات تُنفَّذ معًا. إن كان جسم الشرط سطرًا واحدًا فالأقواس اختيارية من الناحية التقنية، لكن اكتبها دائمًا: إضافة سطر ثانٍ لاحقًا دون أقواس خطأ كلاسيكي يجعل السطر الأول وحده هو المشروط.
\nثلاثة عوامل منطقية تتيح لك بناء شروط أكبر:
\na && b (و) صحيحة فقط حين يكون الطرفان صحيحين.a || b (أو) صحيحة حين يكون أحد الطرفين على الأقل صحيحًا.!a (ليس) تقلب الصحيح إلى خاطئ والعكس.const amountCents = 12500;\nconst category = \"travel\";\nconst isWeekend = false;\n\nif (amountCents > 10000 && category !== \"rent\") {\n console.log(\"Big purchase: ask yourself twice\");\n}\nif (category === \"food\" || category === \"travel\") {\n console.log(\"Flexible spending\");\n}\nif (!isWeekend) {\n console.log(\"Weekday\");\n}تُحسب && قبل ||، تمامًا كما يُحسب * قبل +. وحين تخلط بينهما، أضف أقواسًا كي لا يضطر أحد، بما في ذلك أنت في المستقبل، إلى تذكّر هذه القاعدة.
حين تقارن قيمة واحدة بقائمة من الخيارات المحدّدة، مثل الفئة، تصبح سلسلة else if (category === …) مكرّرة ومملّة. وتعليمة switch مصمّمة لهذه الحالة بالذات:
const category = \"travel\";\nlet monthlyLimit;\n\nswitch (category) {\n case \"food\":\n monthlyLimit = 40000;\n break;\n case \"travel\":\n case \"fun\":\n monthlyLimit = 15000;\n break;\n default:\n monthlyLimit = 10000;\n}\nconsole.log(monthlyLimit);تقارن switch باستخدام ===، وتقفز إلى أول case مطابقة، وتنفّذ من هناك حتى تصل إلى break. انسَ break فيستمر التنفيذ “منزلقًا” (fall through) إلى الحالة التالية، وهذا خطأ متكرّر. وأحيانًا يكون مقصودًا، كما في اشتراك "travel" و"fun" في سقف واحد أعلاه. أما default فتُنفَّذ حين لا يطابق شيء، مثل else الأخيرة. ومع شرطين أو ثلاثة، أو مع أي شيء ليس فحص مساواة بسيطًا، ابقَ مع if.
كثيرًا ما لا تريد أن تفعل أشياء مختلفة، بل أن تختار بين قيمتين. والعامل الشرطي، الذي يُسمّى عادةً العامل الثلاثي (ternary)، يفعل ذلك في تعبير واحد:
\nconst spent = 2100;\nconst budget = 2000;\nconst status = spent > budget ? \"Over budget\" : \"On track\";\nconsole.log(status);اقرأه هكذا: “إن كان spent > budget فالقيمة "Over budget"، وإلا فالقيمة "On track"”. ولأن العامل الثلاثي يُنتج قيمة، يمكنك تخزينها في const أو إسقاطها داخل template literal. استخدمه حين تكون هناك نتيجتان. ومع ثلاث نتائج أو أكثر، تُقرأ سلسلة if أفضل من العوامل الثلاثية المتداخلة.
لا يُشترط أن يكون الشرط قيمة منطقية. تقبل JavaScript أي قيمة وتحوّلها: القيم التي تُعامَل على أنها صحيحة تُسمّى truthy، والتي تُعامَل على أنها خاطئة تُسمّى falsy. وقائمة الـ falsy قصيرة بما يكفي لتحفظها:
\nfalse، 0، -0، 0n، "" (نص فارغ)، null، undefined، NaN.
وكل ما عداها truthy، بما في ذلك قيم تفاجئ الناس: "0" و"false" و" " (مسافة)، والقوائم والكائنات الفارغة.
const note = \"\";\nif (note) {\n console.log(\"Has a note\");\n} else {\n console.log(\"No note\");\n}\nconsole.log(Boolean(\"0\"), Boolean(0), Boolean(\" \"));هذه الخاصية تجعل فحوصًا مثل if (note) قصيرة ومقروءة مع النصوص، حيث “فارغ” و"غير موجود" يعنيان كلاهما “لا شيء لعرضه”. لكنها خطرة مع الأرقام، حيث يكون الصفر غالبًا قيمة حقيقية وصالحة.
تعمل && و|| أيضًا مع القيم غير المنطقية: فهما تُرجعان أحد طرفيهما. التعبير name || "Anonymous" يعطي name إن كانت truthy، و"Anonymous" فيما عدا ذلك، وهذه طريقة شائعة لتوفير قيم افتراضية. لكن فيها مشكلة الصفر نفسها، ولهذا أضافت JavaScript عاملًا أفضل للقيم الافتراضية، هو ??، وستتعرّف عليه في القسم 3.
الشروط تتيح لـ Pocket أن يتفاعل مع قيمة واحدة. وفي الدرس التالي ستجعله يتعامل مع قيم كثيرة، واحدة تلو الأخرى، باستخدام حلقات التكرار.
\n","toc":[{"id":"sec-1","text":"if وelse if وelse","level":2},{"id":"sec-2","text":"الجمع بين الشروط","level":2},{"id":"sec-3","text":"قيمة واحدة وخيارات ثابتة كثيرة: switch","level":2},{"id":"sec-4","text":"العامل الثلاثي: اختيار قيمة","level":2},{"id":"sec-5","text":"القيم الـ truthy والـ falsy","level":2}],"takeaways":["سلسلةif تفحص الشروط من الأعلى إلى الأسفل ولا تنفّذ إلا أول كتلة شرطها صحيح، لذلك ضع الحالة الأضيق أولًا.","&& تحتاج أن يكون الطرفان صحيحين، و|| تحتاج طرفًا صحيحًا واحدًا على الأقل، و! تقلب القيمة المنطقية.","استخدم العامل الثلاثي condition ? a : b للاختيار بين قيمتين، وif للاختيار بين فعلين.","ثماني قيم فقط هي falsy (false و0 و-0 و0n و"" وnull وundefined وNaN)؛ وكل ما عداها truthy، بما في ذلك "0" و[]."],"further":[{"title":"if...else (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else"},{"title":"Truthy (MDN glossary)","url":"https://developer.mozilla.org/en-US/docs/Glossary/Truthy"},{"title":"Conditional (ternary) operator (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator"}],"quiz":[{"q":"إذا كانت spent = 2100 وbudget = 2000، فماذا يطبع هذا الكود؟
if (spent > budget * 0.8) {\n console.log(\"close\");\n} else if (spent > budget) {\n console.log(\"over\");\n} else {\n console.log(\"ok\");\n}over","why":"تتوقّف السلسلة عند أول شرط صحيح. 2100 أكبر من 1600، فتُنفَّذ الكتلة الأولى ولا يُفحص الـ else if أبدًا."},{"text":"close","why":"صحيح، وهذا خطأ برمجي (bug). الشرط الأوسع جاء أولًا فابتلع حالة تجاوز الميزانية. افحص spent > budget أولًا."},{"text":"close ثم over","why":"سلسلة if/else if تنفّذ كتلة واحدة على الأكثر. وحدها تعليمات if المنفصلة يمكن أن تُنفَّذ كلها."},{"text":"ok","why":"else لا تُنفَّذ إلا حين تكون كل الشروط التي فوقها خاطئة، والشرط الأول هنا صحيح."}],"answer":1},{"q":"أيّ هذه القيم truthy؟
","options":[{"text":""" (نص فارغ)","why":"النص الفارغ إحدى القيم الثماني الـ falsy."},{"text":"0","why":"الصفر falsy، ولهذا بالضبط يسيء if (amount) التصرّف مع مبلغ حقيقي قيمته 0."},{"text":""0" (نص يحتوي على صفر)","why":"صحيح. أي نص غير فارغ truthy، حتى "0" و"false"."},{"text":"NaN","why":"NaN قيمة falsy، مثل false و0 و-0 و0n و"" وnull وundefined."}],"answer":2},{"q":"يستطيع المستخدم أن يحدّد سقفًا يوميًا للإنفاق، و0 اختيار صالح يعني “لا إنفاق اليوم”. ماذا يفعل const limit = userLimit || 5000; حين تكون userLimit تساوي 0؟
|| لا تفحص الأنواع؛ إنها تفحص إن كانت القيمة truthy، و0 قيمة falsy."},{"text":"يرمي خطأ، لأن || لا تعمل إلا مع القيم المنطقية.","why":"|| تعمل مع أي قيم وتُرجع إحداها، وليس بالضرورة قيمة منطقية."},{"text":"يجعل limit يساوي 5000، متجاهلًا اختيار المستخدم بصمت.","why":"صحيح. || تلجأ إلى البديل كلما كان الطرف الأيسر falsy، و0 قيمة falsy. أما العامل ??، الذي ستتعلّمه في القسم 3، فلا يلجأ إلى البديل إلا مع null وundefined."}],"answer":2},{"q":"أيّ سطر يستخدم العامل الثلاثي بأفضل شكل؟
","options":[{"text":"const label = isOver ? "Over budget" : "On track";","why":"صحيح. العامل الثلاثي يختار إحدى قيمتين ويُخزَّن الناتج. وهذا بالضبط ما وُجد من أجله."},{"text":"isOver ? sendAlert() : logQuietly();","why":"هذا يعمل، لكنه يستخدم عاملًا مخصّصًا لاختيار القيم كي يختار بين أفعال. وif/else تعبّر عن هذه النية بوضوح أكبر."},{"text":"const label = a ? b ? "x" : "y" : c ? "z" : "w";","why":"العوامل الثلاثية المتداخلة مسموحة لكنها صعبة القراءة. استخدم سلسلة if/else if متى زادت النتائج على اثنتين."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// The function wrapper is written for you (functions get their own lesson soon).\n// spentCents and budgetCents arrive as numbers. Use if / else if / else\n// and `return` the status string.\nfunction budgetStatus(spentCents, budgetCents) {\n return \"ok\";\n}\n\n// Use a ternary to pick the label for one value\nfunction amountLabel(amountCents) {\n return \"\";\n}\n\nconsole.log(budgetStatus(1750, 2000));\nconsole.log(amountLabel(12500));\n"},"solution":{"js":"function budgetStatus(spentCents, budgetCents) {\n if (spentCents > budgetCents) {\n return \"over\";\n } else if (spentCents >= budgetCents * 0.8) {\n return \"close\";\n } else {\n return \"ok\";\n }\n}\n\nfunction amountLabel(amountCents) {\n return amountCents >= 10000 ? \"big\" : \"small\";\n}\n\nconsole.log(budgetStatus(1750, 2000));\nconsole.log(amountLabel(12500));\n"},"checks":[{"id":"over","test":"return budgetStatus(2001, 2000) === 'over' && budgetStatus(5000, 2000) === 'over';\n"},{"id":"close","test":"return budgetStatus(1600, 2000) === 'close' && budgetStatus(2000, 2000) === 'close' && budgetStatus(1750, 2000) === 'close';\n"},{"id":"ok","test":"return budgetStatus(1599, 2000) === 'ok' && budgetStatus(0, 2000) === 'ok';\n"},{"id":"label","test":"return amountLabel(12500) === 'big' && amountLabel(10000) === 'big' && amountLabel(9999) === 'small' && amountLabel(0) === 'small';\n"}],"title":"هل Pocket ضمن الميزانية؟","prompt":"أكمل الدالة budgetStatus(spentCents, budgetCents) بحيث تُرجع "over" حين يكون الإنفاق أكبر من الميزانية، و"close" حين يبلغ 80% من الميزانية على الأقل (دون أن يتجاوزها)، و"ok" فيما عدا ذلك. إنفاق الميزانية بالضبط يُعدّ "close"، لا تجاوزًا.
ثم أكمل amountLabel(amountCents) باستخدام العامل الثلاثي: أرجع "big" لمبلغ 10000 سنت (100 دولار) أو أكثر، و"small" فيما عدا ذلك. كتابة return متبوعة بقيمة تُعيد تلك القيمة إلى من استدعى الدالة.
spentCents > budgetCents قبل فحص الـ 80%.","80% من الميزانية هي budgetCents * 0.8. استخدم >= كي تُعدّ نسبة 80% بالضبط “close”.","العامل الثلاثي يُكتب هكذا: condition ? valueIfTrue : valueIfFalse، أي: return amountCents >= 10000 ? "big" : "small";."],"explanation":"تفحص السلسلة spentCents > budgetCents أولًا لأنه الشرط الأضيق: كل مبلغ يتجاوز الميزانية يبلغ أيضًا 80% منها على الأقل، فلو فُحصت قاعدة الـ 80% أولًا لوُصف الإنفاق الزائد بأنه “close” فحسب. واستخدام > لـ “over” و>= لـ “close” يجعل الحدود دقيقة: 2000 من 2000 تعني close، و2001 تعني over، و1600 (أي 80% بالضبط) تعني close. أما العامل الثلاثي في amountLabel فيختار إحدى قيمتين ويُرجعها مباشرة، وهذه هي المهمة التي صُمّم من أجلها.
amountLabel تُرجع “big” من 10000 سنت فصاعدًا و"small" لما دون ذلك"}},"words":667,"readMinutes":4}