javascript

Undefined

Learn about JavaScript's 'undefined' data type. Discover why variables become undefined, how functions return it, and best practices for checking and handling undefined values in your code.

9 min read 8 sections Tutorial

In JavaScript, `undefined` is a special data type. It means that something has not been given a value yet. You will learn what `undefined` is, why it appears, and how to work with it in your programs.

Undefined

In JavaScript, undefined is a special value. It means a variable has been declared but not assigned a value. It also shows up when you try to access something that doesn't exist, like a property on an object.

What is Undefined?

undefined is a primitive value in JavaScript that indicates a variable has not been assigned a value or a property does not exist.

Primitive Type

undefined is one of JavaScript's basic, built-in data types, like numbers or strings.

Uninitialized Variables

If you declare a variable but don't give it a starting value, JavaScript automatically sets it to undefined.

Missing Data

undefined can also appear when you try to get data that simply isn't there, like an object property.

Error Prevention

Understanding undefined helps you write safer code by checking for missing values before using them.

What is Undefined?

Getting Started

What is Undefined?

When you create a variable in JavaScript but don't give it a value, JavaScript automatically assigns it the value undefined. This is its default state. It means 'no value has been set yet'.

javascriptA variable declared but not assigned a value

1// Declare a variable named 'myVariable'
2// We don't give it any value right away
3let myVariable;
4
5// Now, let's see what value 'myVariable' holds
6console.log(myVariable); // This will show 'undefined'
7
8// We can also check its type
9console.log(typeof myVariable); // This will show 'undefined'

Undefined is Not Null

Many new coders confuse undefined with null. While both mean 'no value', they are different. undefined means a variable has not been assigned a value, while null is an intentional assignment indicating the absence of any object value. Think of null as an empty box, and undefined as a box that hasn't even been opened yet.

How JavaScript Handles Undefined

undefined doesn't just appear in uninitialized variables. JavaScript uses undefined in several other situations. It's how the language tells you that something is missing or hasn't been defined yet. Understanding these cases helps you predict your code's behavior.

javascriptCommon scenarios where 'undefined' appears

1// 1. Accessing a property that doesn't exist on an object
2const user = { name: 'Alice', age: 30 };
3console.log(user.email); // 'email' property does not exist, so it's undefined
4
5// 2. Function parameters that are not provided
6function greet(name) {
7  console.log(`Hello, ${name}!`);
8}
9greet(); // No 'name' argument passed, so 'name' inside the function is undefined
10
11// 3. Functions that do not explicitly return a value
12function doNothing() {
13  // This function doesn't use the 'return' keyword
14}
15const result = doNothing();
16console.log(result); // Functions without 'return' implicitly return undefined
17
18// 4. Using the 'void' operator
19// The 'void' operator evaluates an expression and returns undefined
20console.log(void(0)); // This explicitly produces undefined

✗ BadBad Practice

// Using a loosely typed check (falsy check)
let userName = ''; // userName is an empty string, which is falsy

if (userName) {
  console.log('User name exists!');
} else {
  // This block runs even though userName is not undefined
  console.log('User name is missing or empty!'); 
}

✓ GoodGood Practice

// Using a strict equality check for undefined
let userName;

if (userName === undefined) {
  // This block correctly identifies userName as undefined
  console.log('User name is truly undefined!');
}

// Or using typeof for safety, especially with undeclared variables
if (typeof anotherName === 'undefined') {
  console.log('Another name is undefined or not declared!');
}

Checking for Undefined

It's very important to check if a value is undefined before you try to use it. If you try to do something with an undefined value, like access a property on it, your program will likely crash. There are a couple of main ways to safely check for undefined.

Strict Equality (===)

Typeof Operator

Strict Equality (===)

// This is the most common and direct way.
// It checks if the value is exactly 'undefined'.

let myValue;

if (myValue === undefined) {
  console.log('myValue is definitely undefined!');
}

const obj = {};
if (obj.someProperty === undefined) {
  console.log('someProperty does not exist on obj!');
}

Typeof Operator

// This checks the 'type' of the variable.
// It's useful because it won't throw an error 
// even if the variable hasn't been declared at all.

let myValue;

if (typeof myValue === 'undefined') {
  console.log('myValue is of type undefined!');
}

// If 'nonExistentVar' was never declared, 
// 'typeof' still works without error.
if (typeof nonExistentVar === 'undefined') {
  console.log('nonExistentVar is not declared or is undefined!');
}

// This is the most common and direct way.
// It checks if the value is exactly 'undefined'.

let myValue;

if (myValue === undefined) {
  console.log('myValue is definitely undefined!');
}

const obj = {};
if (obj.someProperty === undefined) {
  console.log('someProperty does not exist on obj!');
}

// This checks the 'type' of the variable.
// It's useful because it won't throw an error 
// even if the variable hasn't been declared at all.

let myValue;

