• בלוג
  • מנגנון Fallthrough של Switch ב JavaScript

מנגנון Fallthrough של Switch ב JavaScript

31/03/2019

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

אז ניקח לדוגמא את המילה switch ב React Router לעומת JavaScript. ל JavaScript יש פקודת switch מה שאומר שהתוכנית הבאה מדפיסה x == 10:

var x = 10;

switch(x) {
  case 2:
    console.log('x == 2');

  case 5:
    console.log('x == 5');

  case 10:
    console.log('x == 10');
}

אבל כשמשנים את הסדר גם התוצאה משתנה והתוכנית הזאת מדפיסה את כל שלושת השורות:

var x = 10;

switch(x) {
  case 10:
    console.log('x == 10');

  case 2:
    console.log('x == 2');

  case 5:
    console.log('x == 5');
}

כלומר התוצאה:

x == 10
x == 2
x == 5

הסיבה היא מנגנון שנקרא Fallthrough שאומר שמרגע שתנאי אחד ב switch מתאים כל הפקודות הבאות הולכות להתבצע. אפשר לבטל את המנגנון עם שימוש יזום בפקודה break והתוכנית הבאה תדפיס שוב x == 10 בלבד:

var x = 10;

switch(x) {
  case 10:
    console.log('x == 10');
    break;

  case 2:
    console.log('x == 2');
    break;

  case 5:
    console.log('x == 5');
    break;
}

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

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

כשאנחנו בנתיב /about לא יתבצע Fallthrough ובזכות ה Switch רק נתיב About יופיע על המסך ולא שני הנתיבים שמופיעים אחריו.

הרכיב Switch של React Router כמובן מועיל וחשוב, אבל בהתחשב בהתנהגות הרגילה של פקודת switch של JavaScript אני מוצא את השם מבלבל. ובאופן כללי כשאנחנו לוקחים שם שיש לו כבר משמעות בעולם התוכן של האנשים שאנחנו מדברים אליהם (במקרה הזה שפת JavaScript) כדאי לוודא שאנחנו שומרים בדיוק על אותה המשמעות.