Detailed explanation of undefined and null in JS

undefinedis a raw value that represents an undefined or unassigned value. It is used in the following cases:

• When a variable is declared but not initialized, the default isundefined。

let x;
(x); // undefined

• When accessing an object attribute or array element, if the attribute or element does not exist, it will returnundefined。

let obj = { name: "John", age: 30 };
(); // undefined
let arr = [1, 2, 3];
(arr[3]); //undefined

• When the function does not have a clear return value, the default return isundefined。

function foo() {
  // No explicit return value}
(foo()); // undefined

By comparison,nullis a special value that represents a null value or no object reference. It is usually explicitly assigned to a variable or property by the programmer, indicating that the value is empty. For example:

let x = null;
(x); // null

nullMainly used in the following situations:

• Initialize a variable so that it is set as an object later.

let obj = null; // Initialize to nullobj = { name: "John", age: 30 }; // Set as an object subsequently

• The parameters representing the function do not have object references.

function foo(arg) {
  if (arg === null) {
    ("Parameter is empty");
  } else {
    ("The parameter is not empty");
  }
}
foo(null); // Parameter is emptyfoo("Hello"); // Parameters are not empty

It should be noted thatundefinedandnullIt's a different type.undefinedis a typeundefinedvalue, andnullis a typeobjectvalue. However, in the equality comparison (==or===) , they are equal because they all represent the same meaning - null value.

(undefined == null); // true
(undefined === null); // false

In programming, it is usually usedundefinedTo represent undefined or unassigned states, usenullto indicate intentionally setting a value to empty.

When it comes toundefinedandnullThere are some things to note when it comes to more details:

• Type checking:

  • usetypeofOperator checkundefinedWhen value is returned, the string will be returned."undefined"。
  • usetypeofOperator checknullWhen value is returned, the string will be returned."object". This is a historical issue.nullIncorrectly identified as object type.

let x;
(typeof x); // "undefined"
let y = null;
(typeof y); // "object"

Default parameter values:

• When the parameter of the function is not passed or the value passed isundefinedWhen  , the default parameter value can be used.
• When the parameter of the function is passednullWhen valued, thenullTreat as a valid value and will not trigger the default parameter value.

function foo(x = "default") {
  (x);
}
foo(); // "default"
foo(undefined); // "default"
foo(null); // null

Safety navigation operator (Optional Chaining):

• Use the safe navigation operator (?.) It can avoid accessing object properties or calling methods.undefinedornullError. If the property or method does not exist, it will returnundefined。

let obj = { name: "John", address: { city: "New York" } };
(?.city); // "New York"
(?.zipCode); // undefined

Variable assignment:

• When a variable is assigned,undefinedA valid value that a variable can receive.
• andnullis considered a special value, usually used to represent empty or undefined states.

let x = undefined;
(x); // undefined
let y = null;
(y); //  null

The above is the detailed explanation of undefined and null in JS. For more information about undefined and null, please follow my other related articles!