if (typeof myValue === 'undefined') {
  console.log('myValue is of type undefined!');
}

// If 'nonExistentVar' was never declared, 
// 'typeof' still works without error.
if (typeof nonExistentVar === 'undefined') {
  console.log('nonExistentVar is not declared or is undefined!');
}

When to Use Which

Use === undefined when you are sure the variable has been declared. It's the most precise check. Use typeof myVariable === 'undefined' when you are not sure if the variable has even been declared. This prevents a ReferenceError if the variable doesn't exist at all.

Working with Undefined in Your Code

Handling undefined values correctly is a crucial part of writing robust JavaScript applications. You often need to provide a default value or alternative action when data is missing. This prevents errors and makes your programs more reliable.

Provide Default Values for Function Parameters

If a function parameter might be undefined because it wasn't passed, you can set a default value directly in the function definition. This ensures the parameter always has a value to work with.

javascriptProvide Default Values for Function Parameters

1function sayHello(name = 'Guest') { // 'Guest' is the default if 'name' is undefined
2  console.log(`Hello, ${name}!`);
3}
4
5sayHello('Alice'); // Output: Hello, Alice!
6sayHello();       // Output: Hello, Guest!

Use Logical OR (||) for Fallback Values

The logical OR operator (||) is a common way to provide a fallback value if a variable is undefined (or any other 'falsy' value like null, 0, '', false).

javascriptUse Logical OR (||) for Fallback Values

1let userSetting = undefined;
2let finalSetting = userSetting || 'default_value';
3console.log(finalSetting); // Output: default_value
4
5let userName = 'Bob';
6let displayedName = userName || 'Anonymous';
7console.log(displayedName); // Output: Bob

Employ Optional Chaining (?.) for Object Properties

When dealing with objects that might have missing nested properties, optional chaining (?.) is a safe way to access them. It stops the evaluation and returns undefined if a property is null or undefined along the chain, instead of throwing an error.

javascriptEmploy Optional Chaining (?.) for Object Properties

1const userProfile = {
2  id: 1,
3  details: {
4    email: 'test@example.com'
5  }
6};
7
8// Accessing a property that exists
9console.log(userProfile.details.email); // Output: test@example.com
10
11// Accessing a property that might not exist using optional chaining
12console.log(userProfile.details?.address?.street); // Output: undefined (no error!)

TypeError: Cannot Read Properties of Undefined

The most common error related to undefined is trying to access a property or call a method on an undefined value. For example, if myVariable is undefined, then myVariable.property or myVariable.method() will cause a TypeError. Always check for undefined before trying to use its properties or methods.

Undefined Quick Reference

Scenario	Description	Example
Uninitialized Variable	A variable is declared but no value is assigned to it.	`let x;`
Missing Object Property	Attempting to access a property that does not exist on an object.	`obj.nonExistentProperty`
Missing Function Parameter	A function is called without providing an argument for a parameter.	`function greet(name){...} greet();`
No Return Value	A function does not explicitly return a value using the `return` keyword.	`function doSomething(){};`
Void Operator	Using the `void` operator on any expression.	`void(0)`

Test Your Knowledge

Quick Check

Which of the following scenarios will result in a variable having the value undefined?

Quick Check

What is the typeof operator's result when used on an undefined variable?

Quick Check

Consider the following code: javascript const person = { name: 'Eve' }; console.log(person.age); What will be logged to the console?

Quick Check

Which of the following is the safest way to check if a variable myVar is undefined and potentially undeclared?

Quick Reference

Pro Tips

1Undefined — A primitive value that means 'no value has been assigned' or 'property does not exist'.
2Declaration — Variables declared without an initial value are automatically undefined.
3Object Properties — Accessing an object property that doesn't exist results in undefined.
4Function Returns — Functions that don't explicitly return a value will implicitly return undefined.
5Missing Parameters — Function parameters for which no arguments are provided will be undefined inside the function.
6Strict Equality — Use myVar === undefined to precisely check if a declared variable holds the undefined value.
7Typeof Operator — Use typeof myVar === 'undefined' for the safest check, especially if myVar might be undeclared.
8Optional Chaining — Use ?. (optional chaining) to safely access potentially missing nested object properties, returning undefined instead of an error.
9Default Parameters — Provide default values for function parameters like function foo(param = 'default') to avoid undefined.
10TypeError Risk — Trying to access properties or methods on an undefined value will cause a TypeError.

Learn about Null

Understand the differences and similarities between undefined and null in JavaScript.

Explore Data Types

Dive deeper into all the primitive and object data types available in JavaScript.

Error Handling

Learn how to catch and manage errors like TypeError in your JavaScript applications.

Conditional Logic

Master if/else statements and logical operators to control program flow based on conditions.

Congratulations!

You've successfully learned about the undefined data type in JavaScript! You now know why it appears, how to check for it, and best practices to handle it in your code. This knowledge is key to writing robust and error-free JavaScript programs.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next