24 min read

Undefined vs Null in JavaScript

Understanding JavaScript undefined vs null is essential for writing reliable JavaScript code, debugging errors, handling API responses, validating form inputs, and working with modern frameworks. Although both undefined and null represent the absence of a meaningful value, they have different meanings, behaviors, and use cases. The difference between undefined and null in JavaScript becomes especially important when checking variables, comparing values, accessing object properties, and processing JSON data.

In JavaScript, undefined usually indicates that a value has not been assigned or is unavailable, while null generally represents an intentional absence of a value. Both are JavaScript primitive values, but they behave differently when used with equality operators, type checking, logical expressions, and serialization methods.

This beginner-friendly JavaScript guide explains undefined vs null examples, JavaScript data types, equality comparisons, null checks, TypeScript compatibility, error handling, and best practices. By the end, you will understand how to choose between null and undefined in modern JavaScript and avoid common programming mistakes.

What Is the Difference Between Undefined and Null in JavaScript?

The main difference between undefined and null in JavaScript is that undefined commonly represents a missing or unassigned value, whereas null is explicitly assigned to indicate that a value is intentionally absent.

Consider the following JavaScript example:

let username;
let email = null;

console.log(username); // undefined
console.log(email);    // null

The username variable has been declared but not assigned a value. JavaScript automatically initializes it to undefined. In contrast, the email variable has been explicitly assigned null, indicating that it currently has no value.

Both values are useful, but they should not be treated as interchangeable in every situation.

What Is Undefined in JavaScript?

In JavaScript, undefined is a primitive value that commonly indicates that a variable has been declared without an assigned value or that a requested property or result is unavailable.

1. Uninitialized Variables

JavaScript automatically assigns undefined to variables declared with let or var when no initial value is provided.

let age;

console.log(age); // undefined

This example demonstrates JavaScript variable initialization. The variable exists, but its value has not been assigned.

The same behavior applies to var:

var city;

console.log(city); // undefined

However, accessing a let or const variable before its declaration has been initialized can throw a ReferenceError because of the temporal dead zone. An uninitialized const declaration without an initializer is also invalid.

2. Declared but Unassigned Variables

Declared but unassigned variables are a common source of undefined values.

let productPrice;
productPrice = 150;

console.log(productPrice); // 150

Before the assignment, productPrice contains undefined. After the assignment, it contains the number 150.

This behavior makes it important to distinguish between a variable that has no assigned value and a variable that has never been declared.

3. Missing Object Properties

When you access a property that does not exist on an object, JavaScript generally returns undefined.

const user = {
    name: "Ali",
    age: 25
};

console.log(user.name);    // "Ali"
console.log(user.email);   // undefined
console.log(user.address); // undefined

The email and address properties are missing from the object. JavaScript does not automatically create these properties when you read them.

This is especially important when working with API responses, user profiles, product data, and configuration objects.

4. Missing Function Arguments

JavaScript functions return undefined when an argument is omitted and no default parameter supplies another value.

function greet(name) {
    console.log(name);
}

greet(); // undefined

The name parameter receives undefined because no argument was provided.

You can use default parameters to handle this situation:

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

greet(); // Hello, Guest!

A default parameter is used when the argument is omitted or explicitly passed as undefined. Passing null does not activate the default.

greet(undefined); // Hello, Guest!
greet(null);      // Hello, null!

5. Functions Returning Undefined

A JavaScript function returns undefined by default if it does not contain a return statement with a value.

function calculateTotal() {
    const total = 100 + 50;
}

console.log(calculateTotal()); // undefined

Even though the function calculates a total internally, it does not return the result.

To return the calculated value, use:

function calculateTotal() {
    const total = 100 + 50;
    return total;
}

console.log(calculateTotal()); // 150

This distinction matters when debugging functions that appear to execute correctly but produce unexpected results elsewhere in an application.

What Is Null in JavaScript?

In JavaScript, null is a primitive value that developers explicitly assign to represent an intentional absence of a value.

For example:

let selectedProduct = null;

console.log(selectedProduct); // null

The variable exists, and its current value is intentionally empty. This differs from a variable that has not yet received an assignment.

