JS Semicolons & Comments

Case Sensitivity in JavaScript

أول حاجة لازم تعرفها إن الـ JavaScript هي لغة Case Sensitive. يعني إيه؟ يعني اللغة دي “حساسة” جداً لترتيب وحالة الحروف، سواء كانت كبيرة (Upper Case) أو صغيرة (Lower Case).

المصطلح: الـ Case Sensitive يعني الحرف الـ A غير الـ a.
مثال عملي: فاكر لما كتبنا getElementById؟ الـ E والـ B والـ I لازم يكونوا “Capital”. لو جيت كتبت الـ ID حروف صغيرة (Lower case) زي كده id الكود مش هيشتغل.
إيه اللي بيحصل لو غلطت؟ الـ Browser هيطلعلك “Error” في الـ “Console” يقولك: ... is not a function. ده معناه إن الـ JavaScript مش عارفة “الكلمة” اللي إنت كاتبها دي لأنها متخزنة عندها بشكل تاني.
نصيحة: الـ Visual Studio Code (VS Code) بيفهم الكود وبيساعدك بالـ “Autocomplete”. دايمًا استغل الميزة دي عشان تتجنب الأخطاء الـ “Syntax” البسيطة دي.

The Role of Semicolons (;)

الـ Semicolon (الفصلة المنقوطة) وظيفتها الأساسية في لغات البرمجة إنها تفصل بين الـ “Statements” أو السطور البرمجية، زي ما بنعمل في الـ CSS بالظبط.

الـ Automatic Semicolon Insertion (ASI)

الـ JavaScript فيها ميزة ذكية اسمها الـ Automatic Semicolon Insertion. دي عبارة عن “محرك” جوه المتصفح بياخد الكود بتاعك وقبل ما ينفذه، بيعدي عليه ويحط الـ Semicolon في نهاية كل سطر أوتوماتيك لو إنت نسيتها.

بس خلي بالك من “الفخ” ده: الـ ASI بيحط الـ Semicolon في آخر السطر بس. فلو إنت كتبت جملتين برمجيتين (Two statements) في نفس السطر جنب بعض، الـ ASI مش هيعرف يتصرف، والكود هيضرب ويطلع “Error”. في الحالة دي لازم تحط الـ Semicolon بإيدك عشان تفصل بينهم.

ليه لازم نكتب الـ Semicolon بإيدينا؟ (الـ Minification)

إحنا اتفقنا إننا لما بنخلص الكود بنعمله “Minify” (زي الـ bootstrap.min.js) عشان نقلل مساحة الملف. الـ “Minification” بيمسح كل المسافات وبيخلي الكود كله سطر واحد طويل جداً. لو إنت مش حاطط الـ Semicolons بتاعتك، الكود كله هيخش في بعضه وهيضرب تماماً لما يتضغط. عشان كده، كمبرمج محترف، دايمًا حط الـ Semicolon بإيدك عشان تريح دماغك.

graph LR
    A[Writing Code] --> B{Manual Semicolon?}
    B -- Yes --> C[Safe for Minification]
    B -- No --> D[ASI inserts them in Browser]
    D --> E{Minification?}
    E -- Yes --> F[Code Breaks!]
    E -- No --> G[Code Works]

Adding Comments in JavaScript

الـ Comments (التعليقات) دي رسايل إحنا بنكتبها لبعض كمبرمجين جوه الكود. الـ “Browser” بيتجاهلها تماماً ولا كأنها موجودة وقت التنفيذ.

فايدتها: لو إنت شغال في فريق، أو سيبت الكود ورجعتله بعد فترة، الـ Comments بتفهمك السطر ده بيعمل إيه، أو إنت رابط بـ “Database” إيه، وهكذا.

في الـ JavaScript عندنا نوعين من الـ Comments:

الـ Single-line Comment: وده بنعمله بـ // (دبل سلاش).
الـ Multi-line Comment: وده بنعمله بـ /* ... */ زي الـ CSS بالظبط.

شورت-كت الـ VS Code: عشان تعمل “Comment” بسرعة لأي كود، حدد السطور اللي عايزها ودوس Ctrl + / وهو هيعملها أوتوماتيك.

// This is a single-line comment (Only for this line)
 
/* 
   This is a multi-line comment.
   You can write anything here 
   and the browser will ignore it.
*/

Notes

الـ Correction (Technical nuance): فيه حالات نادرة جداً الـ ASI ممكن يغلط فيها ويحط الـ Semicolon في مكان يغير معنى الكود (زي الـ return statement لو نزلت سطر تحتها)، فدايماً الأضمن هو الالتزام اليدوي.
الـ Clarification (VS Code helpers): الـ “Extensions” زي “Prettier” في الـ VS Code بتقوم بالمهمة دي بدالك، بمجرد ما بتعمل “Save” هي بتظبط الـ Semicolons والـ Formatting لوحدها.
الـ Advanced Topics (Strict Mode): فيه حاجة في الـ JavaScript اسمها "use strict";. لو فعلتها في أول الملف، اللغة بتبقى صارمة أكتر في التعامل مع بعض الأخطاء اللي ممكن تعدي في العادي، وده بيخلي الكود بتاعك أنظف وأقل عرضة للـ “Bugs”.
الـ Relation to .NET: في الـ C# والـ .NET، الـ Semicolon إجبارية (Mandatory). لو نسيتها الكود مش هيحصل له “Build” أصلاً. الـ JavaScript بتديك حرية (ASI) بس دي حرية “خادعة” شوية، فالمبرمج اللي جاي من خلفية .NET هيحس إن الـ JS مريحة بس لازم يلتزم بقواعد الـ C# في الـ Semicolons عشان الـ “Best practices”. في التحديثات الجديدة لـ .NET (زي .NET 10)، الـ Compiler بقى أذكى في تحديد الأخطاء وتصحيحها قبل ما الكود يشتغل، وده بيقرب المسافات بين اللغتين في سهولة الـ “Development”.

🍿 CornPop

Explorer