Var, Let, and Const - מה ההבדל?

הרבה תכונות חדשות ונוצצות יצאו עם ES2015 (ES6). ועכשיו, מאז שנת 2020, ההנחה היא שמפתחי JavaScript רבים הכירו והחלו להשתמש בתכונות אלה.

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

אחד המאפיינים שצורף ES6 הוא התוספת של letו const, אשר ניתן להשתמש בהם עבור הצהרת משתנה. השאלה היא, מה מבדיל אותם משנים טובים varשבהם השתמשנו? אם אתה עדיין לא ברור לגבי זה, מאמר זה הוא בשבילך.

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

Var

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

היקף ור

היקף פירושו בעצם היכן משתנים אלה זמינים לשימוש. varהצהרות מוגבלות באופן גלובלי או פונקציות / מקומיות.

ההיקף הוא גלובלי כאשר varמשתנה מוכרז מחוץ לפונקציה. המשמעות היא שכל משתנה המוצהר varמחוץ לחסימת פונקציות זמין לשימוש בכל החלון.

varהוא מוגדר פונקציה כאשר הוא מוכרז בתוך פונקציה. פירוש הדבר שהוא זמין וניתן לגשת אליו רק בתוך פונקציה זו.

כדי להבין יותר, עיין בדוגמה למטה.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

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

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

נקבל שגיאה כתוצאה מכך helloשאיננו זמינים מחוץ לפונקציה.

ניתן להכריז מחדש ולעדכן משתני var

פירוש הדבר שנוכל לעשות זאת באותו היקף ולא נקבל שגיאה.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

וגם זה

 var greeter = "hey hi"; greeter = "say Hello instead"; 

הרמת ור

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

 console.log (greeter); var greeter = "say hello" 

זה מתפרש כך:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

כך varשמשתנים מונפים לראש ההיקף שלהם ומותחלים בערך של undefined.

בעיה עם var

יש חולשה הנובעת מכך   var. אשתמש בדוגמה הבאה כדי להסביר:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

לכן, מכיוון times > 3שהמחזיר נכון, greeterהוא מוגדר מחדש ל "say Hello instead". אמנם זו לא בעיה אם ברצונך greeterלהיות מוגדר מחדש ביודעין , היא הופכת לבעיה כשאתה לא מבין שמשתנה greeterכבר הוגדר קודם לכן.

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

לתת

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

let is block scoped

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

אז משתנה שהוכרז בבלוק עם let  זמין רק לשימוש בתוך אותו בלוק. תן לי להסביר זאת בדוגמה:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

אנו רואים כי שימוש helloמחוץ לבלוק שלה (הפלטה המתולתלת שבה הוגדר) מחזיר שגיאה. הסיבה לכך היא כי letהמשתנים הם רחבי היקף.

אפשר לעדכן אך לא להכריז מחדש.

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

 let greeting = "say Hi"; greeting = "say Hello instead"; 

זה יחזיר שגיאה:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

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

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

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

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

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

הרמת תן

בדיוק כמו   var, letהצהרות מונפות למעלה. שלא כמו varאשר מאותחל כ- undefined, letמילת המפתח אינה מאותחל. אז אם תנסה להשתמש letבמשתנה לפני ההצהרה, תקבל Reference Error.

קונסט

משתנים המוצהרים עם constהערכים הקבועים. constהצהרות חולקות כמה קווי דמיון עם letהצהרות.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)