אורח חדש ושימושי בתקן ES2021 – אני אפילו לא יודע איך לתרגם את זה – אופרטורים של השמה? בכל מקרה, זה קצת לא אינטואטיבי בהתחלה וחלק מכם יגידו "למה צריך את זה בכלל" – אבל בת'כלס זה שימושי וניסיתי להסביר למה. ומהרגע שזה נכנס ל-ES2021 נראה את זה יותר ויותר.
אז בואו ונתחיל. אנחנו מכירים את האופרטורים האלו, נכון?
&& – גם. למשל a && b זה גם a וגם b.
|| – או. למשל a || b זה או a או b.
?? – הכוכב החדש בשכונה (כן, שני סימני שאלה) עם השם Nullish Coalescing operator – שזה כמו || אבל גם לערכי false או null. הוא נכנס ב-ES2020.
אז מה זו אופרטורים להשמה? אם התנאי מתקיים ההשמה מתקיימת. עם דוגמה הכל הרבה יותר פשוט. בואו ונסתכל על הקוד הזה:
let y = 5;
let x = 10;
if(x) {
x = y
}
console.log(x); // 5הוא די פשוט. אבל אני יכול לכתוב אותו באופן שונה. עם אופרטור לוגי:
let y = 5;
let x = 10;
x && (x = y);
console.log(x); // 5מה זה אומר? קוד קצת לא אינטואטיבי. אני בעצם אומר יש x? אז יש גם x = y ומבצע את ההשמה. עכשיו בתקן החדש אני יכול לכתוב ככה:
let y = 5;
let x = 10;
x &&= y;
console.log(x); // 5וזה האופרטור. אם יש x, אז תכניס לתוכו את הערך של y. הכי פשוט שיש. אם אין x? ההשמה לא תתבצע ו-x יישאר undefined.
האופרטור =&& שימושי מאוד אם אנו רוצים לדרוס משהו קיים.
אנו יכולים להשתמש באופרטור ||, וזה קצת יותר שימושי
let y = 5;
let x = false; // or undefined, or null
x ||= y;
console.log(x); // 5במקרה הזה, אם x הוא undefined או false או null או אפס – תתבצע השמה.
כלומר האופרטור =|| שימושי אם אנו רוצים לבצע השמה רק אם משתנה מסוים הוא false – שימושי מאוד להגדרות.
אבל הכי שימושי הוא ידידנו ?? – כיוון שהוא מופעל אך ורק במקרה של undefined או null:
let y = 5;
let x; // undefined and null ONLY
x ??= y;
console.log(x); // 5כלומר האופרטור =?? שימושי אם אנו רוצים לבצע השמה רק אם משתנה מסוים הוא undefined – שימושי ביותר להגדרות ברירת מחדל.
וכנראה שזה באמת האופרטור הכי שימושי שיכול להיות ואותו נראה יותר ויותר בקוד. אני יודע שאני הולך להשתמש בו לא מעט כיוון שהוא ממש ממש נוח.
11 תגובות
בהצגת האופרטור האחרון כתבת "אבל הכי שימושי הוא ידידנו &&", אני מאמין שהתכוונת ל-??.
אבל הכי שימושי הוא ידידנו && – כיוון שהוא מופעל אך ורק במקרה של undefined:
אמור להיות
אבל הכי שימושי הוא ידידנו ?? – כיוון שהוא מופעל אך ורק במקרה של undefined:
לא?
תודה על המאמר. ישנה טעות קטנה במשפט ײאבל הכי שימושי הוא ידידנו && – כיוון שהוא מופעל אך ורק במקרה של undefined:". התכוונת ל-?? אני מניח.
"אבל הכי שימושי הוא ידידנו && "
צריך לתקן ל- "??".
ותודה על המאמר, כרגיל תמציתי וקולע!
יש typo קטן בסוף
"אבל הכי שימושי הוא ידידינו &&" , נראה שהכוונה היא ל ??
כתבו פה רק 5 פעמים לגבי הטעות של ה&&, אז מי אני שלא אקח חלק במאמץ ואעיר על זה גם כן.. 😉
מותר להעיר על זה למרות שזה כבר תוקן? רוצה להרגיש חלק מהחבר'ה
כיף לראות שחזרת לכתוב על תכנות!
רק רוצה להדגיש שכולם הם short-circuit, כלומר הערך בצד השני לא יוערך אם לא צריך (זה כמו האופרטורים הרגילים):
"`js
function get5() {
console.log('gev5()');
return 5;
}
let x = null;
x ??= get5(); // Nothing is printed
"`
אבל לא פחות חשוב, גם ההשמה עצמה לא תתבצע אם לא צריך. זה חשוב עם setters:
"`js
const obj = {
get x() { return 5; },
set x() { console.log('set x()'); },
};
obj.x ??= 5; // Nothing is printed
"`
כלומר, `x ??= 5` לא מיתרגם ל`x = x ?? 5` אלא ל`x ?? (x = 5)` (או משפט if ארוך יותר).
שימושי מאוד.
תודה רבה
הייתי מוסיף ששימוש הגיוני ל ?? זה עבור דיפולט למשתנה קונפיג כאשר המשתנה בוליאני:
const { isProd } = userConfig
const defaultIsProd = true
isProd ??= defaultIsProd
במקרה כזה עדיף להשתמש בdestructuring default value:
const defaultIsProd = true;
const { isProd = defaultIsProd } = userConfig;