אופרטורים ב- JavaScript: כל מה שצריך לדעת

אופרטורים (operators) בג'אווה סקריפט הם "סמלים" המשמשים לביצוע פעולות על משתנים וערכים. הם מהווים את עמוד השדרה של כל לוגיקה ואריתמטיקה בסקריפטים שאתם כותבים (או עתידים לכתוב).

בפוסט זה נחקור את הסוגים השונים של אופרטורים ב-JavaScript ונציג דוגמאות להמחשת השימוש באלו. בואו נתחיל…

אופרטורים אריתמטיים

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

אופרטורים אריתמטיים בפירוט

1. חיבור (+)

מחבר שני ערכים. שימו לב שכאשר משתמשים באופרטור + עם מחרוזות, הוא מבצע שרשור (concatenation) במקום חיבור:

let sum = 10 + 5; // 15
let greeting = 'Hello' + ' ' + 'World'; // 'Hello World'
let mixed = '5' + 3; // '53' (שרשור מחרוזות, לא חיבור)

2. חיסור (-)

מחסיר ערך אחד מערך אחר.

let difference = 10 - 5; // 5

3. כפל (*)

מכפיל שני ערכים.

let product = 10 * 5; // 50

4. חילוק (/)

מחלק ערך אחד באחר.

let quotient = 10 / 5; // 2

5. מודולו (%)

מחזיר את השארית של חילוק. שימושי לבדיקה האם מספר הוא זוגי או אי-זוגי:

let remainder = 10 % 3; // 1
let isEven = (4 % 2 === 0); // true

6. חזקה (**)

מעלה את האופרנד השמאלי בחזקת האופרנד הימני. זהו תחליף ל-Math.pow():

let power = 2 ** 3; // 8
let squareRoot = 9 ** 0.5; // 3

אופרטורים של השמה

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

אופרטורי השמה בפירוט

1. השמה (=)

מקצה ערך למשתנה.

let x = 10;

2. השמת חיבור (+=)

מחבר ומקצה ערך למשתנה.

x += 5; // x = x + 5; // 15

3. השמת חיסור (-=)

מחסיר ומקצה ערך למשתנה.

x -= 3; // x = x - 3; // 7

4. השמת כפל (*=)

מכפיל ומקצה ערך למשתנה.

x *= 2; // x = x * 2; // 20

5. השמת חילוק (/=)

מחלק ומקצה ערך למשתנה.

x /= 2; // x = x / 2; // 5

אופרטורים להשוואה

אופרטורים אלו משווים בין שני ערכים ומחזירים תוצאה בוליאנית (אמת או שקר) המאפשרת להעריך תנאים בקוד. הם נמצאים בשימוש נרחב ב-משפטי if…else וב-לולאות.

אופרטורי השוואה בפירוט

1. שווה ל (==) מול שווה בהחלט (===)

אופרטור ההשוואה הרופפת (==) מבצע המרת סוגים (type coercion) לפני ההשוואה, כלומר ממיר את האופרנדים לאותו סוג. אופרטור ההשוואה המחמירה (===) בודק גם ערך וגם סוג ללא המרה:

5 == '5';   // true  (המחרוזת '5' מומרת למספר 5)
5 === '5';  // false (סוגים שונים: number מול string)

0 == false;  // true  (false מומר ל-0)
0 === false; // false (סוגים שונים)

2. שונה מ (!=) ושונה בהחלט (!==)

אלו עובדים כמו אופרטורי ההשוואה אך בודקים אי-שוויון:

5 != '5';   // false (הערכים שווים לאחר המרה)
5 !== '5';  // true  (סוגים שונים)

3. אופרטורים יחסיים (>, <, >=, <=)

משווים שני ערכים מספרית או אלפביתית:

10 > 5;    // true
10 < 5;    // false
10 >= 10;  // true
10 <= 5;   // false
'b' > 'a'; // true (השוואה אלפביתית)

אופרטורים לוגיים

אופרטורים לוגיים משמשים לשילוב ביטויים בוליאניים מרובים, ומאפשרים הערכה של תנאים מורכבים.

אופרטורים לוגיים בפירוט

1. "וגם" לוגי (&&)

מחזיר את הערך ה-falsy הראשון, או את הערך האחרון אם כולם truthy. נפוץ לשילוב תנאים:

let andResult = (true && false); // false
let both = (10 > 5 && 20 > 10); // true

// Short-circuit: אם האופרנד הראשון הוא falsy, השני לא מוערך
let user = null;
let name = user && user.name; // null (לא זורק שגיאה)

2. "או" לוגי (||)

מחזיר את הערך ה-truthy הראשון, או את הערך האחרון אם כולם falsy. שימושי להגדרת ערכי ברירת מחדל:

let orResult = (true || false); // true
let value = '' || 'default'; // 'default' (מחרוזת ריקה היא falsy)

3. "לא" לוגי (!)

