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.
Contents
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
typeOfoperator.
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"}; // ObjectWithout distinct data types, JavaScript would have a problem adding two values together. Let's examine the example below:
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:
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 StringTypes 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 quotesYou 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 quotesNumbers
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 decimalsHowever, with extremely large or small numbers, you can use scientific (exponential) notation:
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:
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:
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:
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 objectOn 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 undefinedJavaScript 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.