JavaScript Hoisting

אחת התכונות המשמעותיות של JavaScrtipt ששווה להכיר
קוד בשפת JavaScript

במאמר זה אני אסביר על JavaScript Hoisting – אחת מהתכונות הבסיסיות של JavaScript שכמעט כל מפתח Angular\Node.JS מכיר היטב. מדובר בתכונה מאוד חשובה שהכרות איתה יכולה למנוע מכם למרוט שיערות יקרות מראשכם. עם אלו שחושבים שמדובר בתכונה אלמנטרית – הסליחה.

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

var myvar = 'hello!!!';
  
(function() {
  alert(myvar);
})();

אנו מכריזים על המשתנה myvar כמשתנה גלובלי. אחר כך יש לנו פונקציה אנונימית (כלומר פונקציה ללא שם) שמריצה את עצמה. למה אנחנו עושים את זה? כדי לממש בלוק של קוד. מה שיש מחוץ לקוד הוא הסקופ הגלובלי. מה שיש בתוך הבלוק של הקוד (כלומר הפונקציה האנונימית) זה הסקופ של הפונקציה האנונימית. ב-JavaScript, הודות ל-closure, כל המשתנים שזמינים בסביבה הגלובלית זמינים גם בסקופ שלנו.

אם תעתיקו ותדביקו את הקוד שנמצא לעיל בקונסולה שלכם, תקבלו מיד alert של hello.

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

על מנת לחדד את העניין, מה דעתכם נקבל אם נריץ את הדבר הבא?

var myvar = 'hello!!!';
  
(function() {
  var myvar = 'World!!!'
  alert(myvar);
})();

alert(myvar);

ה-alert הראשון יהיה World!! כמובן. אבל מה יהיה ה-alert השני? התשובה היא כמובן hello!!! רגע, למה?!? הרי שיניתי את myvar! התשובה היא שלא באמת שיניתי אותו – אלא הגדרתי myvar באמצעות var בסקופ הפנימי של הפונקציה האנונימית. "מבחוץ", כלומר בסקופ הגלובלי, myvar עדיין hello. אם אני רוצה לדרוס את myvar הגלובלי, אני צריך לעשות משהו כזה:

var myvar = 'hello!!!';
  
(function() {
  myvar = 'World!!!'
  alert(myvar);
})();

alert(myvar);

אם אני לא משתמש ב-var, אני בעצם דורס את המשתנה בסקופ הגלובלי ואז שני ה-alerts יהיו world.

עד כאן בנוגע ל-scoping וגם בנוגע ל-closure. אבל מה בנוגע ל-hoisting? זה השוס האמיתי, מה לפי דעתכם יודפס כאן?

var myvar = 'hello!!!';
  
(function() {
  alert(myvar);
  var myvar = 'World!!!'
})();

בואו ונראה: אנו מגדירים את myvar בסקופ הגלובלי ומכניסים לו את ה-hello. נכנסים לסקופ של הפונקציה האנונימית. מה הערך של myvar? עדיין hello. יש לנו alert ורק אחרי ה-alert אנו משנים את ה-myvar. אז די ברור שה-alert יהיה hello.

אבל אם נדביק את הקוד ונריץ אותו בקונסולה, אנו נקבל undefined. למה?!? התשובה היא hosting. בתחילת כל בלוק של קוד, ה-JavaScript אוסף את כל המשתנים שמוגדרים ומכריז עליהם בתחילת הבלוק. כלומר שהקוד שלעיל הוא תמיד משהו כזה:

var myvar;
myvar = 'hello!!!';
  
(function() {
  var myvar;
  alert(myvar);
  myvar = 'World!!!'
})();

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

(function() {
  var myvar,somevar,anothervar;

})();

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

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

גלילה לראש העמוד