When Should You Explicitly Assign Null?

Explicitly assigning null is useful when you want to communicate that a value is intentionally absent, unknown, unavailable, or cleared.

Consider a user profile:

const user = {
    name: "Sara",
    profileImage: null
};

console.log(user.profileImage); // null

The application includes the profileImage property, but the user has no profile image available.

Other practical use cases include:

• Resetting a selected item in a user interface.
• Representing an optional database relationship.
• Clearing a previously selected date.
• Indicating that a search result has no matching record.
• Representing a missing value returned by a database or API.
• Initializing a state variable when the application deliberately defines its empty state as null.

For example, when a user deselects a product:

let selectedProduct = {
    id: 101,
    name: "Laptop"
};

selectedProduct = null;

console.log(selectedProduct); // null

The assignment communicates that no product is currently selected.

Understanding typeof Undefined and typeof Null

The typeof operator helps developers inspect JavaScript values. However, the results for undefined and null can be confusing, especially for beginners.

What Does typeof Undefined Return?

The expression typeof undefined returns the string "undefined".

console.log(typeof undefined); // "undefined"

let username;

console.log(typeof username); // "undefined"

This result is consistent with the value’s name and is useful when checking whether a variable contains undefined.

What Does typeof Null Return?

The expression typeof null returns "object".

console.log(typeof null); // "object"

This is a historical JavaScript behavior, not evidence that null is actually an object.

Why typeof Null Returns “Object”

JavaScript has retained this behavior for backward compatibility. Changing the result could break existing applications that rely on the current behavior.

Despite the result, null is a primitive value. It represents the intentional absence of a value rather than an object containing properties.

Therefore, do not use typeof value === "object" alone to determine whether a variable contains an actual object. The expression also matches null.

A safer check is:

function isObject(value) {
    return value !== null && typeof value === "object";
}

console.log(isObject(null));      // false
console.log(isObject({ name: "Ali" })); // true

This check identifies non-null objects, including arrays. If you need to exclude arrays, use Array.isArray() as an additional condition.

Undefined vs Null Examples: Equality Operators Explained

JavaScript equality operators are among the most important concepts when comparing undefined and null.

JavaScript provides two primary equality operators:

• Strict equality: ===
• Loose equality: ==

1. Undefined === Null

Strict equality compares values without applying the type conversions used by loose equality.

console.log(undefined === null); // false

The result is false because undefined and null are different primitive values.

For most application code, strict equality is the preferred comparison method because it avoids unexpected type coercion.

2. Undefined == Null

Loose equality allows certain type conversions and has a specific rule for null and undefined.

console.log(undefined == null); // true

This result is intentional. JavaScript considers null and undefined loosely equal to each other, even though they are not strictly equal.

This behavior can be useful when you want to check whether a value is either null or undefined:

if (value == null) {
    console.log("Value is null or undefined");
}

This particular comparison matches only null and undefined, unlike a general truthiness check.

Strict Equality vs Loose Equality

Which Equality Operator Should You Use?

Prefer === and !== for ordinary comparisons. Use == null only when you intentionally want to match both null and undefined in one condition and your team understands that behavior.

For example:

const userEmail = null;

if (userEmail === null || userEmail === undefined) {
    console.log("Email is unavailable");
}

This version explicitly checks both cases and is easy for beginners to understand.

Undefined vs Null vs NaN in JavaScript

Although undefined, null, and NaN can all indicate that something is missing, empty, or invalid in different contexts, they have distinct meanings.

• undefined: A value is unassigned or unavailable.
• null: A value is intentionally absent.
• NaN: A numeric operation produced a result that is not a valid number.

Example:

let price;
const discount = null;
const invalidNumber = Number("hello");

console.log(price);          // undefined
console.log(discount);       // null
console.log(invalidNumber);  // NaN

console.log(typeof price);         // "undefined"
console.log(typeof discount);      // "object"
console.log(typeof invalidNumber); // "number"

Notice that typeof NaN returns "number". To check whether a value is NaN, use Number.isNaN().

console.log(Number.isNaN(NaN));              // true
console.log(Number.isNaN(Number("hello")));   // true
console.log(Number.isNaN(undefined));         // false

