Difference between undefined, null and undeclared in JavaScript

Objects are the foundation of JavaScript and almost everything in JavaScript is considered as object

Lets understand difference between undefined, null and undeclared with examples.

Undefined

Undefined means variable or object property is declared but hasn’t been initialized or assigned any value.

Example of variable

let country;
console.log(country);

// Output → undefined

country = "India 🇮🇳";
console.log(country);

// Output → India 🇮🇳

In the above example, the country variable is only declared but no value is assigned to it. Later on, when we assign a value, it will no longer be of undefined type

Example of object property

let person = {
  firstName,
};
console.log(person);

// Output → {firstName: undefined}

console.log(person.firstName);

// Output → undefined

person.firstName = "Krishna 🙏";
console.log(person.firstName);

// Output → Krishna 🙏

Same here in the above example, person object is declared with one property firstName, but no value is assigned to it.

So when person object is logged to console it will log the whole object with all of its properties, methods and their respective values. But here, as we only have single property firstName whose value isn’t assigned yet.

So when we log value of person.firstName it will log null as it does not have any value with it.

Later on, when we assign a value to firstName, it will no longer be of undefined type

Null

Null means variable or object property is declared but hasn’t been initialized or assigned any value.

Example of a variable with a null value

let country = null;
console.log(country);
// Output → null

console.log(typeof country);
// Output → object

country = "India 🇮🇳";
console.log(country);
// Output → India 🇮🇳

console.log(typeof country);
// Output → string

In the above example, the country variable is declared and also initialized with null. Later on, when we assign a value, it will no longer be of an object type

Example of an object property with a null value

let person = {
  firstName: null,
};
console.log(person);
// Output → {firstName: null}

console.log(person.firstName);
// Output → null

console.log(typeof person.firstName);
// Output → object

person.firstName = "Krishna 🙏";
console.log(person.firstName);
// Output → Krishna 🙏

console.log(typeof person.firstName);
// Output → string

Same here in the above example, person object is declared with one property firstName and it has been initialized to null.

So when person object is logged to console it will log the whole object with all of its properties, methods and respective values. But as we only have one property firstName whose value is null.

So when we log value of person.firstName it will log null as a value.

Later on, when we assign a value to firstName, it will no longer be null or object type. Here we’ve assigned string so now it’s of string type.

Never leave variables undefined or undeclared. Always explicitly initialize them with a null value even if you’re are not planning to use them too early.

Undeclared

Undeclared means variable or object property is used but it hasn’t been declared yet.

Example of an undeclared variable

console.log(planet);
/* Output
  Uncaught ReferenceError: planet is not defined
    at <anonymous>:1:13
*/

console.log(typeof planet);
// Output → undefined

let planet = "Earth 🌏";
console.log(planet);
// Output → Earth 🌏

console.log(typeof planet);
// Output → string

In the above example, the planet variable is directly used without its declaration. Later on, when we assign a value, it will no longer be of undefined type

Example of an undeclared object

console.log(favourite);
/* Output
  Uncaught ReferenceError: planet is not defined
    at <anonymous>:1:13
*/

console.log(typeof favourite);
// Output → undefined

console.log(favourite.fruit);
// Output → undefined

let favourite = {
  fruit: "mango 🥭"
};

console.log(favourite);
// Output → object
// Output → {fruit: "mango 🥭"}

console.log(typeof favourite);
// Output → object

console.log(favourite.fruit);
// Output → mango

console.log(typeof favourite.fruit);
// Output → string

In the above example, favourite is used prior to its declaration.

So when favourite object is logged to console it will throw ReferenceError and typeof for it will give undefined.

So when we declare as object and initialize, it will work as regular object and will be no more of undefined type.

Never use variables prior to its declaration. Always declare and initialize them with a null value if you’re are not planning to use them too early.

Hope you learn something new. If this article was helpful, share it.

Happy coding