How Null and Undefined Work in JavaScript


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
:
When a variable is declared but not initialized, its value is automatically set to
undefined
.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
:
null
is not automatically assigned by JavaScript; it must be explicitly set by the programmer.It signifies an intentional lack of value.
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
Feature | undefined | null |
Definition | Value is not assigned or is missing. | Absence of value (intentional). |
Type | undefined | object (due to legacy reasons). |
Assigned By | JavaScript (automatic). | Developer (explicit). |
Usage | Indicates a missing or unknown value. | Explicitly signifies no value. |
Practical Scenarios
When to Use
undefined
:Let JavaScript handle missing or unknown values automatically.
Avoid explicitly assigning
undefined
to a variable.
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
undefined
is the default value for variables that are declared but not initialized.null
is explicitly assigned to signify the absence of a value.Use
undefined
for unknown values andnull
for intentional absence of data.
Subscribe to my newsletter
Read articles from Anmol singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