Do not confuse NaN with null or undefined when validating user input or performing mathematical calculations.

Falsy Values in JavaScript: Truthy vs Falsy Values

JavaScript uses truthiness to determine how values behave in conditions. Both undefined and null are falsy values.

Other common falsy values include:

• false
• 0
• -0
• 0n
• NaN
• "" (an empty string)

The values [] and {} are truthy, even though they may appear empty.

Example of Truthy vs Falsy Values

console.log(Boolean(undefined)); // false
console.log(Boolean(null));      // false
console.log(Boolean(0));         // false
console.log(Boolean(""));        // false
console.log(Boolean([]));        // true
console.log(Boolean({}));        // true

Because null, undefined, zero, and empty strings are all falsy, a condition such as if (!value) does not distinguish between them.

For example:

let quantity = 0;

if (!quantity) {
    console.log("Quantity is missing");
}

This incorrectly treats zero as missing if zero is a valid quantity.

A better approach is to check the specific values you want to reject.

if (quantity === null || quantity === undefined) {
    console.log("Quantity is missing");
}

This is an important distinction when handling prices, quantities, form inputs, and application settings.

Nullish Values and the Nullish Coalescing Operator (??)

The nullish coalescing operator (??) provides a convenient way to supply a fallback value when an expression evaluates to either null or undefined.

const username = null;

console.log(username ?? "Guest"); // "Guest"

It also works when a value is undefined:

const displayName = undefined;

console.log(displayName ?? "Anonymous"); // "Anonymous"

Unlike the logical OR operator (||), the nullish coalescing operator preserves valid falsy values such as zero, false, and an empty string.

console.log(0 ?? 100);       // 0
console.log(false ?? true);  // false
console.log("" ?? "Default"); // ""

Compare this with logical OR:

console.log(0 || 100);        // 100
console.log(false || true);   // true
console.log("" || "Default"); // "Default"

Use ?? when you want a fallback only for nullish values. Use || when you intentionally want a fallback for any falsy value.

Nullish Coalescing in Real Applications

const settings = {
    pageSize: 0,
    theme: null
};

const pageSize = settings.pageSize ?? 20;
const theme = settings.theme ?? "light";

console.log(pageSize); // 0
console.log(theme);    // "light"

Here, zero is preserved as a legitimate setting, while the missing theme receives a default value.

Optional Chaining (?.) for Missing Values

Optional chaining (?.) allows you to access nested properties or call methods without throwing an error when the value immediately to the left of the operator is null or undefined.

Without optional chaining:

const user = {};

console.log(user.profile.name);
// TypeError: Cannot read properties of undefined

The profile property does not exist, so JavaScript cannot access its name property.

With optional chaining:

const user = {};

console.log(user.profile?.name); // undefined

This expression is safe because the optional chain checks whether user.profile is nullish before accessing name.

For deeper chains, use:

const user = {
    profile: {
        address: null
    }
};

console.log(user.profile?.address?.city); // undefined

Optional chaining is especially useful when working with nested API responses, user profile data, and configuration objects.

However, it does not validate every part of an expression automatically. If the base variable user itself is undeclared, referencing it still throws a ReferenceError.

Null vs Empty String, Zero, and False

Developers often confuse null and undefined with other values that represent empty or missing information.

Null vs Empty String

An empty string ("") is a valid string containing zero characters. null indicates the absence of a value.

const name = "";
const email = null;

console.log(typeof name);  // "string"
console.log(typeof email); // "object"

An empty form field may produce an empty string rather than null or undefined, depending on the application.

Null vs Zero

Zero is a numeric value, not an absent value.

const balance = 0;
const unknownBalance = null;

A balance of zero can be meaningful, while null may indicate that the balance is unavailable.

Null vs False

The boolean value false communicates a negative or disabled state.

const isVerified = false;
const verificationStatus = null;

Here, false indicates that the user is not verified, while null could indicate that the verification status has not yet been determined.

Choosing the correct representation improves data consistency and prevents incorrect conditions.

Undefined vs Not Defined: What Is the Difference?

The terms undefined and not defined describe different situations in JavaScript.

