let, const ו-var ב-JavaScript: Scope, Hoisting ומתי להשתמש בכל אחד

שלוש מילות מפתח, תפקיד אחד

ל-JavaScript יש שלוש דרכים להצהיר על משתנה: var, let ו-const. כולן קושרות שם לערך, אבל הן שונות ב_scope_, בכללי ה_הצבה מחדש_, ובהתנהגות שלהן לפני שההצהרה רצה. קוד מודרני משתמש ב-const רוב הזמן, ב-let כשערך צריך להשתנות, וב-var לעתים רחוקות, אם בכלל.

הגרסה הקצרה:

const pi = 3.14159;      // can't be reassigned
let count = 0;           // can be reassigned
var legacy = "old school"; // works, but avoid

count = count + 1;
console.log(pi, count, legacy);

שאר העמוד מסביר למה שלוש השורות האלה מתנהגות כמו שהן מתנהגות.

const: הבחירה ברירת המחדל

const יוצר קישור שאי אפשר להציב מחדש. אחרי שכתבתם const x = 5, אי אפשר לכתוב מאוחר יותר x = 6: המנוע יזרוק TypeError.

const rate = 0.08;
console.log(rate);

// rate = 0.09;   // TypeError: Assignment to constant variable.

זה כל הכלל. מכיוון שרוב המשתנים בתוכנית כתובה היטב לא צריכים הצבה מחדש, const מתאים לרוב המכריע של המקרים. בחירה ב-const קודם גורמת למקומות שבהם ערך כן משתנה לבלוט.

מקור בלבול נפוץ: const מגן על ה_קישור_, לא על ה_ערך_. אם הערך הוא אובייקט או מערך, עדיין אפשר לשנות את התוכן שלו:

const user = { name: "Ada" };
user.name = "Boris";         // fine - mutating the object
user.role = "admin";         // fine - adding a property
console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the binding

const אומר "השם הזה תמיד מצביע על האובייקט הזה". הוא לא אומר "האובייקט הזה לעולם לא משתנה". אם אתם צריכים שהאובייקט עצמו יוקפא, Object.freeze(user) הוא הכלי, אבל בפועל רוב הקוד פשוט סומך על המוסכמה שלא משנים אובייקטים של const.

let: כשבאמת צריך להציב מחדש

let זהה ל-const בכל דבר חוץ מזה שאפשר להציב אותו מחדש. השתמשו בו למונים, לצוברים, למשתני לולאה ולכל מקום שבו ערך באמת משתנה לאורך זמן.

let attempts = 0;
while (attempts < 3) {
    attempts += 1;
    console.log("attempt", attempts);
}

אם אתם כותבים let ואף פעם לא מציבים מחדש את המשתנה, החליפו אותו ל-const. ה-linter ברוב הפרויקטים ידחוף אתכם לזה.

Block Scope

גם let וגם const הם block-scoped. בלוק הוא כל מה שבין { ל-}: הגוף של if, של for, של פונקציה, או אפילו בלוק { ... } עצמאי. משתנה שהוצהר בתוך בלוק לא קיים מחוצה לו.

if (true) {
    const message = "hello from inside";
    console.log(message);
}

// console.log(message);  // ReferenceError: message is not defined

זה מה שאתם רוצים. זה שומר משתנים בתחום העבודה שהם שייכים אליה, והופך התנגשויות שמות מקריות לבלתי אפשריות.

var לא עושה את זה, וזו הסיבה העיקרית להימנע ממנו.

var: Function Scope והפתעות

var מוגבל ל_פונקציה_ הקרובה, לא לבלוק הקרוב. כלומר, var שהוצהר בתוך if או for דולף החוצה לפונקציה שמסביב:

function demo() {
    if (true) {
        var leaked = "I escaped";
        let contained = "I did not";
    }
    console.log(leaked);       // "I escaped"
    // console.log(contained); // ReferenceError
}

demo();

ה-scope הרופף הזה הוא המקור לרשימה ארוכה של באגים קלאסיים ב-JavaScript, והמפורסם שבהם הוא לולאות שבהן כל האיטרציות חולקות את אותו var i וכל ה-callbacks רואים בסוף את הערך האחרון.

var גם מאפשר להצהיר שוב על אותו שם באותו scope בלי תלונה, וזה מסתיר שגיאות הקלדה:

var count = 1;
var count = 2;   // silently fine with var
console.log(count);

let total = 1;
// let total = 2;   // SyntaxError: Identifier 'total' has already been declared

קוד מודרני משתמש כמעט רק ב-let וב-const. var מופיע בבסיסי קוד ישנים, בתשובות ישנות ב-Stack Overflow ובסקריפטים שצריכים לרוץ בסביבות ישנות מאוד.

Hoisting וה-Temporal Dead Zone

שלוש ההצהרות עוברות hoisting: המנוע יודע עליהן לפני שהוא מריץ את הקוד בבלוק, אבל הן מתנהגות אחרת לפני ששורת ההצהרה רצה.

var עובר hoisting ומאותחל ל-undefined. אפשר לפנות אליו לפני שורת ה-var בלי שגיאה:

console.log(early);   // undefined - no error
var early = "hello";
console.log(early);   // "hello"

let ו-const עוברים hoisting אבל לא מאותחלים. נגיעה בהם לפני ההצהרה זורקת שגיאה. החלון הזה, בין הכניסה ל-scope להרצת ההצהרה, נקרא temporal dead zone (TDZ):

// console.log(planned);   // ReferenceError: Cannot access 'planned' before initialization
let planned = "hello";
console.log(planned);

ה-TDZ הוא פיצ'ר, לא באג. הוא הופך "שימוש לפני הצהרה" מ-undefined שקט לשגיאה רועשת, וזה תופס הרבה שגיאות הקלדה וטעויות סדר.

משתנה לולאה const ב-for...of

מקרה קטן אבל נפוץ: לולאות for...of יוצרות קישור חדש בכל איטרציה, ולכן אפשר להשתמש ב-const למשתנה הלולאה, למרות שהוא "משתנה" בין איטרציות.

const names = ["Ada", "Boris", "Rosa"];

for (const name of names) {
    console.log(name);
}

כל איטרציה מקבלת קישור name משלה: אין משתנה יחיד שמוצב מחדש. לולאה קלאסית for (let i = 0; i < n; i++) עדיין צריכה let, כי i הוא קישור אחד שמקודם.

כלל מעשי

בחרו הצהרות לפי סדר העדיפות הזה:

• const כברירת מחדל. אם הערך לא יוצב מחדש, תגידו את זה.
• let כשהקישור באמת צריך להשתנות.
• var רק כשעובדים בבסיס קוד שדורש אותו.

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

const MAX_RETRIES = 3;
const users = ["Ada", "Boris", "Rosa"];

let successful = 0;
for (const user of users) {
    // pretend we tried to do something
    successful += 1;
}

console.log(`${successful}/${users.length} succeeded, up to ${MAX_RETRIES} retries`);

MAX_RETRIES ו-users אף פעם לא משתנים: const. successful גדל: let. user הוא קישור חדש בכל איטרציה: const. בקריאה מלמעלה למטה אפשר להבין אילו ערכים זזים ואילו לא, בלי להריץ את הקוד.

הבא בתור: טיפוסים פרימיטיביים

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