תחביר ונקודה-פסיק ב-JavaScript: חוקי ASI בהסבר פשוט

קוד JavaScript הוא רצף של הוראות

תוכנית JavaScript היא רשימה של הוראות (statements): פקודות שהמנוע מריץ מלמעלה למטה. הצהרה על משתנה היא הוראה. קריאה לפונקציה היא הוראה. בלוק if או for הוא הוראה. ההוראות מופרדות זו מזו בנקודה-פסיק.

let name = "Ada";
let age = 30;
console.log(name, age);

שלוש הוראות, שלוש נקודות-פסיק. המנוע מריץ את הראשונה, אחר כך את השנייה ואז את השלישית. פשוט למדי.

לרווחים ולהזחות אין שום משמעות עבור ה-parser. אפשר לשים את שלושתן בשורה אחת עם נקודה-פסיק ביניהן, והקוד ירוץ בדיוק אותו דבר. אנחנו מזיחים בשביל קוראים אנושיים, לא בשביל המנוע.

בלוקים מקבצים הוראות יחד

סוגריים מסולסלים { } יוצרים בלוק: קבוצת הוראות שהמנוע מתייחס אליה כיחידה אחת. תראו בלוקים בכל מקום: גופים של פונקציות, ענפים של if, גופים של לולאות.

let score = 85;

if (score >= 60) {
    console.log("עבר");
    console.log("הציון היה", score);
}

שתי הקריאות ל-console.log בתוך הסוגריים הן הגוף של ה-if. שימו לב שאין נקודה-פסיק אחרי ה-} הסוגר: בלוקים הם לא הוראות שצריך לסיים. הוראת ה-if כולה מסתיימת כשהבלוק מסתיים.

זה תופס אנשים שמגיעים משפות שבהן כל } רוצה ; אחריו. ב-JavaScript, בלוק עצמאי או בלוק של בקרת זרימה לא צריך אותו.

ביטויים מול הוראות

הבחנה אחת ששווה להבין מוקדם: ביטויים (expressions) מפיקים ערך, הוראות עושות משהו.

• 2 + 3 הוא ביטוי. הערך שלו הוא 5.
• let x = 2 + 3; היא הוראה. היא מצהירה על משתנה ומציבה בו את התוצאה של ביטוי.
• console.log("hi") הוא ביטוי (קריאה לפונקציה מחזירה undefined), אבל כשהוא כתוב בשורה משלו עם נקודה-פסיק הוא הופך ל_הוראת ביטוי_ (expression statement).

let total = (10 + 5) * 2;   // expression on the right, statement overall
console.log(total);          // expression statement

ברוב הזמן לא צריך לחשוב על זה. זה חשוב כשנתקלים ב-arrow functions, באופרטור טרנרי ובמקומות שבהם JavaScript רוצה ביטוי אבל ניסיתם לתת לה הוראה (או להפך).

שאלת הנקודה-פסיק

הנה התשובה הכנה: ל-JavaScript יש יכולת שנקראת Automatic Semicolon Insertion (ASI), שמכניסה בשבילכם נקודות-פסיק חסרות ברוב ירידות השורה. כלומר, קוד כזה רץ בלי בעיה:

let a = 1
let b = 2
console.log(a + b)

בלי נקודה-פסיק, בלי שגיאה. ASI מסתכל על כל ירידת שורה ושואל: "האם הטוקן הבא יכול להמשיך את ההוראה הנוכחית?" אם לא, הוא מכניס נקודה-פסיק.

בגלל ASI, יש בשטח שני סגנונות לגיטימיים:

• תמיד נקודה-פסיק. רוב בסיסי הקוד, רוב המדריכים, רוב מדריכי הסגנון.
• בלי נקודה-פסיק. בשימוש בחלק מהפרויקטים המודרניים (סגנון Standard, חלק מבסיסי הקוד של React). מסתמך על ASI ועל כמה טריקים הגנתיים.

שניהם עובדים. אף אחד מהם לא "שגוי". מה ש_כן_ שגוי הוא חוסר עקביות: ערבוב סגנונות בתוך קובץ אחד מקשה לזהות באגים.

איפה ASI נוקם בכם