הופך את הערך הבוליאני של הביטוי:

let notResult = !true; // false
let isFalsy = !0; // true
let isString = !!'hello'; // true (NOT כפול להמרה לבוליאני)

Nullish Coalescing ו-Optional Chaining

אופרטורים מודרניים אלו (ES2020) מסייעים לטפל בערכי null ו-undefined בצורה בטוחה ותמציתית יותר.

Nullish Coalescing (??)

מחזיר את האופרנד הימני כאשר הצד השמאלי הוא null או undefined. בניגוד ל-||, הוא לא מתייחס ל-0, '', או false כסיבה להשתמש בערך החלופי:

let count = 0;
let result1 = count || 10;  // 10 (0 הוא falsy)
let result2 = count ?? 10;  // 0  (0 הוא לא null/undefined)

let text = '';
let result3 = text || 'default';  // 'default'
let result4 = text ?? 'default';  // ''

Optional Chaining (?.)

מאפשר גישה בטוחה למאפיינים מקוננים בעומק ללא זריקת שגיאה אם הפנייה היא null או undefined:

const user = {
    profile: {
        address: { city: 'Tel Aviv' }
    }
};

// ללא optional chaining - זורק שגיאה אם profile לא מוגדר
// const city = user.profile.address.city;

// עם optional chaining - מחזיר undefined בבטחה
const city = user?.profile?.address?.city; // 'Tel Aviv'
const zip = user?.profile?.address?.zip;   // undefined (ללא שגיאה)

// עובד גם עם מתודות
const length = user?.profile?.getName?.(); // undefined (ללא שגיאה)

ניתן לשלב ?? עם ?. לגישה בטוחה עם ערך ברירת מחדל: const city = user?.profile?.address?.city ?? 'Unknown';

Nullish Coalescing Assignment (??=)

האופרטור ??= מקצה ערך רק אם המשתנה הוא כרגע null או undefined. באופן דומה, ||= מקצה אם המשתנה הוא falsy, ו-&&= מקצה אם הוא truthy:

let a = null;
a ??= 'default'; // a הוא עכשיו 'default'

let b = 0;
b ??= 42; // b עדיין 0 (0 הוא לא null/undefined)
b ||= 42; // b הוא עכשיו 42 (0 הוא falsy)

האופרטור הטרנארי (Ternary)

האופרטור הטרנארי הוא האופרטור היחיד ב-JavaScript שמקבל שלושה אופרנדים. הוא חלופה תמציתית ל-משפט if…else:

// תחביר: condition ? expressionIfTrue : expressionIfFalse

let age = 20;
let canVote = (age >= 18) ? 'Yes' : 'No'; // 'Yes'

// מקביל ל-if...else:
let canVote2;
if (age >= 18) {
    canVote2 = 'Yes';
} else {
    canVote2 = 'No';
}

שמרו על ביטויים טרנאריים פשוטים. אם הלוגיקה הופכת מורכבת, השתמשו בבלוק if...else רגיל לשם קריאות.

אופרטורי סוגים

JavaScript מספקת אופרטורים לבדיקה ועבודה עם סוגי נתונים:

typeof

מחזיר מחרוזת המציינת את סוג האופרנד:

typeof 42;          // 'number'
typeof 'hello';     // 'string'
typeof true;        // 'boolean'
typeof undefined;   // 'undefined'
typeof null;        // 'object' (באג היסטורי, null הוא לא אובייקט)
typeof {};          // 'object'
typeof [];          // 'object' (מערכים הם אובייקטים)
typeof function(){};// 'function'

instanceof

בודק האם אובייקט הוא מופע (instance) של constructor או class מסוים:

let arr = [1, 2, 3];
arr instanceof Array;  // true
arr instanceof Object; // true (מערכים יורשים מ-Object)

let date = new Date();
date instanceof Date;  // true

אופרטורי Spread ו-Rest (…)

התחביר ... משמש לשתי מטרות בהתאם להקשר: פריסה (spread) של אלמנטים או איסוף (rest) של פרמטרים.

אופרטור Spread

מרחיב iterable (כמו מערך) לאלמנטים בודדים:

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Spread עם אובייקטים
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

אופרטור Rest

אוסף ארגומנטים שנותרו ב-פונקציה לתוך מערך:

function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10

// Rest ב-destructuring
let [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]

שאלות נפוצות

שאלות נפוצות בנושא אופרטורים ב-JavaScript:

סיכום

אופרטורים ב-JavaScript הם כלים חיוניים לביצוע פעולות שונות בקוד. החל מאריתמטיקה בסיסית והשוואות ועד לתכונות מודרניות כמו nullish coalescing (??) ו-optional chaining (?.), הבנה של אופרטורים אלו תסייע לכם לכתוב סקריפטים יעילים וקריאים יותר.

למדריכים נוספים על יסודות JavaScript, עיינו במדריכים על משתנים וקבועים, מחרוזות, ו-מערכים.