In JavaScript, it's crucial to grasp the difference between "undefined" and "not defined" for writing neat, bug-free code. These two terms confuse many developers, but a professional developer needs to know what the actual difference is between them.

In this article, you will learn about the difference between "undefined" and "not defined" in JavaScript. Also, learn what the meaning of each one is. By understanding this article completely, you will have a clear understanding of "undefined" vs "not defined".

Let's dive in!

Table of contents:

1. What is undefined in JavaScript?
2. What is not defined in JavaScript?
3. Difference between undefined and not defined in Javascript

What is undefined in JavaScript?

In JavaScript, "undefined" is a basic type of data that shows when a variable has been declared but doesn't have a value yet. This happens in a few situations:

• When a variable is declared, the value is not initialized.

• When a function does not specify a return value.

• When trying to access the property of a non-existent object.

For example

// When a variable is declared but not initialized.
let x;
console.log(x); // Output: undefined

// When a function does not specify a return value.
function foo() { }
console.log(foo()); // Output: undefined

// When trying to access the property of a non-existent object.
let obj = {};
console.log(obj.nonExistentProperty); // Output: undefined

In each of these cases, the result is 'undefined.' This means no specific value is assigned.

What is not defined in JavaScript?

In JavaScript, "not defined" simply means that you're trying to use something (like a variable, function, or object property) that has not been declared in your code. It's essentially an indication that JavaScript doesn't recognize what you're referring to because it hasn't been explicitly created or defined beforehand.

It often occurs when you mistype a variable name, forget to declare it with var, let, or const, or when you try to access a property of an object that doesn't exist.

Example:

console.log(myVariable); // ReferenceError: myVariable is not defined

In the above piece of code, the variable myVariable is used without being set up with var, let, or const, which causes a ReferenceError, because myVariable hasn't been defined anywhere in the code.

Example:

function bar() {
    console.log(mySecondVaribale);
}
bar(); // ReferenceError: mySecondVaribale is not defined

Similarly, within the function bar(), mySecondVariable is referenced without being declared, resulting in another ReferenceError since it is not defined within the function's scope or anywhere else in the code. 

In the examples provided above, both cases result in a 'ReferenceError: not defined' because the variables have not been declared or defined anywhere within the code.

Difference between undefined and not defined in Javascript

If you still have confusion about the difference between undefined and not-defined in Javascript then I will show you a code example so you can easily understand just by seeing the example.

When we assign a value to a variable and then attempt to access it before it's declared, we encounter an 'undefined' output.

console.log(age); // undefined
var age = 21;

In JavaScript, if you define a variable and try to access its value just before that variable is declared, you'll often encounter an "undefined" result. This happens due to a process called variable hoisting. In JavaScript, code is executed from top to bottom, so when attempting to access a variable's value before it's declared, JavaScript doesn't yet know what the value is. This leads to the "undefined" outcome. However, if you access the variable just after it's declared, JavaScript will recognize its value correctly, and you'll get the expected result instead of "undefined".

// Trying to access 'age' before it's declared
console.log(age); // undefined

// Declaring and setting 'age' to 21
var age = 21;

// Logging the value of 'age' after it's declared and assigned
console.log(age); // 21

// Attempting to access 'city', which is not declared
console.log(city); // ReferenceError: city is not defined

Undefined: When a variable is declared but not assigned a value, or when a variable is accessed before its value is set, it has a value of "undefined". In the code snippet provided, the variable age is accessed before it's declared and assigned a value, resulting in undefined being logged to the console.

Not Defined: This occurs when you try to use a variable or identifier that has not been declared or defined anywhere in your code. In the above code, the variable city is attempted to be accessed without being declared or defined earlier, which leads to a ReferenceError stating that the city is not defined.

In short, "undefined" refers to a declared variable without any defined value in that variable, while "not defined" indicates an attempt to use an undeclared variable in the code.

Undefined VS Not defined

Conclusion

Knowing the contrast between "undefined" and "not defined" in JavaScript is key to coding effectively. "Undefined" refers to a declared variable without a value, while "not defined" occurs when trying to use an undeclared variable.

If you have any questions regarding this article or any other web development, you can ask them in the question box below, and you will get the answer ASAP!