All About JavaScript Data Types: JavaScript TypeOf Explained

Every item in the world is classified and belongs to a specific type. Data in JavaScript is also classified into different categories, which can be identified using JavaScript typeOf operator.

In this tutorial, you'll learn all you need to know about JavaScript data types: what kinds there are, what's their purpose and usage. You'll learn to define what type in JavaScript is a number, word, or a function. Moreover, you'll learn how to include them into your code.

JavaScript Data Types: Main Tips

• There are a few different data types in JavaScript: numbers, strings, booleans, objects, and arrays.
• JavaScript data types are an important concept in programming. Lots of programming languages use classification for a better coding experience and bug-free code.
• For the program to know how to treat a variable, it must know its data type.
• Data type can be identified using JavaScript typeOf operator.

Declaration and Usage

In the example below, you can see the three most popular JavaScript types of data: number, string, and an object. These are treated differently by the program - numbers are shown as a number, strings are presented as words, and objects are seen as functions that come to reality. They return the value created in the function:

var year = 2016; // Number
var firstName = "Wilson"; // String
var person = {name:"Wilson", age:"old"}; // Object

Without distinct data types, JavaScript would have a problem adding two values together. Let's examine the example below:

var xyz = "Audi" + 50;

When you're adding a number to a string, the system sees the number as a string as well. Therefore, JavaScript will treat the example above the same as the one below:

var xyz = "Audi" + "50";

JavaScript uses dynamic data types. That means that you do not need to define a data type for a new variable specifically. One variable can hold a few JavaScript data types:

var xyz; // The variable does not have a data type
var xyz = 44; // Now "xyz" is a Number
var xyz = "Bob"; // Now "xyz" is a String

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Types Explained

In this chapter, we will explain to you each data type in detail. This way, you'll get a better understanding of what they represent and how to use them. Understanding the differences will let you avoid running into rookie mistakes.

Examples will follow each explanation. Don't hesitate to open them in the code editor and play around by clicking the Try it Live button!

Strings

Strings are JavaScript data types that hold information in text. They are encapsulated with quotes (unlike numbers, which do not need them). Both double and single quotes are accepted, but be careful and do not mix the two in one string!

var car = "Audi 80";   // double quotes  
var car = 'Audi 80';   // single quotes

You might encounter a situation when you want to use quotes inside of a string. For that, you should use different quotes than the ones which define the string - look at the example below to see how it's done:

var text = "It's sunny outside";      // Single quote inside double quotes  
var text = "It is called 'Audi'";     // Single quotes inside double quotes  
var text = 'It is called "Audi"';     // Double quotes inside single quotes

Numbers

JavaScript numbers can be written with or without decimals. As we already covered, they should never be written within quotes - otherwise, it will be read as strings.

var x = 4.00;     // Written with decimals  
var y = 44;       // Written without decimals

However, with extremely large or small numbers, you can use scientific (exponential) notation:

var y = 483e5;      // 12300000  
var z = 483e-5;     // 0.00123

Objects

One of JavaScript types of data are objects which are defined with curly braces. The object type must have a property and a value: they are written in propertyName:value pairs.

The example below creates an object called human that has four properties:

var human = {
  firstName: "Bob", 
  lastName: "White", 
  age: 44, 
  eyeColor: "brown"
};

Booleans

A boolean is a data type that can have only on of two possible values: true or false. This is one of the JavaScript data types that is often used in conditional testing of code:

var xyz = true;  
var xyz = false;

Arrays

JavaScript arrays are defined with square brackets. Arrays are one of those JavaScript data types that are commonly used with variables. Array items are normally separated with commas. The example below creates an array with three elements:

var cars = ["Audi", "Mazda", "Volvo"];

Note: The first element of the array is always indexed as 0.

undefined and NULL

There are two more values we should discuss, as they tend to puzzle beginners. What's the difference between undefined and NULL, you might ask? Don't they both simply mean the absence of a value?

Well, not exactly.

If a variable does not have a value, JavaScript automatically sets it as undefined. In the example below, the variable has a name but does not have a value assigned. Without the value, we do not know what is the type of this variable, which makes it undefined. If you use JavaScript typeOf operator on an undefined JavaScript variable, the program will return undefined only:

var human;   // Value is undefined, type is undefined

Now, JavaScript null also means nothing. The difference is that even though it has no value, it is considered to be an object. You can clear an object by setting it to JavaScript null. This also means that using typeOf JavaScript operator will identify this variable as an object:

var  human = null;   // Value is null, but type is still an object

On the other hand, you can also clear out an object by setting it to undefined. In this case, it loses both its value and type. This means that using JavaScript typeOf operator will identify it not as an object but undefined JavaScript variable:

var  human = undefined;   // Value is undefined, type is undefined

JavaScript Data Types: Summary

• There are a few JavaScript types of data, which serve a different purpose in the code.
• It is essential to use the correct syntax for data types so the browser understands your code.
• You can use JavaScript typeOf operator to check what type of JavaScript data something is.