This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "typeof" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

The typeof keyword is useful for determining the type of a construct. However the results can occasionally be unexpected. Alexis explains how typeof is evaluated and runs through a few examples.

Get Unlimited Access Now

Transcript from the "typeof" Lesson

>> [MUSIC]

>> Alexis Abril: Typeof, so because JavaScript is weakly typed, we do sometimes need to figure out what we're working with for checking arguments. We wanna validate inputs, things like that. We do have a couple of key words or reserve words to help us out. Typeof is one of these. But it can get a little weird as well.

[00:00:27] So, here is a basic table of a few things that we would expect and a couple things we wouldn't expect. Typeof undefined. This is our unreferenced pointer that we have set up. Undefined will be undefined. That's fairly straightforward and expected. Typeof null will return object that is really weird and unexpected.

[00:00:53] Typeof Boolean, number, those are expected. Not a number, this answers that question earlier as well. If you say typeof not a number, that's gonna return a number which not a number returning number by the English definition is a contradiction. Strings will be strings, functions will be functions, even though functions inherit from objects.

[00:01:18] Functions are the special case in JavaScript. Arrays will be objects. What's funny is typeof array being object is out of this whole table. Out of any applications I've worked on, typeof array equals object as a condition like I wanna make sure an array is an array. That's probably the biggest offender in applications I've seen, like this if statement is wrong, it's not gonna be what you expect.

[00:01:46] But out of any of the weird items in this graph, that one makes the most sense to me for some reason. Let me show you, let's talk about what an array looks like. We'll adhoc here in memory, I need to pop up an IDE for you. So, we think of arrays really as this, very simple kind of set up.

[00:02:11] We can make this giant. This is our basic array. I'm gonna use letters instead of numbers, cuz this is gonna get weird, a, b, c. This is our basic array set up. But when we say typeof array and this returns object, that's a little weird when we say it aloud, but let's think about what an array actually looks like in memory.

[00:02:38] So the array construct is just a nice obstruction for us to handle this kind of concept. What it really looks like in memory, is something more like this.
>> Alexis Abril: And then we have some stuff like the length.
>> Alexis Abril: And then we have the really.
>> Alexis Abril: Way up the proto chain we have stuff like, really way up the proto chain.

>> Alexis Abril: Slice. Actually this will be, if you wanna get technical.
>> Alexis Abril: There we go. You can think of an array as looking something like this. And array is just a hash, it just happens to have the keys are just gonna be integers or numbers, zero, one, two, three.

[00:03:47] Those are the indexes of the array, and those indexes are gonna point to what values we actually have in the array. And then we get a bunch of helper methods and properties like the length. We walk up our proto chain, and we're gonna talk about what that means here in a minute.

[00:04:00] And to get a bunch of helper methods like slice and splice and all those push and pop. And you keep walking up proto chain til it gets to the base object, and you're gonna have stuff like toString like the base toString method. This is what an array really starts to look like.

[00:04:15] So when I say typeof array equals an object, and like, that makes sense, it inherits from object. So typeof is always gonna return.
>> Alexis Abril: A way I think of it is typeof is always gonna return the most base type except for functions. Typeof function will return function, that's the special case.

[00:04:41] So, if you have typeof and you have a custom constructed object that you've made, typeof that object will be object. Regardless of how many wherever you inherited that from, etc. This-
>> Speaker 2: For the most part, it's returning that hidden type.
>> Alexis Abril: Yes, yes. [LAUGH] Sorry. So we're gonna talk about that when we have a debugger here open in a second too.

[00:05:08] So, does that make sense? So if you really wanna check if an array is an array. There's a couple other key words, and we're gonna get to those here in a second too [LAUGH]. I don't wanna jump too far ahead. Any other object? Yes, go ahead.
>> Speaker 3: Isn't everything in JavaScript considered an object?

>> Alexis Abril: So, that is a really commonly way to think of things now, it's really a popular way to think. Everything is an object, if you have a string, you have methods on the string. I prefer to think of everything in JavaScript as from my perspective, I would say everything in JavaScript is a pointer.

[00:05:42] Cuz everything you're working with is actually just a pointer referencing something else in memory. You do have things like a method on a string. That's not the same as creating a new string. Like if you use the capital S string construct. That's gonna return a little something different.

[00:06:03] So I prefer to think at a very, very base level everything as a pointer, cuz that's really what you're working with. You're working with a bunch of var some things that are pointing to something else in memory. The pointer itself is not an object. Does that makes sense?

>> Speaker 3: Yeah.
>> Alexis Abril: That's the way I like to think about things. Good question though, good question.