JavaScript Data Types - Primitive and Non-Primitive
JavaScript Data types are used to specify the 'type' of value stored by a variable like integer, character,etc..
Types of DataTypes in JavaScript
There are two types of Data Types in JavaScript:
- Primitive data type
- Non-Primitive data type
JavaScript is a dynamic language, i.e. there is no need to specify the 'type' of the variable because it is dynamically(automatically) used by JavaScript engine. You just need to use var to specify the data type. It can hold any type of values such as numbers, strings, boolean, etc.
Syntax:
var a = 40; //hold Numaric values
var b = "Rahul"; //hold string
JavaScript Primitive Data Types
JavaScript Primitive data types can hold only one value at a time.
There are 3 types of primitive data types in JavaScript:
| Data Type |
Description |
| Number |
Represents numeric values e.g. 10. |
| String |
represents sequence of characters e.g. "Hello". |
| Boolean |
Represents boolean value either True or False. |
JavaScript Number Data Type
JavaScript number data type is used to represent positive or negative numbers with or without decimal place.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Number DataType </title>
</head>
<body>
<script>
// Creating variables
var a = 25;
var b = 75.5;
var c = 4.25e+6;
var d = 4.25e-6;
// Printing variable values
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d);
</script>
</body>
</html>
Output
JavaScript Number DataType
The Number data type also includes some special values which are: Infinity, -Infinity and NaN(Not a number). Infinity represents the mathematical Infinity ∞, which is greater than any number. Infinity is the result of dividing a nonzero number by 0, as demonstrated below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Infinity & NAN Number DataType </title>
</head>
<body>
<script>
document.write(1.7976931348623157E+10308);
document.write("<br>");
document.write(-1.7976931348623157E+10308);
document.write("<br>");
document.write("Some text" / 2);
document.write("<br>");
document.write("Some text" / 2 + 10);
document.write("<br>");
document.write(Math.sqrt(-1));
document.write("<br>");
document.write(10/"text");
</script>
</body>
</html>
Output
JavaScript Infinity & NAN Number DataType
JavaScript String Data Type
The String data type can hold multiples characters in a sequence like "Ansh", "Roger".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript String DataType </title>
</head>
<body>
<script>
document.write( "CSS " + 3 + "<br>");
document.write( "HTML " + 5 + "<br>");
document.write( "Bootstrap " + 4 + "<br>");
</script>
</body>
</html>
Output
JavaScript String DataType Example
Note : When adding a number and a string, JavaScript will always treat the number as a string.
JavaScript Boolean Data Type
JavaScript Boolean data type can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Boolean DataType </title>
</head>
<body>
<script>
// Creating variables
var isPlaying = true; // Yes, I'm Playing
var isEating = false; // No, I'm not Eating
// Printing variable values
document.write(isPlaying + "<br>");
document.write(isEating);
</script>
</body>
</html>
Output
JavaScript Boolean DataType
Boolean values also come as a result of comparisons in a program. The following example compares two variables and shows the result in an alert dialog box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Compare Boolean DataType </title>
</head>
<body>
<script>
var a = 5, b = 10, c = 15;
document.write(b > a) // Output: True
document.write("<br>");
document.write(b > c) // Output: False
</script>
</body>
</html>
Output
JavaScript Compare Boolean DataType
JavaScript Non-Primitive Data Types
Non-Primitive data types are as follows:
| Datatypes |
Description |
| Object |
It is an instance through which we can access members. |
| Array |
Collection of Homogenious Elements. |
| RegExp |
Represents regular expression |
| Function |
Block of code. |
JavaScript Object Data Type
The object is a complex data type that allows you to store collections of data. An object contains properties, defined as a key-value pair. A property key (name) is always an identifier,
but the value can be of any data type, like strings, numbers, booleans, or complex data types like arrays, function and other objects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Datatype </title>
</head>
<body>
<script>
var greet = "Hello JavaScript"
// Print variable value in browser's console
document.write(greet);
</script>
</body>
</html>
Output
JavaScript Object Datatype
JavaScript Array Data Type
An array is a collection of multiple values in single a variable.
Each value (also called an element) has a numeric position, known as its index, and it may contain data of any data type. The array index starts from 0, so that the first array element is arr[0] not arr[1].
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Datatype </title>
</head>
<body>
<script>
// Creating arrays
var Laptops = ["Dell", "HP", "Microsoft Surface", "Xiaomi"];
var Smartphone = ["OnePlus", "Samsug", "Google Pixel"];
// Printing array values
document.write(Laptops[0] + "<br>"); // Output: Dell
document.write(Smartphone[2]); // Output: New Google Pixel
</script>
</body>
</html>
Output
JavaScript Array Datatype
Special Data Types
| Datatypes |
Description |
| Undefined |
Represents undefined value. |
| Null |
Represents null i.e. no value at all. |
JavaScript Undefined Data Type
If a variable has been declared, but has not been assigned a value, has the value undefined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Undefined Datatype </title>
</head>
<body>
<script>
// Creating variables
var a;
var b = "Hello JavaScript!"
// Printing variable values
document.write(a + "<br>");
document.write(b);
</script>
</body>
</html>
Output
JavaScript Undefined Datatype
JavaScript Null Data Type
This is another special data type that can have only one value-the null value. A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply 'null' nothing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Null Datatype </title>
</head>
<body>
<script>
var a = null;
document.write(a + "<br>"); // Print: null
var b = "Hello World!"
document.write(b + "<br>"); // Print: Hello World!
b = null;
document.write(b) // Print: null
</script>
</body>
</html>
Output
JavaScript Null Datatype Example