Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "typeof Operator" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle discusses the behavior of the typeof operator and focuses on cases that typically cause confusion.

Preview
Close

Transcript from the "typeof Operator" Lesson

[00:00:00]
>> Kyle Simpson: When we assign some value to a variable, or in the case of line 1 having assigned anything, that sort of defaults, then we use an operator like typeof as our first way of looking at that value and determining something about its identity, its kind, its type. And we're not asking what's the typeof the variable v, we're asking what is the typeof the value that is currently in v.

[00:00:24]
That's what line 2 says. What is the typeof the value that's currently in v? And you'll notice that on line 2 it returns the string undefined. Now that's interesting because essentially we can think of undefined as basically a default value. It's a value that exists when the vacuum of space has removed everything else.

[00:00:43]
When there is no other value, the value that you have is called the undefined value. And remember, there's an undefined type with one and only one value in it called undefined. So typeof is telling us v currently is undefined. It got initialized and it's undefined. And that, by the way, does not mean it doesn't have a value yet.

[00:01:03]
A lot of people think, undefined means doesn't have a value yet. The most appropriate way to think about it is, does not currently have a value. Because it's entirely plausible and possible, and often happens, that you have a variable or a property that has some value and then it goes back to the state of not having a value anymore.

[00:01:22]
You set it to undefined, you undefine it. That doesn't remove it. It doesn't delete it. It doesn't magically make it go away. It just takes it back to that state where the value that it's holding is undefined. Now, when I assign the string and say typeof v, I get quote string.

[00:01:39]
When I assign a number, I get quote number. You'll notice that all of these return values from the typeof operator are strings. That's critical and we'll see why later when we get into coercion, but it's critical for you to understand this is an operator that guarantees that it will always return a string.

[00:01:59]
And not only will it always return a string, it's essentially a short eNom list. There's only a very small subset of strings that it will ever return. And none of them are the empty string. None of them are these values that aren't strings like null or undefined. And I see this mistake all the time in blogs.

[00:02:17]
People will say typeof equal, equal undefined, without any quotes and that makes no sense whatsoever because the typeof operator literally cannot return that. Guess how I know. I read the spec. It does not return an undefined value, it always returns a string. And if the string is a predictable known list, then we've reduced the whole surface area of confusion of what could possibly come back from this.

[00:02:43]
We can predict its outcome much better.
>> Kyle Simpson: That'll be important later on. So typeof is returning strings that represent, hey, here's some clue as to what you can expect to be able to do with values of this particular kind of this particular type.
>> Kyle Simpson: Ergonomically, that's what we can then rely upon in our code.

[00:03:04]
We have something that is going to behave as a number. We have something that is going to behave as a string. You notice we don't have all the values like we don't have a typeof within an array to give us the word array. So it's just gonna give us back object because remember, arrays are subtypes of object.

[00:03:21]
So we're gonna need further distinguishing if we need to get into those subtypes, but at the top level we can distinguish roughly based on all of these. Now, I mentioned the null being on that list as special. You'll notice that when we say typeof v equals null, I'm sorry, when we say v equals null and typeof v, we get back quote object.

[00:03:43]
Now, this is a historical fact of JavaScript. As a matter of fact, in the current spec that exists at this moment, it still has a statement that was there from ES1 which essentially indicated to developers that if you wanted to unset a regular value, like a number, you would use undefined.

[00:04:05]
But if you wanted to unset an object reference, you would use null. And I think that's part of the historical reason for why typeof null returns object. But the real truth of the matter, I was tweeting about this years back, and the real truth of the matter is that it's just a bug.

[00:04:21]
It ought to have returned quote null to tell us that this a value of the type null. Unfortunately, it returns quote object, so you have to be a little bit more careful. You have to make sure, when you're doing a typeof check and it returns object, make sure that it's not accidentally the null, because then you're not gonna get an object but a null value.

[00:04:40]
And then we see function here. Remember, function is not an official type at the top level, in the most official sense. But it has its own return value here, the typeof operator returns as function. So it's useful that it returns to us function, but arrays, it doesn't. Arrays just returns object.

[00:05:01]
A lot of these are just, again, historical things about JavaScript. We can't fix them because if we fix them, we'd break a bunch of code. So rather than whine or complain about them, we should just learn them and work around them, okay? It's regrettable that you can't just say typeof, but there are other helpers in language, in particular, with respect to array, there's Array.isArray, and it'll tell you for sure or not whether you have an array.

[00:05:27]
So that's how we distinguish these primitive values with their types. We can use utilities like typeof and when we need a little bit more specifics, a little bit more nuance, we can use utilities like Array.isArray. They'll tell us something about the nature of the value which tells us what we can expect.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now