JavaScript undefined and null: Let’s talk about it one last time!

JavaScript undefined and null: Let’s talk about it one last time!:

 In JavaScript, undefined and null are very different from each other. However, there are only a few similarities that may confuse a beginner to the language. This article aims to explain the similarities, differences, and usages with examples. Hope you find it useful.

What Is Undefined?

undefined typically means a variable has been declared but has not yet been assigned a value.

let author;
console.log(author); // prints, undefined
Enter fullscreen mode Exit fullscreen mode

In the above example, we have declared a variable author but haven’t assigned a value to it. Hence the variable author is undefined.

There is also a way to confirm it,

typeof(author); // prints "undefined"
Enter fullscreen mode Exit fullscreen mode

When you access non-existent object properties, you get an undefined.

let article = {'title': 'How to do something..'};

console.log(article.title); // prints, "How to do something.."
console.log(article.author); // prints, undefined
Enter fullscreen mode Exit fullscreen mode

Watch out for: ReferenceError

In the case of undefined, the variable must be declared. On the contrary, accessing a variable that’s not been declared will cause a ReferenceError.

console.log(rating);
Enter fullscreen mode Exit fullscreen mode

If you haven’t declared the rating variable and trying to access it like shown above, you will get an error,

⚠️ Confusion Alert: Please do not be confused with the phrase, is not defined in the above error message. As explained, it doesn’t mean undefined.

What Is Null?

null is an assignment value. You as a programmer may want to assign the value null to a variable. It simply means the value is blank or non-existent.

let author = null;
console.log(null); // prints, null
Enter fullscreen mode Exit fullscreen mode

Interestingly, when we use typeof to check the type of null, it returns “object”.

typeof(null); // prints, "object"
Enter fullscreen mode Exit fullscreen mode

⚠️ Confusion Alert: This can be confusing as null is a primitive value. This is probably one issue JavaScript is living with for a long now and we expect better reasoning for it.

Similarities

There are a couple of similarities between undefined and null.

  • They both are primitive values. JavaScript has 7 primitive values,
    1. Number
    2. String
    3. Symbol
    4. Boolean
    5. BigInt
    6. undefined
    7. null.

All other values in JavaScript are objects(yes, including functions and arrays).

  • They both are failsy values.

A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.

In JavaScript, there are 6 falsy values including undefined and null,

  1. false
  2. 0
  3. “”(empty string)
  4. NaN
  5. undefined
  6. null

Differences

Apart from the similarities mentioned above, undefined and null are way apart from each other. They are strictly not equal,

(undefined === null) // returns, false
(undefined !== null) // returns true
Enter fullscreen mode Exit fullscreen mode

⚠️ Confusion Alert: However, they are loosely equal. Loose equality is performed using the == operator which compares two values after converting them to a common type. You should try avoiding it.

(undefined == null) // returns, true
Enter fullscreen mode Exit fullscreen mode

Just remember, undefined means no value assigned for a declared variable. Whereas, null itself is a value that can be assigned to a variable, and null signifies an empty/blank value.

How To Check For Undefined And Null?

Use the strict equality operator(===) to check if a variable is undefined or has a null value

let author ;

if (author === undefined) {
 console.log(`author is undefined`);
} else {
 // Do something
}
Enter fullscreen mode Exit fullscreen mode

Similarly, for null,

let author = null ;

if (author === null) {
 console.log(`The value of author is null`);
} else {
 // Do something
}
Enter fullscreen mode Exit fullscreen mode

As both undefined and null are falsy values, you can do this as well. It will match both undefined and null.

if (!author) {
 // Do something
}
Enter fullscreen mode Exit fullscreen mode

Usage Cheatsheet: Undefined And Null

With the understanding, we have so far, here is the cheat-sheet for using undefined and null,

// Declared age but not assigned any value to it
let age;

// Right way to check
age === null;  // returns, false
age === undefined;  // returns, true

// Don't use this 
age == null;  // returns, true 
age == undefined;  // returns, true



// Declared name and assigned a null value
let name = null;

// Right way to check
name === null;  // returns, true 
name === undefined;  // returns, false 

// Don't use this 
name == null;  // returns, true
name == undefined;  // returns, true 

// type checking
typeof  age;  // 'undefined'
typeof name;  // 'object'

// Create an object with one property where key is x and value is null
let obj = {x: null};

obj.x === null;   // true
obj.x === undefined;   // false
obj.y === null;  // false
obj.y === undefined;  // true


// Not possible
null = 'abcd';
// Possible, but don't do it
undefined = 'abcd';

Enter fullscreen mode Exit fullscreen mode

In Summary

To summarize,

  • undefined and null are primitive values and they represent falsy values. All the similarities between undefined and null end here.
  • undefined value is typically set by the JavaScript engine when a variable is declared but not assigned with any values.
  • null value is typically set by programmers when they want to assign an empty/blank value.
  • undefined and null are strictly not equal(!==).
  • If you try to access the value of a variable that is not even declared, it will result in a ReferenceError.

from Tumblr https://generouspiratequeen.tumblr.com/post/634475606643474432

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s