How Null and Undefined Work in JavaScript

Anmol singhAnmol singh
3 min read

Understanding null and undefined in JavaScript

In JavaScript, handling missing or unknown values is common. To manage such scenarios, JavaScript provides two special values: null and undefined. Although they may seem similar at first glance, they serve distinct purposes. Let’s dive into their definitions and use cases.


What is undefined?

In JavaScript, a variable is undefined when it is declared but not assigned a value. Essentially, undefined indicates the absence of a known value or that JavaScript doesn’t know what the variable contains.


Key Points About undefined:

  1. When a variable is declared but not initialized, its value is automatically set to undefined.

  2. If you attempt to access a property or variable that doesn’t exist, JavaScript will return undefined.


Example 1: Uninitialized Variable

javascriptCopy codelet myVariable;
console.log(myVariable); // Output: undefined

Example 2: Accessing Non-Existent Property

javascriptCopy codelet person = { name: "Tony Stark" };
console.log(person.age); // Output: undefined

What is null?

In contrast, null is an intentional assignment to indicate the absence of any value. It is a keyword in JavaScript and must be explicitly assigned.


Key Points About null:

  1. null is not automatically assigned by JavaScript; it must be explicitly set by the programmer.

  2. It signifies an intentional lack of value.

  3. It’s often used in cases where a variable is expected to hold an object or value in the future but currently has no meaningful data.


Example 1: Assigning null to a Variable

javascriptCopy codelet myVariable = null;
console.log(myVariable); // Output: null

Example 2: Using null as a Placeholder

javascriptCopy codelet currentYear = null;
console.log(currentYear); // Output: null

// Later in the program
currentYear = 2024;
console.log(currentYear); // Output: 2024

Differences Between null and undefined

Featureundefinednull
DefinitionValue is not assigned or is missing.Absence of value (intentional).
Typeundefinedobject (due to legacy reasons).
Assigned ByJavaScript (automatic).Developer (explicit).
UsageIndicates a missing or unknown value.Explicitly signifies no value.

Practical Scenarios

  1. When to Use undefined:

    • Let JavaScript handle missing or unknown values automatically.

    • Avoid explicitly assigning undefined to a variable.

  2. When to Use null:

    • Use null when you want to intentionally signify the absence of a value.

    • Commonly used as a placeholder for future assignments.


Practice Examples

Example 1: Declared but Uninitialized Variable

javascriptCopy codelet uninitialized;
console.log(uninitialized); // Output: undefined

Example 2: Assigning null

javascriptCopy codelet userName = null;
console.log(userName); // Output: null

Example 3: Reassigning Values

javascriptCopy codelet score = null; // Placeholder
console.log(score); // Output: null

score = 100; // Updating the value
console.log(score); // Output: 100

Key Takeaways

  1. undefined is the default value for variables that are declared but not initialized.

  2. null is explicitly assigned to signify the absence of a value.

  3. Use undefined for unknown values and null for intentional absence of data.

0
Subscribe to my newsletter

Read articles from Anmol singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Anmol singh
Anmol singh