JavaScript type checking with typeof operator

This video covers what all built-in types exist in JavaScript and how to perform type checking on those data types.

Code

let name = "Deeksha"
typeof name
typeof name === "string"


name = undefined
typeof name
typeof name === "undefined"


name = Symbol()
typeof name
typeof name === "symbol"


let isEmpty = true
typeof isEmpty
typeof === "boolean"


let salary = 1000
typeof salary
typeof salary === "number"


salary = 1000.14
typeof salary


let bigInteger = 8007199267890991n;
typeof bigInteger


let user = {id: 123, name: "Deeksha"}
typeof user

Full Transcript

00:00 Hi everyone. It's Deeksha Sharma from bonsaiilabs. Welcome to the series on JavaScript. This video focusses on how to do the type checking on the built-in data types in JavaScript. JavaScript provide these primitive data types out of the box including Boolean, BigInt, Null, String, Undefined, Number and Symbol. Primitives are the values are the lowest level of the language implementation. There is nothing smaller than a primitive value. JavaScript also provides another built in type called object which is non primitive. An object is a collection of properties where each property represents a key value pair. The interesting part with primitive types is their immutability, which means their value once assigned cannot be changed or altered. The variables may be assigned a different value, but the value itself cannot be changed. Now this is not true with objects which are mutable. We can always add or remove properties from an object.

00:52 Now that we know a little bit about built in types in JavaScript, let's perform some type checking. JavaScript has a typeof operator to which when we pass an expression that either represents an object or a primitive, returns it's type. Let's take an example. We have a user cheezy22 to check if cheezy22 is in fact a string. We write this code type of user with a strict equal string. Now strict equality is a separate topic in JavaScript, which I will cover in the future videos, but for now it is used to check if the type of value stored in a user variable is string and it returns true. If you noticed, I mentioned the type of value inside a user variable. The reason I explicitly mentioned it, because variables do not have types, the value stored inside the variables have types and the type of operator returns the type of that value.

01:40 Now similarly we can check the type of Boolean values, big integers, an undefined value, numbers which include integers and non integers. And by the way, from the numeric side, JavaScript recognize integers and floating points as numbers. Then we can check the type of string values, objects and even symbols. Symbols were added in ES6, they provide unique IDs to prevent collisions of keys in objects. But again, it's a separate topic in JavaScript, like many others. Now I'm sure you're wondering, we tried all other types but not the, null, let's do that now. Ideally , we should be able to check the type of null the same way we did for other types, right? Apparently that's not the case. It returned false. What is the type of null then? Let's log the result of type of null. It's an object. Interesting! now you must be thinking if the type of null is an object and the type of object is also an object.

02:38 How the heck do I make a difference between both and first thing.. Why that is the case? Let's answer the second question on why type of both result in an object. This was an original bug in JavaScript that existed for many, many years so you can imagine fixing that bug would have broken a lot of other stuff on the internet, but there is a way to check if the value is exactly null. Let's look at that. Let's say we have a variable name with value null. Now to check if name is null, we can apply, ! operator on name variable and also check that its type is an object Both these conditions are sufficient to check that the name is in fact null. A shorthand of the above code is this which directly checks the value of name using null keyword. The only difference between previous check and this one is null should not be enclosed in quotes because it's a reserved keyword in JavaScript.

03:26 Whereas that's not the case while checking types other than null. Now let's try it. Some examples on browser console. Let's say name is equals to Deeksha and we want to check what's the type of name? It gives us string and we can do an equality check using triple equals typeof name and check if it's string. It is true. Now let's try out an example for user which is undefined and we can check if typeof user is undefined. It is. We can also do an equality check using triple equals and it's also going to return true. Let's say we reassign a value symbol to variable user and this is how we create symbol with a parentheses and if we check the type of user, now it's going to return symbol. To check boolean, let's say we have a variable isEmpty true and if we check typeof isEmpty, it's going to return boolean.

04:22 It's time to play with some numbers. Let's say we have a salary variable which has a value of 1000 and if we type in typeof salary, it returns number. Now let's say salary is equals to 1000.14, we have two decimal places and now if he want to check if typeof salary, what's the type of salary? It says number. That's because JavaScript do not have different types for integers and non-integers. Every numeric value is of type number. Now it's time to try out a big integer. Let me copy and paste a value of big integer and there you go! And check the type of big integer it returns bigint. Now object is something you will deal with more frequently in JavaScript. Let's say we have a customer with id 122 and it has a name say bonsai.

05:22 And if we want to use typeof operator to get the type of customer it returns object, what if I reassign customer variable a value null and check the type of customer now? It's going to return an object. So there is essentially no difference between a customer object which is not null and an object which is null, but thankfully we know how to check for nulls and so we check if customer is falsy, which is !customer and typeof customer is an object. And if that is the case, that means the value is null. So this is going to return true and there you go. Alternately, we can also check if customer is null using the null keyword and it returns true. That's all I wanted to cover in this video. I hope you got an idea on how type checking works in JavaScript. Thanks for watching the video and feel free to drop comments. If you have any questions on this topic, be sure to subscribe. If you want more of these byte sized focussed videos every week until then, keep learning and share your knowledge.