null vs undefined ב-JavaScript: ההבדל, בדיקות ומתי להשתמש בכל אחד

שתי דרכים להגיד "כלום"

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

הגרסה הקצרה:

• undefined הוא מה ש-JavaScript נותנת לכם כשמשהו חסר.
• null הוא מה ש_אתם_ כותבים כשרוצים להגיד "ריק בכוונה".

let x;
console.log(x);           // undefined - declared, never assigned

const user = { name: "Rosa" };
console.log(user.age);    // undefined - property doesn't exist

function greet(name) {
  console.log(name);
}
greet();                  // undefined - argument not passed

const chosen = null;
console.log(chosen);      // null - you put it there

שימו לב לדפוס: כל undefined למעלה קרה כי JavaScript לא מצאה ערך. ה-null קרה כי מישהו כתב אותו.

מאיפה מגיע undefined

undefined מופיע בכמה מצבים מוגדרים, וכולם וריאציות על "אין ערך זמין":

// 1. A declared variable with no initializer
let a;
console.log(a);                    // undefined

// 2. A missing object property
const obj = { x: 1 };
console.log(obj.y);                // undefined

// 3. A missing function argument
function f(x, y) { return y; }
console.log(f(1));                 // undefined

// 4. A function with no return statement
function g() {}
console.log(g());                  // undefined

// 5. A missing array element
const arr = [1, 2];
console.log(arr[5]);               // undefined

בכל המקרים, JavaScript חיפשה ערך ולא מצאה שם כלום. undefined הוא הדרך של המנוע להגיד "בדקתי, לא היה ערך".

אפשר להציב undefined בעצמכם (let x = undefined;), אבל לא כדאי. השאירו אותו כסימן ל"JavaScript לא מצאה כלום". השתמשו ב-null כשההחלטה היא שלכם.

מאיפה מגיע null

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

// "No user is logged in yet."
let currentUser = null;

// Later, a user logs in.
currentUser = { name: "Boris" };

// And logs out.
currentUser = null;

ממשקי ה-DOM משתמשים ב-null הרבה: document.getElementById("missing") מחזיר null, לא undefined, כי הדפדפן אומר לכם במפורש "חיפשתי, והתשובה היא שאין אלמנט". גם JSON.parse("null") נותן null, כי ב-JSON אין undefined.

מודל החשיבה: undefined הוא היעדר ברירת המחדל, null הוא היעדר שנבחר.

המוזרות של typeof

הנה המפורסמת:

console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"   ← ???

העובדה ש-typeof null מחזיר "object" היא באג משנת 1995 שאי אפשר היה לתקן בלי לשבור אתרים קיימים, ולכן הוא נשמר לתמיד. null הוא לא אובייקט: הוא טיפוס פרימיטיבי, בדיוק כמו undefined, מספרים, מחרוזות ובוליאנים. התוצאה של typeof פשוט משקרת לגביו.

ההשלכה המעשית: typeof חסר תועלת לזיהוי null. השתמשו בהשוואה ישירה:

const value = null;

if (value === null) {
  console.log("זה null");
}

if (typeof value === "undefined") {
  console.log("זה undefined");
}

או, לעתים קרובות יותר, בדקו את שניהם בבת אחת, כמו בסעיף הבא.

לבדוק את שניהם: האידיום == null

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

function describe(value) {
  if (value == null) {
    return "nothing here";
  }
  return `got ${value}`;
}

console.log(describe(null));         // nothing here
console.log(describe(undefined));    // nothing here
console.log(describe(0));            // got 0
console.log(describe(""));           // got
console.log(describe("hello"));      // got hello

value == null מחזיר true בדיוק עבור null ו-undefined ו-false עבור כל השאר, כולל 0, "" ו-false, וזה בדרך כלל מה שרוצים. זה המצב היחיד שבו מעדיפים == על פני ===. ה-linters יודעים את זה ומאפשרים את זה.

אם רוצים להיות מפורשים, value === null || value === undefined אומר בדיוק את אותו הדבר וקריא מאוד.

אופרטורי nullish: ?? ו-?.

שני אופרטורים נוספו במיוחד כדי להקל על העבודה עם null ו-undefined. שניהם מתייחסים לשני הערכים באותה צורה ולא נוגעים בשום דבר אחר.

