JavaScript Data Types

Today, we are going to expand the comparison of data structures and data types and try to understand what data types are.
If you have not already, make sure to read about the difference between data types and data structures for a basic understanding.

There are 8 main JavaScript data types most of which you might have heard already if you have just started learning JavaScript:

• String
• Number
• Boolean
• Null
• Undefined
• Bigint
• Symbol
• Object


The object itself also contains the following data types:

• Array
• Object
• Date

Fun fact: JavaScript is a dynamic language with dynamic data types because variable types are not defined in advance. Types are defined at the moment variables are assigned the value. Types can dynamically change, depending on which value they are assigned. JavaScript is also called a weakly typed language because it can implicitly change type when we do math operations with mismatched types, e.g. string plus number.

String



A string is a data type that stores any type of text inside quotes. Quotes can be double or single, depending on your preference. The only thing you need to be attentive to is that if you use double quotes but then need to use quotes inside the string, use a different quote. In other words, if you use a double quote outside, use the single quote inside. If you use a single quote outside, use the double quote inside.

Number

A number is a number data type, simple as that. It can be any number as long as it’s not inside the quotes. If the number is in quotes it becomes a string. Compared to other languages, JavaScript doesn’t define what type of number it is, e.g. integer. Finally, numbers are stored in 64 bits and have some limits with large numbers. We can do any math operations with numbers in JavaScript as long as both data types are numbers.

Bigint

Bigint is a data type introduced in JavaScript that stores larger numbers - the numbers that the number data type cannot hold. You can do math operations with the Bigint data type just like you can with numbers. However, you are not allowed to do math operations by mixing them both due to type differences. Finally, you can place large numbers in a string as well.

Null

Null is one of the data types which doesn't save values, it's a value itself. The actual type of null is an object because it is returned when an object is missing. There can be a situation when an object cannot be created and we return null as a replacement or an indication that there should have been an object. In other words, it is used to show the intentionally absent value. Let’s say you received an iPhone box from a friend who wants to prank you. He intentionally didn’t place the phone inside the box and it’s empty - so he placed null instead. We do the same sometimes when we intentionally want to return an empty value. In general, null is not always the best option to use however right now it’s important to understand what it is.

Undefined

When you start learning null and undefined for the first time, they might sound a bit confusing due to their similarity! Undefined value cannot be changed and it’s a value itself. Just like null. It occurs when we declare a variable but do not assign any value to it. Let's say you created a variable with no value, e.g. let someVar, and later unsuccessfully saved value. If you try to access this value, it will return undefined. The definition was not given to the variable, you only named it and didn’t save values inside it. The main difference between undefined and null is that null is a missing object and undefined is a state we did not initiate.

Boolean

A boolean data type can have only two values - true or false. It can have only one or another, it cannot have anything else and it cannot be both. It’s one of the best things you can use in programming. The boolean helps to create functionalities that have two possibilities - yes or no, on or off, and so on. We can use it in many different situations, like comparing data types to each other. Let’s say you want to make a math operation and want to make sure both values are numbers. You can check if typeof some value equals the number, for example, and if it does, it will return true. If not, it will return false. That way, you can build a simple logic that if it’s true then continue the math operation, and if not then do something else. You compare values and then make conditional decisions.

Symbol

A symbol is a function that creates a unique value. You can save the Symbol() function inside a variable and add an optional description as a string. If you pass the same strings, it will create unique values anyway. Symbol value cannot be changed either. It’s often used when we want to create unique object keys and avoid the creation of duplicates, for example.

Object

Objects in JavaScript are almost the same as real-life objects. For example, an object can be your computer. It has different properties like color, screen size, and many methods like browsing the internet. Computers can vary, for example, they can have a different operating system, like macOS or Linux. Just like other data types, objects can contain various values. The values are written in key-value pairs saved inside curly braces. These key-value pairs are called properties of objects. Functions which are also properties are called methods.

Arrays

An array is a type of object which have a slightly different structure. In arrays, you can create a list of items however it doesn’t have the key-value pairs like in objects. An array can hold a lot of values in one box. Let’s say you want to organize your closet and place clothes in boxes that have color names. So you have a box called white, then orange and black. You put clothes in each box according to the color. Arrays are the easier way to create a grouped list of items that you can manipulate. You can add items, remove them, change positions, and so on!

Date

Date is also another type of object that holds a date value, you guessed it! The date is created using a constructor new Date() and has to be saved in a variable for later use. The date saved is not going to update itself and it’s static. You can actually create a date in many ways depending on what values you add. If you simply use new Date() it will create the current date and time. You can also add a date string and it will create an object. Or you can add parameters in a specific order - year, month, day, hours, and so on.

What is the typeof operator?

While working with so many different data types, you might not always know what data type you receive as a result. JavaScript is a dynamically typed language which means that data types can be dynamic. When you create a variable in JavaScript, you don't have to write in advance which data type this variable will be. The type of data will be determined the moment you write the data. For example, if you want to create a variable myName, you don't have to explain anywhere that this variable is going to be a string, that's why you can even use a number and JavaScirpt will not know whether you made a mistake. And that is exactly why, sometimes, the output is not exactly what we needed - so we might receive a number when we needed a string. 

The typeof operator is a great way to check the data type to determine exactly what you are working with. It always returns a string with a value of the data type. 

You can also use the typeof operator for different conditionals and execute code depending on the result. For example, you can check if the type of the data is not a number then throw some warning.

However, be aware that typeof is not always the best way to check data types as if you try to check an array or even null, it will return an object as both are treated as objects.

Conclusion

In conclusion, understanding data types is crucial in JavaScript. We have 8 main data types - String, Number, Boolean, Null, Undefined, Bigint, Symbol, and Object. Each of these data types has its own characteristics and uses. Understanding their differences can help you to make better use of them in the future. It's also important to note that JavaScript is a dynamic language, which means that the data type of a variable can change dynamically, and it's a weakly typed language as it can implicitly change type during math operations with mismatched types. To check the data type of a variable, we can use the typeof operator, however, it has some limitations, such as returning "object" for both arrays and null values. In summary, familiarizing yourself with the data types and their uses is key to mastering JavaScript.