An undefined variable has been declared and initialized, but its value is undefined. An undeclared variable has no accessible declaration in the current scope.

let username;

console.log(username); // undefined

By contrast:

console.log(userEmail);
// ReferenceError: userEmail is not defined

The second example throws an error because userEmail has not been declared.

Undeclared Variables vs Undefined Variables

You can check an undeclared identifier using typeof without causing a ReferenceError:

console.log(typeof userEmail); // "undefined"

However, this special behavior does not make an undeclared variable equivalent to a declared variable containing undefined.

For reliable code, declare variables before using them and avoid depending on undeclared identifiers.

JSON Serialization of Undefined and Null

JSON serialization is an important consideration when sending data between frontend applications, servers, and REST APIs.

The JSON.stringify() method converts JavaScript values into JSON strings, but it treats undefined and null differently depending on where they appear.

Undefined Object Properties

const user = {
    name: "Ali",
    email: undefined,
    phone: null
};

console.log(JSON.stringify(user));
// {"name":"Ali","phone":null}

The email property is omitted because its value is undefined. The phone property remains because its value is null.

Undefined Array Elements

const values = [undefined, null, 10];

console.log(JSON.stringify(values));
// [null,null,10]

In arrays, undefined elements are serialized as null.

JSON Serialization of Undefined and Null at the Top Level

console.log(JSON.stringify(null));      // "null"
console.log(JSON.stringify(undefined)); // undefined

When undefined is serialized as a top-level value, JSON.stringify() returns JavaScript undefined, not a JSON string.

Null in JSON and REST API Responses

JSON supports null as a valid value but does not support undefined.

For example, a REST API may return:

{
  "name": "Sara",
  "email": null
}

This response explicitly communicates that email is null. If the property is omitted entirely, the client may interpret it as missing or not provided, depending on the API contract.

When processing API responses with missing fields, check whether the property is absent, explicitly null, or contains a valid value. These cases can have different meanings for updates, validation, and data synchronization.

Checking for Undefined and Null in JavaScript

Reliable null checks in JavaScript help prevent runtime errors and unexpected behavior.

1. Checking for Undefined

Use strict equality to check whether a value is undefined:

let result;

if (result === undefined) {
    console.log("Result is undefined");
}

You can also use:

if (typeof result === "undefined") {
    console.log("Result is undefined");
}

The typeof approach is useful when checking a potentially undeclared identifier, although a declared variable is preferable in normal application code.

2. Checking for Null

Use value === null when you specifically want to detect null:

const result = null;

if (result === null) {
    console.log("Result is null");
}

This condition does not match undefined.

3. Checking for Null or Undefined

There are two common approaches.

Explicit comparison:

if (value === null || value === undefined) {
    console.log("Value is missing");
}

Loose equality:

if (value == null) {
    console.log("Value is null or undefined");
}

The expression value == null is a concise nullish check. It should be used intentionally because loose equality behaves differently for other values.

4. Checking for Any Falsy Value

if (!value) {
    console.log("Value is falsy");
}

This condition matches more than null and undefined. It also matches false, 0, -0, 0n, NaN, and the empty string.

Use the appropriate condition based on the expected data type and application requirements.

DOM Elements Returning Null

JavaScript frequently interacts with the Document Object Model (DOM). A common example is document.querySelector() returning null when no matching element exists.

const button = document.querySelector("#submit-button");

console.log(button);

If an element with the ID submit-button exists, the method returns the matching element. If no matching element exists, it returns null.

Attempting to access a property of a missing element can cause an error:

const button = document.querySelector("#missing-button");

button.addEventListener("click", () => {
    console.log("Clicked");
});

This code can throw a TypeError because button is null.

Use a null check:

const button = document.querySelector("#submit-button");

if (button !== null) {
    button.addEventListener("click", () => {
        console.log("Clicked");
    });
}

This is a practical example of null safety and defensive programming.

Avoiding Null Reference Errors and Handling TypeErrors

Errors such as Cannot read properties of undefined and Cannot read properties of null occur when code tries to access a property or method on a nullish value.

Example: Cannot Read Properties of Undefined

const user = {};

console.log(user.address.city);

Because user.address is undefined, JavaScript cannot access city.

