אופרטור Nullish Coalescing ב-JavaScript

מאמר זה מסביר את אופרטור Nullish Coalescing ב-JavaScript.

YouTube Video

אופרטור Nullish Coalescing ב-JavaScript

ב-JavaScript, אופרטור Nullish Coalescing (??) בודק האם הערך הוא null או undefined ומחזיר ערך ברירת מחדל שונה במקרה כזה. הוא דומה לאופרטור ה-OR הלוגי הנפוץ (||), אך שונה בכך שהוא מתמקד במיוחד ב-null ו-undefined.

אופרטור ה-OR הלוגי מחזיר את הערך שבצד ימין אם הערך שבצד שמאל הוא 'שקרי', בעוד שאופרטור ה-nullish coalescing מחזיר את הערך שבצד ימין רק כאשר הערך שבצד שמאל הוא null או undefined. תכונה זו מאפשרת טיפול נכון בערכים כמו 0 ומחרוזות ריקות ("").

תחביר בסיסי

1let result = value ?? defaultValue;

• value הוא הערך שנבדק.
• defaultValue הוא הערך שיוחזר כאשר value הוא null או undefined.

דוגמאות לשימוש באופרטור Nullish Coalescing

הדוגמה הבאה מיישמת תהליך להחזרת ערך ברירת מחדל במקרה של null או undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

בקוד זה, מכיוון ש-name הוא null, מחזירים את הערך של defaultName, "Anonymous". אם name הוא ערך שאינו null או undefined, מחזירים את הערך הזה.

הבדלים עם אופרטור OR הלוגי

אופרטור ה-nullish coalescing דומה לאופרטור ה-OR הלוגי אבל יש הבדל חשוב. אופרטור ה-OR הלוגי בודק ערכים 'שקריים' (false, 0, NaN, "", null, undefined וכו'), בעוד שאופרטור ה-nullish coalescing בודק רק null ו-undefined.

דוגמה לאופרטור OR לוגי:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

דוגמה לאופרטור Nullish Coalescing:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

בכך, אופרטור ה-nullish coalescing שומר על ערכים תקפים כמו 0 ומחרוזות ריקות ("") ומחזיר ערך ברירת מחדל רק כאשר זה נחוץ. מכיוון שאופרטור ה-OR הלוגי מתייחס לערכים אלה כ-'שקריים' ומחזיר את ערך ברירת המחדל, חשוב לבחור את האופרטור המתאים בהתאם למקרה השימוש.

דוגמה לשימוש בשילוב:

ניתן גם לשלב את אופרטור ה-nullish coalescing עם אופרטורים לוגיים אחרים, אך נדרשת זהירות בעת ביצוע זאת.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• לדוגמה, כאשר משתמשים בו יחד עם אופרטור ה-OR הלוגי (||) או אופרטור ה-AND הלוגי (&&), יש להשתמש ב-סוגריים כדי להבהיר את סדר הפעולות.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• בדוגמה זו, a ?? b מוערך ראשון, ומכיוון ש-a הוא null, מוחזר b. לאחר מכן, b || c מוערך, ומכיוון ש-b הוא ערך שקרי, c מוחזר לבסוף.

מקרים שבהם אופרטור ה-nullish coalescing הוא שימושי

להלן מקרים שבהם אופרטור ה-nullish coalescing הוא שימושי.

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

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• טיפול בתגובות API ניתן לבצע עיבוד חלופי כאשר הערך הוא null או undefined בתשובות מה-API.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

סיכום

אופרטור ה-nullish coalescing (??) הוא שימושי מאוד לאתחול נתונים ולטיפול בתגובות API, שכן הוא מחזיר ערך ברירת מחדל כאשר נתקל ב-null או undefined. בפרט, הוא מהווה בחירה טובה יותר מאופרטור ה-OR הלוגי המסורתי (||) כאשר ברצונך לטפל כראוי בערכים 'שקריים' כמו 0 או מחרוזות ריקות.

אודות מפעיל ההשמה Nullish Coalescing (??=)

סקירה כללית

ב-JavaScript, מפעיל ההשמה Nullish Coalescing ??= הוצג כדי להקצות ביעילות ערך חדש למשתנים המחזיקים null או undefined. מפעיל זה מהווה קיצור נוח להקצאה למשתנה רק אם ערך מסוים הוא null או undefined.

שימוש בסיסי

אופרטור ההשמה של nullish coalescing פועל כדלקמן:.

• אם משתנה הוא null או undefined, הוא מקצה את הערך שבצד הימני.
• אם המשתנה אינו null ואינו undefined, הוא אינו עושה דבר ומשאיר את הערך הנוכחי.

תחביר

התחביר הבסיסי של אופרטור ההשמה של nullish coalescing הוא כדלקמן:.

1x ??= y;

• x מקבל את הערך של y אם x הוא null או undefined.
• אם ל-x כבר יש ערך (שאינו null או undefined), ערכו של x לא ישתנה.

דוגמה

בואו נסתכל על דוגמה בסיסית של אופרטור ההשמה nullish coalescing.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• בקוד הזה, מכיוון ש-userName הוא null, הערך של defaultName מוקצה.

כעת, הנה דוגמה שבה הערך הוא לא null ולא undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• במקרה הזה, מכיוון ש-"Alice" כבר הוגדר עבור userName, לא מתבצעת הקצאה.

השוואה עם מפעילי הקצאה אחרים

ל-JavaScript יש גם מספר מפעילי הקצאה נוספים. במיוחד, ההבדל עם מפעיל ההשמה OR הלוגי (||=) הוא חשוב.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

אופרטור ההשמה של OR הלוגי משייך ערך אפילו כאשר הוא נתקל בערכים 'שקריים' כמו false, 0, או מחרוזת ריקה (""), בעוד שאופרטור ההשמה של nullish coalescing פועל רק כאשר הערך הוא null או undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

מכיוון שאופרטור ההשמה של nullish coalescing פועל רק על null או undefined, הוא שימושי מאוד כאשר ברצונך לשמור על ערכים כמו 0 או false.

מקרי שימוש בעולם האמיתי

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

1. הגדרת ערכי ברירת מחדל

   זה שימושי לקביעת ערכי ברירת מחדל כאשר קלט המשתמש או תשובות ה-API עלולות להיות null או undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. התמודדות עם פרמטרים אופציונליים

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

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

סיכום

אופרטור ההשמה של nullish coalescing (??=) משייך ערך רק כאשר הערך שבצד שמאל הוא null או undefined, מה שהופך את הקוד לתמציתי יותר ועוזר למנוע שיוכות בלתי מכוונות. במיוחד כאשר מתמודדים עם ערכים "שקריים" כמו 0 או false, זה עשוי להיות מתאים יותר מאשר אופרטור ה-OR הלוגי המסורתי (||=).

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video