What is undefined vs not defined in JavaScript?

The key difference between undefined and not defined is that undefined refers to a variable that has been declared but not assigned a value, while not defined refers to a variable that hasn’t been declared in the code at all. Accessing an undefined variable returns the value undefined, but trying to access a not defined variable throws a ReferenceErrorA ReferenceError occurs when you try to access a variable that hasn’t been declared or is out of scope..

Suppose you're at a restaurant and ask for dessert but don’t specify which one—this is like undefined because the request exists but has no value. If you never mention dessert at all, it’s like not defined, leading to confusion (or an error) when the waiter tries to serve something you didn’t order.

What is undefined?

In JavaScript, a variable is undefined when it has been declared but not assigned a value. This state indicates that the variable exists in memory but doesn’t hold any meaningful value yet.

Examples of undefined

  1. Declared but not assigned:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

Here, myVar is declared but not initialized, so JavaScript assigns it the default valueA default value is the initial value assigned to a variable if no explicit value is provided. For example, undefined is the default value for uninitialized variables. undefined.

Try assigning null to myVar instead of leaving it uninitialized. How does the output change?

  1. Missing object property:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

The property age does not exist in the person object, so accessing it returns undefined.

  1. Function without a return statement:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

A function that doesn’t explicitly return a value returns undefined by default.

While undefined indicates an existing variable without a value, not defined takes it a step further to represent variables that don’t exist at all. Let’s explore this concept.

What is not defined?

In JavaScript, a variable or property is considered not defined when it hasn’t been declared at all in the current scopeScope defines where a variable can be accessed in your code, such as within a function (local scope) or globally across the entire program (global scope).. Attempting to access such a variable results in a ReferenceError.

Examples of not defined

  1. Accessing undeclared variables:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

The variable nonExistentVar hasn’t been declared anywhere in the code, leading to an error.

  1. Misspelled variable names:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

JavaScript is case-sensitive, so myVariable and myvariable are treated as different variables.

  1. Accessing properties of an undeclared object:

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

Here, the object myObject is not declared, causing an error.

Key differences between undefined and not defined

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

Ready to learn JavaScript and build interactive web applications? Start our Learn JavaScript course and gain a solid foundation, preparing you for a career in web development.

Want to become a full-stack web developer? Begin our Become a Full Stack Developer skill path, starting with the basics and advancing to expert-level skills, setting you up for success in the world of full-stack development.

Key takeaways

  1. undefined: A variable or property exists but lacks a value.

  2. not defined: A variable or property does not exist in the code, resulting in an error when accessed.

  3. Always declare variables before using them to avoid ReferenceError.

  4. Avoid assigning undefined manually; let JavaScript handle it.

  5. Use tools like linters to catch undeclared variables or typos.

This widget is not supported in dev-mode. Kindly enable it or run using yarn webapp:dev-widgets.

Free Resources