Example: Cannot Read Properties of Null

const user = {
    address: null
};

console.log(user.address.city);

Because user.address is null, accessing city throws a TypeError.

TypeError Troubleshooting

To resolve these problems:

1. Identify the exact expression mentioned in the error message.
2. Check whether the relevant variable is null or undefined.
3. Inspect the data structure or API response that supplies the value.
4. Add a condition or optional chaining where missing data is expected.
5. Use an appropriate fallback value when the application requires one.
6. Confirm that the fix does not hide an unexpected data problem.

For additional guidance, read our related guide on JavaScript TypeError troubleshooting.

Defensive Programming Example

function getCity(user) {
    return user?.address?.city ?? "Unknown";
}

console.log(getCity({
    address: {
        city: "Lahore"
    }
})); // Lahore

console.log(getCity({}));   // Unknown
console.log(getCity(null)); // Unknown

This example combines optional chaining and nullish coalescing to handle missing data safely.

However, defensive programming should not replace proper validation. If an address is required, the application should report invalid input rather than silently treating every missing address as acceptable.

Handling Missing Values in Form Input Validation

Form input validation is another common situation where undefined and null behave differently.

For example:

const formData = {
    username: "",
    email: undefined,
    phone: null
};

console.log(formData.username); // ""
console.log(formData.email);    // undefined
console.log(formData.phone);    // null

These values represent different conditions:

• An empty username is a string with no characters.
• An undefined email may indicate that the field was not supplied.
• A null phone number may indicate that the value was deliberately cleared.

A basic validation function might look like this:

function validateEmail(email) {
    if (email === undefined || email === null || email === "") {
        return "Email is required";
    }

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        return "Enter a valid email address";
    }

    return "Valid email";
}

console.log(validateEmail(""));               // Email is required
console.log(validateEmail(null));             // Email is required
console.log(validateEmail("user@example.com")); // Valid email

Real-world applications should also handle values of unexpected types and use validation rules appropriate to the product.

Database NULL vs JavaScript Null

Database NULL and JavaScript null are related concepts, but they belong to different data systems.

In relational databases such as PostgreSQL and MySQL, NULL generally represents missing or unknown data. SQL uses special comparison rules for null values.

For example, in SQL, you typically write:

SELECT *
FROM users
WHERE email IS NULL;

You should not use email = NULL to test for SQL null values because ordinary equality comparisons with NULL produce an unknown result.

In JavaScript, the corresponding check is:

if (user.email === null) {
    console.log("Email is null");
}

Database drivers and ORMs may convert database null values into JavaScript null. Missing fields in an application object, however, may be represented by undefined.

When building database-backed applications, understand the distinction between a missing property, a JavaScript null value, and a database column containing NULL.

TypeScript Null and Undefined

TypeScript builds on JavaScript by adding static types that help developers identify potential errors before running their code.

Strict Null Checks in TypeScript

When strictNullChecks is enabled, TypeScript treats null and undefined as distinct types.

let username: string = "Ali";

// username = null; // Type error with strict null checks

If a variable is allowed to contain either a string or null, use a union type:

let username: string | null = null;

username = "Ali";
username = null;

This makes the possibility of an absent value explicit.

Optional Properties and Nullable Types

An optional property may be omitted from an object:

interface User {
    name: string;
    email?: string;
}

With strict null checks enabled, reading email produces a type that includes undefined because the property may be absent.

A nullable property can explicitly accept null:

interface UserProfile {
    name: string;
    email: string | null;
}

The property must be present when constructing a value of this type, but its value may be null.

If a property can be absent and can also contain null, represent both possibilities:

interface UserProfile {
    email?: string | null;
}

Void vs Undefined

In TypeScript, void commonly describes a function that does not provide a meaningful return value to its caller.

function logMessage(): void {
    console.log("Hello");
}

Such a function returns undefined at runtime when it completes normally without returning another value.

However, void and undefined are not interchangeable in every TypeScript type-checking context. Use void to describe functions whose return values are not intended to be used, and use undefined when you specifically need to represent that value in a type.

Best Practices for Handling Null and Undefined

Choosing the right value improves code readability, debugging, and application reliability.