Nullish coalescing (??) מספק ערך חלופי רק כשהצד השמאלי הוא null או undefined:

const config = { retries: 0, timeout: null };

const retries = config.retries ?? 3;     // 0 (not nullish - keep it)
const timeout = config.timeout ?? 5000;  // 5000 (was null)
const name = config.name ?? "guest";     // "guest" (was undefined)

console.log(retries, timeout, name);

השוו ל-||, שהיה מחליף את 0 ב-3 כי 0 הוא falsy. ?? מחמיר יותר: הוא מופעל רק עבור שני ערכי ה-nullish.

Optional chaining (?.) עוצר את חישוב השרשרת ומחזיר undefined כשהוא פוגש null או undefined:

const user = { profile: null };

console.log(user.profile?.name);        // undefined (no crash)
console.log(user.settings?.theme);      // undefined (no crash)
console.log(user?.profile?.name);       // undefined

שני האופרטורים קיימים כי השאלה "האם הערך הזה nullish?" נפוצה כל כך. הם מוסברים לעומק בהמשך תוכנית הלימוד.

פרמטרים עם ברירת מחדל מופעלים רק עבור undefined

כלל עדין אבל חשוב: ערכי ברירת מחדל של פרמטרים נכנסים לפעולה רק עבור undefined, לא עבור null.

function greet(name = "friend") {
  console.log(`Hello, ${name}`);
}

greet();             // Hello, friend
greet(undefined);    // Hello, friend
greet(null);         // Hello, null   ← default did not apply

העברת null נחשבת ל"בחרתי במפורש שאין ערך" ומכובדת כמו שהיא. אם רוצים שגם null יפעיל ערך חלופי, השתמשו ב-?? בתוך הפונקציה:

function greet(name) {
  const display = name ?? "friend";
  console.log(`Hello, ${display}`);
}

greet(null);         // Hello, friend

ההבחנה הזו מכשילה אנשים שוב ושוב. ברירות מחדל מטפלות בארגומנטים חסרים, ו-?? מטפל בארגומנטים שהם nullish.

JSON וה-undefined החסר

ב-JSON יש null אבל אין undefined. זה מוביל להפתעות שקטות בזמן סריאליזציה:

const data = {
  name: "Rosa",
  age: undefined,
  nickname: null,
};

console.log(JSON.stringify(data));
// {"name":"Rosa","nickname":null}

השדה age נעלם לגמרי: JSON.stringify משמיט מאפיינים שהערך שלהם הוא undefined. null שורד כי JSON תומך בו. העברה של אובייקט הלוך וחזור דרך JSON היא דרך נפוצה שבה מאפייני undefined נעלמים בשקט.

במערכים, undefined הופך ל-null:

console.log(JSON.stringify([1, undefined, 3]));
// [1,null,3]

אם אתם מתכננים payload של API, העדיפו null על פני undefined לשדות "אין ערך". הוא שורד את הדרך.

מתי להשתמש בכל אחד

מוסכמה סבירה לקוד שלכם:

• תנו ל-undefined לסמן "לא סופק": ארגומנטים חסרים, משתנים שלא הוצבו, מאפיינים שלא קיימים. אל תציבו undefined ידנית.
• השתמשו ב-null כשרוצים לומר במפורש "זה ריק בכוונה": משתמש שהתנתק, אפשרות שלא נבחרה, שדה טופס שנוקה.
• קבלו את שניהם בגבולות ה-API (עם == null או ??), אבל היו עקביים לגבי מה שאתם מייצרים.

חלק ממדריכי הסגנון (כולל של TypeScript) מוותרים על null לגמרי ומשתמשים רק ב-undefined. זו גישה שאפשר להצדיק: ערך אחד פשוט יותר משניים. בחרו כלל לכל פרויקט ויישמו אותו בכל מקום.

הבא בתור: המרת טיפוסים

null ו-undefined מתנהגים בדרכים מוגדרות כש-JavaScript ממירה אותם למספרים, מחרוזות או בוליאנים: Number(null) הוא 0, אבל Number(undefined) הוא NaN, וחוסר סימטריה כזה גורם לבאגים אמיתיים. המרת טיפוסים היא הנושא הבא, וברגע שרואים את הכללים המלאים, הרבה מהמוזרויות של JavaScript מפסיקות להיות מסתוריות.