Platform under construction

Values & Types

Intermediate

null & undefined

undefined usually means JavaScript did not find or receive a value. null usually means the code intentionally set an empty value.

let selectedLesson;
const selectedOwner = null;

console.log(selectedLesson);     // undefined
console.log(selectedOwner); // null

Values & Types

null and undefined both mean absence, but not the same kind of absence.

undefined is the value JavaScript often gives when something is missing: an uninitialized variable, a missing property, a function without a return value or an omitted argument.

null is usually chosen by the programmer to represent an intentional empty value. For example: no selected owner yet, no active modal, no current user.

The practical rule: use undefined for not provided or not found defaults, and null for deliberately empty state when that makes the code clearer.

undefined

Default missing value produced by the language in many situations.

null

Intentional empty value chosen by the code.

?? operator

Use nullish coalescing when only null or undefined should trigger a fallback.

Optional chaining

Use ?. when a missing object path should not crash immediately.

Examples

Good type handling makes JavaScript predictable.

Clear empty state with nullish fallback

const user = { name: "User A", owner: null };

const ownerName = user.owner?.name ?? "No owner selected";

console.log(ownerName);

Using || when valid falsy values matter

const itemCount = 0;
const visibleCount = itemCount || 10;

console.log(visibleCount); // 10, but 0 was a real value

Rules that matter

Types are not paperwork. They are behavior.

JavaScript lets values move flexibly, but professional code keeps meaning clear. Convert at boundaries, validate input and choose values that represent the real idea.

Expect undefined from missing things

Missing properties, omitted arguments and empty returns often produce undefined.

Use null intentionally

null should communicate deliberate empty state.

Use ?? for nullish fallback

?? keeps valid falsy values such as 0 and empty strings.

Use ?. for optional paths

Optional chaining prevents crashes when a middle value is null or undefined.

Do not compare loosely by habit

value == null checks both null and undefined, but strict checks are clearer unless you mean both.

Document API meaning

If an API returns null, undefined or missing fields, define what each means.

Production thinking

Data quality starts with value quality.

Why does this matter?

Many bugs are absence bugs. Understanding null and undefined makes form handling, API data and UI state much calmer.

Accessibility

Missing values often become missing labels or empty messages. Good fallbacks keep the interface understandable.

Production note

Production API boundaries should normalize absent values so the UI does not guess every time.

SEO note

Missing titles, descriptions or links caused by nullish values can damage page quality.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace ?? with || and see why discount changes.
Give owner an object with a name property.
Delete discount and check the fallback behavior.

Practice assignment

Do this before moving to the next topic.

Create one variable that is undefined.
Create one variable set to null intentionally.
Write a fallback with ?? and explain why it keeps 0.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand null & undefined.