1. Use Undefined for Unassigned or Missing Values

Allow JavaScript to use undefined naturally when a declared variable has not received a value or an optional property is absent.

let result;
console.log(result); // undefined

Avoid assigning undefined unnecessarily when simply omitting an optional property communicates the same intent.

2. Use Null for Intentional Absence

Use null when your application deliberately represents an empty or unavailable value.

const selectedUser = null;

Document the meaning of null in your data model so other developers understand whether it means unknown, cleared, unavailable, or not applicable.

3. Prefer Strict Equality

Use === and !== for ordinary comparisons.

if (user === null) {
    console.log("No user selected");
}

This avoids many unexpected type-coercion problems associated with loose equality.

4. Use Nullish Coalescing for Defaults

const timeout = config.timeout ?? 5000;

This preserves zero if zero is a valid setting, while providing a default for nullish values.

5. Use Optional Chaining for Nested Data

const city = user?.address?.city;

Optional chaining is useful when intermediate properties might be missing. It should not replace validation when those properties are mandatory.

6. Validate API and Database Data

Do not assume every API response includes every property. Validate required fields, inspect response schemas, and decide how to handle omitted values and explicit null values.

7. Enable Strict Null Checks in TypeScript

For TypeScript projects, enabling strictNullChecks helps reveal places where nullish values may cause runtime errors.

8. Avoid Unnecessary Fallbacks

A fallback such as value || defaultValue can accidentally replace valid values like 0, false, and "". Choose between ??, ||, and explicit conditions based on the intended behavior.

9. Keep Data Contracts Consistent

When designing APIs, forms, and database schemas, establish whether missing values should be omitted or represented by null. Consistency makes application behavior easier to understand and maintain.

Common JavaScript Interview Questions: Undefined vs Null

1. What is the main difference between undefined and null?

undefined usually indicates that a value has not been assigned or is unavailable, while null represents an intentional absence of a value.

2. Why does typeof null return object?

This is a historical JavaScript behavior retained for backward compatibility. Although typeof null returns "object", null is a primitive value.

3. What is the difference between undefined === null and undefined == null?

undefined === null returns false because strict equality distinguishes the values. undefined == null returns true because of a special rule in JavaScript’s loose equality algorithm.

4. Is null a falsy value?

Yes. Boolean(null) returns false. However, null is different from other falsy values, including zero, false, and an empty string.

5. Can JSON contain undefined?

No. JSON does not support undefined. When using JSON.stringify(), undefined object properties are omitted, undefined array elements become null, and a top-level undefined value produces no JSON string.

6. How do you check whether a value is null or undefined?

You can use value === null || value === undefined for explicit checking or value == null when you intentionally want to match both values.

7. When should you use null instead of undefined?

Use null when you intentionally want to represent an absent value, such as a cleared selection or an unavailable optional resource. Let undefined represent missing or unassigned values where appropriate.

8. Can null and undefined cause TypeErrors?

Yes. Attempting to access a property on either value can produce a TypeError. Optional chaining, explicit checks, and suitable data validation can prevent these errors.

Frequently Asked Questions

Conclusion: How to Choose Between Null and Undefined in Modern JavaScript

Understanding JavaScript undefined vs null helps you write safer, more predictable applications. Although both values represent the absence of a meaningful value in different ways, undefined generally indicates an unassigned or missing value, while null communicates an intentional absence.

Remember these essential points:

• Use undefined to identify missing or unassigned values where appropriate.
• Use null to represent an intentional absence of a value.
• Remember that typeof undefined returns "undefined", while typeof null returns "object" because of a historical JavaScript quirk.
• Use strict equality for normal comparisons and understand why undefined == null returns true.
• Use nullish coalescing (??) when you need a fallback only for nullish values.
• Use optional chaining (?.) to safely access nested properties.
• Understand JSON serialization, API responses, form validation, and database null handling.
• Apply defensive programming and appropriate TypeScript types to reduce runtime errors.

The best approach is to choose a consistent convention for missing values, validate data at application boundaries, and handle nullish values deliberately rather than relying on assumptions. These practices make JavaScript code easier to maintain, troubleshoot, and scale.