ASI עושה את הדבר הנכון בכ-99% מהמקרים. ה-1% הנותר הוא שורות ש_מתחילות_ בטוקן שיכול להמשיך את השורה הקודמת. עושי הצרות הם [, (, `, +, - ו-/.

הסתכלו על זה:

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

הייתם מצפים ש-x ו-y יתחלפו. במקום זה, ASI לא מכניס נקודה-פסיק לפני [x, y], כי 10[x, y] תקין מבחינה תחבירית (גישה לפי אינדקס למספר 10). ה-parser קורא את שורה 2 ואת שורה 3 כביטוי אחד גדול, ומקבלים שגיאת זמן ריצה או פלט חסר משמעות.

הפתרון הוא נקודה-פסיק בסוף שורה 2:

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

או, אם אתם כותבים בסגנון בלי נקודה-פסיק, נקודה-פסיק בתחילת השורה המסוכנת:

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

ה-; הזה בתחילת השורה הוא הטריק ההגנתי שבסיסי קוד בלי נקודה-פסיק משתמשים בו. הוא נראה מוזר עד שמבינים למה הוא שם.

המלכודת של return

מקרה ASI אחד שווה לזכור בעל פה, כי הוא יוצר באגים שקטים. אם שמים ירידת שורה מיד אחרי return, ASI מכניס שם נקודה-פסיק, והפונקציה מחזירה undefined:

function getUser() {
    return
    {
        name: "Ada",
        age: 30
    };
}

console.log(getUser());   // undefined

הכותב התכוון להחזיר אובייקט. ASI ראה return בסוף שורה וסיים את ההוראה במקום. ה-object literal הפך לקוד שאי אפשר להגיע אליו.

הפתרון הוא להתחיל את הערך באותה שורה של return:

function getUser() {
    return {
        name: "Ada",
        age: 30
    };
}

console.log(getUser());

אותו כלל חל על throw, break, continue ו-yield: אל תשימו ירידת שורה בין מילת המפתח לערך שלה.

כלל פשוט שעובד

אם אתם רק מתחילים, הדרך הקלה ביותר היא:

1. כתבו נקודה-פסיק במפורש בסוף כל הוראה.
2. אל תשימו אותה אחרי } שסוגר בלוק של if, for, while, הצהרות על פונקציות או גופים של מחלקות.
3. כן שימו אותה אחרי } של object literal או של ביטוי פונקציה שמוצב במשתנה: const f = function() {};.
4. השתמשו בכלי עיצוב (Prettier, ESLint עם כלל סגנון) והפסיקו לחשוב על זה. הכלי אוכף את מה שהצוות שלכם החליט.

// statement - semicolon
const greeting = "hello";

// function declaration - no semicolon after }
function greet(name) {
    return `${greeting}, ${name}`;
}

// function expression assigned to a variable - semicolon after }
const shout = function(name) {
    return greet(name).toUpperCase();
};

console.log(greet("Ada"));
console.log(shout("Boris"));

הכלל הזה הוא לא חוק אוניברסלי, הוא המוסכמה שתראו ברוב קוד ה-JavaScript שתקראו. היצמדו אליו עד שתהיה לכם סיבה לא לעשות זאת.

רגישות לאותיות גדולות ומזהים

שני כללים קטנים שגם הם שייכים לכאן:

• JavaScript רגישה לאותיות גדולות וקטנות. userName, username ו-UserName הם שלושה מזהים שונים.
• מזהים יכולים להכיל אותיות, ספרות, _ ו-$, אבל לא יכולים להתחיל בספרה. הם גם לא יכולים להיות מילים שמורות כמו class, return או function.

let userName = "ada";
let $price = 99;
let _internal = true;

console.log(userName, $price, _internal);

ה-$ חוקי, אבל לפי המוסכמה הוא בדרך כלל שמור לדברים שספציפיים לספרייה מסוימת (jQuery השתמשה בו בעבר, וחלק ממערכות התבניות עדיין משתמשות). לעיתים רחוקות תבחרו בו בעצמכם.

הבא בתור: Strict Mode

JavaScript מודרני רץ בשקט בגרסה מחמירה יותר של השפה שנקראת strict mode, שהופכת כמה התנהגויות מרושלות לשגיאות אמיתיות. מודולי ES וגופים של מחלקות הם strict כברירת מחדל, אבל שווה לדעת מה זה משנה בפועל, וזה העמוד הבא.