JavaScript is a dynamically typed language, which means that variables can contain values of any type without checking for type. While this flexibility is useful, it can also cause confusion and errors, particularly when working with null and undefined values. Both null and undefined indicate the lack of a value, yet they are used in distinct scenarios. In this post, we'll look at the differences between null and undefined, common instances in which they appear, and recommended practices for dealing with them in your code.

The Difference Between null and undefined

Before going into checking methods, it's important to understand the fundamental distinction between null and undefined:

What is undefined?

In JavaScript, undefined is a primitive value which signifies the absence of a value. It is automatically given to variables that were declared but not initialized. However, there are other instances in which undefined can arise, making it a critical subject to understand well.

Common Scenarios Leading to undefined:

1. Uninitialized Variables: When a variable is declared but not assigned a value, it is automatically set to undefined.

let x;
console.log(x); // Output: undefined

1. Accessing Non-Existing Object Properties: Attempting to access a property of an object that does not exist will result in undefined.

const obj = {};
console.log(obj.nonExistentProperty); // Output: undefined

1. Functions Without a Return Statement: A function that does not explicitly return a value returns undefined.

function doSomething() {
  // No return statement
}
console.log(doSomething()); // Output: undefined

1. Accessing Array Elements Out of Bounds: If you try to access an array element that does not exist, it returns undefined.

const arr = [1, 2, 3];
console.log(arr[5]); // Output: undefined

1. Function Parameters Not Provided: If a function is invoked with fewer arguments than it expects, the missing parameters are set to undefined.

function greet(name) {
  console.log(name);
}
greet(); // Output: undefined

1. The void Operator: The void operator evaluates an expression and returns undefined.

console.log(void 0); // Output: undefined

1. Deleted Object Properties: If you delete a property from an object, trying to access it will return undefined.

const user = { name: "Alice" };
delete user.name;
console.log(user.name); // Output: undefined

1. Explicit Assignment: You can explicitly assign undefined to a variable, although this is discouraged because it can cause confusion.

let b = undefined;
console.log(b); // Output: undefined

Key Features of Undefined:

1. It is the default value for uninitialized variables.
2. It denotes the lack of a value in specific instances, such as missing function arguments or non-existent properties.
3. It differs from null and denotes a more "unintentional" absence of value.

What is null?

Null is another primitive value in JavaScript, however unlike undefined, it requires explicit assignment. It denotes the purposeful absence of any object value. Null is utilized in a variety of contexts, therefore it is a conscious programming choice.

Common Scenarios Leading to null:

1. Intentional Absence of Value: When a variable or property is deliberately set to null, it means that it has no value.

let x = null;
console.log(x); // Output: null

1. Resetting or Clearing Variables: When a variable's value is no longer required or relevant, it is commonly reset or cleared to null.

let data = { key: "value" };
data = null; // Clear the variable
console.log(data); // Output: null

1. Absence of Object Relationships: When creating data structures, null is used to clearly state that an object relationship does not exist.

const user = {
  name: "Alice",
  parent: null // No parent relationship
};
console.log(user.parent); // Output: null

1. Default Value in APIs or Frameworks: Many APIs or frameworks use null to signify the lack of a value or that a value will be given later.

const response = {
  data: null, // Data not yet available
  error: null // No error occurred
};

1. DOM API Methods: Some DOM API functions return null when a value cannot be found.

const element = document.querySelector(".non-existent-class");
console.log(element); // Output: null

1. JSON Serialization: When working with JSON, null is frequently used to denote an explicit empty value.

const jsonData = JSON.stringify({ key: null });
console.log(jsonData); // Output: "{\"key\":null}"

1. Optional Parameters in Functions: Can use null to indicate that a parameter is optional or intentionally left blank.

function createUser(name, age, address = null) {
  return { name, age, address };
}
console.log(createUser("Alice", 25)); // Output: { name: "Alice", age: 25, address: null }

Key Features of Null:

1. It represents a deliberate absence of value.
2. In most circumstances, the developer must explicitly assign null values. In some cases, such as DOM lookups, JSON processing, or prototype chains, JavaScript may automatically return null.
3. Despite being a primitive value, typeof null falsely returns "object" owing to an old JavaScript error.
4. It is distinct from undefined and indicates a purposeful absence rather than an unintended one.

In terms of type:

• typeof undefined returns "undefined".
• typeof null returns "object" (This is an old JavaScript problem that can't be fixed without impacting present code).

console.log(typeof undefined); // Output: "undefined"
console.log(typeof null);      // Output: "object"

How to Check for null or undefined

• Using == and ===

In JavaScript, null and undefined are loosely equivalent (==), but not to any other value. However, they are not strictly equivalent (===) to one other.

console.log(null == undefined);  // Output: true
console.log(null === undefined); // Output: false

To check if a variable is either null or undefined, you can use the following:

if (x == null) {
  // x is either null or undefined
}

• Using typeof

The typeof operator can be used to determine whether a variable is undefined.

if (typeof x === 'undefined') {
  // x is undefined
}

However, since typeof null returns "object", it cannot be used to distinguished between null and other objects.

• Using === for Strict Equality

To explicitly check for null or undefined values, use strict equality (===).

if (x === null) {
  // x is null
}

if (x === undefined) {
  // x is undefined
}

• Using Optional Chaining (?)

Modern JavaScript allows you to safely access deeply nested properties without explicitly checking if each reference in the chain is null or undefined—optional chaining.

const user = { address: { city: "New York" } };
console.log(user.address?.city); // Output: New York
console.log(user.contact?.phone); // Output: undefined

• Using Nullish Coalescing Operator (??)

When its left-hand side operand is null or undefined, the nullish coalescing operator (??) is a logical operator returning its right-hand side operand.

const x = null;
const y = x ?? 'default';
console.log(y); // Output: default

Best Practices for Handling null and undefined

• Initialize Variables: To avoid having undefined values, always initialize variables. If a variable should have no value, consider setting it to null.

let x = null; // Explicitly set to null

• Use Default Parameters: When creating functions, use default parameters to handle scenarios where the arguments are undefined.

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

greet(); // Output: Hello, Guest

• Use Optional Chaining: Optional chaining allows you to safely access nested properties without having to verify each level for null or undefined.

const user = { address: { city: "New York" } };
console.log(user.address?.city); // Output: New York

• Use Nullish Coalescing Operator: When dealing with null or undefined values, use the nullish coalescing operator to set default values.

const x = null;
const y = x ?? 'default';
console.log(y); // Output: default

• Avoid Using == for Null Checks: While == can be used to check for null and undefined values, it is generally preferable to use === for strict equality checks to avoid unexpected type coercion.

if (x === null || x === undefined) {
  // x is either null or undefined
}

• Use Linting Tools: Linting tools such as ESLint can help you detect potential issues with null and undefined variables in your code. ESLint can enforce rules to help you avoid common mistakes.