JavaScript `undefined`

let message;
console.log(message); // undefined

function noReturnValue() { }
console.log(noReturnValue()); // undefined

let obj = { name: 'John' };
console.log(obj.age); // undefined

function singleParameter(param) { console.log(param); }
singleParameter(); // undefined

console.log(typeof undefined); // 'undefined'

console.log(undefined === undefined); // true

console.log(message === undefined); // true

Check for `undefined` variables

if (typeof modernFeature === 'undefined') {
  console.log('modernFeature is undefined');
}

JavaScript `null`

const str = 'bob from bobbington';
console.log(str.match('ben')); // null

console.log(typeof null); // 'object'

const obj = {};
console.log(typeof obj); // 'object'

console.log(null === null); // true
console.log(obj === null); // false

An example with its practical application:

function getProfile(id) {
  if (id === 1) {
    return { name: 'John Doe' };
  } else if (id === 2) {
    return { name: 'Jane Doe' };
  } else {
    return null;
  }
}

getProfile(1);   // { name: 'John Doe' }
getProfile(2);   // { name: 'Jane Doe' }
getProfile(100); // null

Nullish

console.log(null == null); // true
console.log(undefined == null); // true

console.log(null == undefined); // true
console.log(undefined == undefined); // true

Collecting null and undefined collectively:

function capture(value) {
  if (value == null) {
    console.log('❌ null or undefined ❌');
  } else {
    console.log('✅ Everything else ✅');
  }
}

capture(null); // ❌ null or undefined ❌
capture(undefined); // ❌ null or undefined ❌

capture(0); // ✅ Everything else ✅
capture(''); // ✅ Everything else ✅ 
capture(false); // ✅ Everything else ✅ 
capture({}); // ✅ Everything else ✅
capture([]); // ✅ Everything else ✅

Excluding null and undefined:

function exclude(value) {
  if (value != null) {
    console.log('🤗 not null or undefined 🤗');
  } else {
    console.log('🚫 null or undefined 🚫');
  }
}

exclude(0); // 🤗 not null or undefined 🤗
exclude(''); // 🤗 not null or undefined 🤗
exclude(false); // 🤗 not null or undefined 🤗
exclude({}); // 🤗 not null or undefined 🤗

exclude(null); // 🚫 null or undefined 🚫
exclude(undefined); // 🚫 null or undefined 🚫

Transcript

00:00

N has been called the billion dollar mistake, and unfortunately JavaScript has made that mistake twice. So let's first start by looking at undefined. Undefined is something that the JavaScript run time returns when a value hasn't been initialized. For example, hey, we have a variable message and we haven't assigned it any value. So if you try to read it, the JavaScript run time will give us undefined. Similarly, for a function that does not have a return value, essentially no return has been initialized and therefore the JavaScript run time gives us undefined. There are lots of other places that undefined shows up as well. For example,

00:33

trying to read a property off of an object when that property hasn't been defined. Trying to read a parameter when that parameter hasn't been passed in, needless to say, it is a very fundamental value within JavaScript. The type of operator on an undefined value gives us the literal undefined, and undefined is exclusive. In this particular set, no other value will give us this particular string. Also, with strict equality, undefined is exclusively equal to undefined. So we can use this to check if a particular value is exclusively undefined. One thing that often trips up beginning Javas care developers is the fact that

01:07

if you want to check for the presence of some global module that you haven't declared yourself, you must do that by using the type of operator. We know that when we declare a variable, but we do not provide it any value, then it implicitly has the value undefined. And because at least a declaration for this variable exists, we can use it as you normally would. For example, you can use it to do a strictly quality check with undefined. And if you execute this particular piece of code, you can see that it works perfectly fine. You we see the log statement, however, for some variable that you haven't declared yourself, for example,

01:41

you want to use some built-in module that is only available on modern JavaScript runtimes. You first need to do a check using the type of operator. If you try to use the variable in any other way, for example, trying to do a strict equality with undefined, we might be using a variable that the runtime has no idea about and therefore it'll throw a reference error. So even though using the type of operator with a variable and then checking if the result of that type of operation is the string, undefined looks a bit verbose, that is the only way for checking the presence of a global variable within JavaScript.

02:15

JavaScript uses a null to intentionally devote a value that is not present. For example, if you ask a function for a current username, but there is no current user, then the function can return and explicit. Now, there are plenty of functions built into modern JavaScript that will return an explicit null to denote the absence of a result. For example, here we have a string bob from Bingington, and we use the string match function to check if there are any matches to Ben. Of course, there are none because it is just Bob by himself and therefore the runtime will return. Now,

02:47

one thing to be aware of with null is that the type of operator with null will actually return the string object. And this is problematic because whenever we have any object within JavaScript and use the type of operator, we get The string object. So the type of operator cannot be used to disambiguate null from other values. Fortunately, for us, only null is strictly equal to null, and that is the way to go. If you want to exclusively check if a particular value is null for null, triple equal to null will be true, and for everything else it'll be false. The developer guidance is that whenever you want to be explicit about something

03:21

not being present, prefer to use an explicit null over an explicit undefined. For example, hey, we have a get profile a P I that takes an id. If the ID is one, it returns John Doe. If the ID is due, it returns Jane Doe. And then for everything else, we want to specify that there is no profile, so we choose to return now, and because we have an explicit now, it is a lot less ambiguous for consumers because they can be guaranteed that hey, someone intentionally chose to return now. So they must be saying that this particular ID is not supported. Even though JS kept made the silly mistake of having two bottom types that is

03:55

null and undefined. It comes with an easy way to combine the two into a single concept officially called nulls. We've talked about loose equality or the double equals and how it is unreliable, and that is true, except when it comes to null and undefined within JavaScript, only null or undefined are loosely equal to null and only null or undefined are loosely equal to undefined. Anything else that you can think of, like any of the falsey values, they're not going to be loosely equal to null. Any of the falsey values are not going to be loosely equal to undefined. And similarly,

04:27

anything truthy is not going to be loosely equal to null or loosely equal to undefined Checking loosely equal to null or loosely equal to undefined are called knowledge checks within JavaScript, and it is conventional to use, loosely equal to null because of course it is less keystrokes. So within JavaScript, if you want to check if a value is knowledge that is, if it is null or undefined, we can do that easily with a double equals to null. This particular function will execute the if condition for null or undefined, and for everything else, it'll go into the else block. Memorize this double equal to null because you will see it in JavaScript code

05:00

all the time. This is the standard knowledge check. Just like we can use loose equality to check if a value is knowledge, we can use lose inequality to check if a value is not knowledge. So in this particular function, we lose the check if the value is not equal to null, and this will be true for everything other than defined, which means that within the F block we can be sure that the value is not going to be knowledge. And of course, this implies that within the F block, the value is exclusively knowledge not equal to null. That is loose. Equality with null is the standard way of excluding both null and undefined

05:33

without having to worry is it null or is it undefined. So even though null and undefined are two different types within JavaScripts when working with them in conditional logic, it is quite easy to deal with both consistently using knowledge and non knowledge checks. As always, thank you for joining me and I will see you in the next one.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

Concept of JavaScript Nullish and Unification

Subscription Required

JavaScript `undefined`

Check for `undefined` variables

JavaScript `null`

Nullish

Transcript

Professional Modern JavaScript

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

Concept of JavaScript Nullish and Unification

Subscription Required

JavaScript undefined

Check for undefined variables

JavaScript null

Nullish

Transcript

Professional Modern JavaScript

JavaScript `undefined`

Check for `undefined` variables

JavaScript `null`