• JavaScript Video Tutorials

JavaScript - Data Types

JavaScript Data Types

Data types in JavaScript referes to the types of the values that we are storing or working with. One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language.

JavaScript data types can be categorized as primitive and non-primitive (object). JavaScript (ES6 and higher) allows you to work with seven primitive data types −

  • Strings of text e.g. "This text string" etc.
  • Numbers, eg. 123, 120.50 etc.
  • Boolean e.g. true or false.
  • null
  • undefined
  • BigInt
  • Symbol

BigInt and Symbol are introduced in ES6. In ES5, there were only five primitive data types.

In addition to these primitive data types, JavaScript supports a composite data type known as object. We will cover objects in detail in a separate chapter.

The Object data type contains the 3 sub-data types −

  • Object
  • Array
  • Date

Why are data types important?

In any programming language, data types are important for operation manipulation.

For example, the below code generates the “1010” output.

let sum = "10" + 10;

Here, the JavaScript engine converts the second operand to a string and combines it using the '+' operator rather than adding them.

So, you need to ensure that the type of operands is correct.

Now, let's learn about each data type with examples.

JavaScript String

In JavaScript, the string is a sequence of characters and can be created using 3 different ways given below −

  • Using the single quote
  • Using the double quote
  • Using the backticks

Example

In the example below, we have created strings using single quotes, double quotes, and backticks. In the output, it prints the same result for all 3 strings.

<html>
<head>
   <title> JavaScript string </title>
</head>
<body>
   <script>
      let str1 = "Hello World!"; // Using double quotes
      let str2 = 'Hello World!'; // Using single quotes
      let str3 = `Hello World!`; // Using backticks
      document.write(str1 + "<br>");
      document.write(str2 + "<br>");
      document.write(str3 + "<br>");
   </script>
</body>
</html>

JavaScript Number

A JavaScript number is always stored as a floating-point value (decimal number).

JavaScript does not make a distinction between integer values and floating-point values.

JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

Example

In the example below, we demonstrate JavaScript numbers with and without decimal points.

<html>
<head>
   <title> JavaScript number </title>
</head>
<body>
   <script>
      let num1 = 10; // Integer
      let num2 = 10.22; // Floating point number
      document.write("The value of num1 is " + num1 + "<br/>");
      document.write("The value of num2 is " + num2);
   </script>
</body>
</html>

Example (Exponential notation of numbers)

JavaScript also support exponential notaion of numbers. We have explained this in the below example code −

<html>
<head>
   <title> JavaScript number Exponential notation </title>
</head>
<body>
   <script>
      let num1 = 98e4;    // 980000
      let num2 = 98e-4;   // 0.0098
      document.write("The value of num1 is: " + num1 + "<br/>");
      document.write("The value of num2 is: " + num2);
   </script>
</body>
</html>

JavaScript Boolean

In JavaScript, the Boolean data type has only two values: true or false.

<html>
<head>
   <title> JavaScript Boolean </title>
</head>
<body>
   <script>
      let bool1 = true;
      let bool2 = false;
      document.write("The value of the bool1 is " + bool1 + "<br/>");
      document.write("The value of the bool2 is " + bool2 + "<br/>");
   </script>
</body>
</html>

JavaScript Undefined

When you declare a variable but don't initialize it, it contains an undefined value. However, you can manually assign an undefined value to the variable also.

<html>
<head>
   <title> JavaScript Undefined </title>
</head>
<body>
   <script>
      let houseNo; // Contains undefined value
      let apartment = "Ajay";
      apartment = undefined; // Assigning the undefined value
      document.write("The value of the house No is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript Null

When any variable's value is unknown, you can use the null. It is good practice to use the null for the empty or unknown value rather than the undefined one.

<html>
<head>
   <title> JavaScript null </title>
</head>
<body>
   <script>
      let houseNo = null; // Unknown house number
      let apartment = "B-2";
      appartment = null; // Updating the value to null
      document.write("The value of the houseNo is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript Bigint

JavaScript stores only 64-bit long floating point numbers. If you want to store a very large number, you should use the Bigint. You can create Bigint by appending n to the end of the number. 

<html>
<head>
   <title> JavaScript Bigint </title>
</head>
<body>
   <script>
      let largeNum = 1245646564515635412348923448234842842343546576876789n;
      document.write("The value of the largeNum is " + largeNum + "<br/>");
   </script>
</body>
</html>

JavaScript Symbol

The Symbol data type is introduced in the ES6 version of JavaScript. It is used to create unique primitive, and immutable values.

The Symbol() constructor can be used to create a unique symbol, and you may pass the string as a parameter of the Symbol() constructor.

Example

In the example below, we created the sym1 and sym2 symbols for the same string. After that, we compared the value of sym1 and sym2, and it gave a false output. It means both symbols are unique.

<html>
<head>
   <title> JavaScript Symbol </title>
</head>
<body>
   <script>
      let sym1 = Symbol("123");
      let sym2 = Symbol("123");
      let res = sym1 === sym2;
      document.write("Is sym1 and Sym2 are same? " + res + "<br/>");
   </script>
</body>
</html>

JavaScript Object

In JavaScript, the object data type allows us to store the collection of the data in the key-value format. There are multiple ways to define the object, which we will see in the Objects chapter.

Here, we will create an object using the object literals.

Example

In the example below, we used the '{}' (Object literals) to create an obj object. The object contains the 'animal' property with the string value, the 'legs' property with the number value, and the value of the 'color' variable is assigned to the 'hourseColor' property.

The JSON.stringify() method converts the object to strings and shows it in the output.

<html>
<head>
   <title> JavaScript Object </title>
</head>
<body>
   <script>
      let color = "Brown";
      const obj = {
         animal: "Hourse",
         legs: 4,
         hourseColor: color
      }
      document.write("The given object is: " + JSON.stringify(obj) + "<br/>");
   </script>
</body>
</html>

JavaScript Array

In JavaScript, the array is a list of elements of the different data types. You can create an array using two square brackets '[]' and insert multiple comma seprated values inside the array.

<html>
<head>
   <title> JavaScript Array </title>
</head>
<body>
   <script>
      const colors = ["Brown", "red", "pink", "Yellow", "Blue"];
      document.write("The given array is: " + colors + "<br/>");
   </script>
</body>
</html>

JavaScript Date

You can use the JavaScript Date object to manipulate the date.

Example

In the example below, we used the Date() constructor to create a date. In the output, you can see the current date and time according to your time zone.

<html>
<head>
   <title> JavaScript Date </title>
</head>
<body>
   <script>
      let date = new Date();
      document.write("The today's date and time is: " + date + "<br/>");
   </script>
</body>
</html>

Dynamic Types

JavaScript is a dynamically typed language like Python and Ruby. So, it decides the variable's data type at the runtime but not at the compile time. We can initialize or reassign the value of any data type to the JavaScript variables.

Example

In the example below, we initialized the first variable with the string value. After that, we updated its values to the number and boolean value.

<html>
<head>
   <title> JavaScript dynamic data type </title>
</head>
<body>
   <script>
      let first = "One"; // it is string
      first = 1; // now it's Number
      document.write("The value of the first variable is " + first + "<br/>");
      first = true; // now it's Boolean
      document.write("The value of the first variable is " + first + "<br/>");
   </script>
</body>
</html>

Checking Data Types Using the typeof Operator

The typeof operator allows you to check the type of the variable.

Example

In the below example, we used the typeof operator to check the data type of the various variables.

<html>
<head>
   <title> typeof operator </title>
</head>
<body>
   <script>
      let num = 30;
      let str = "Hello";
      let bool = true;
      document.write("The data type of num is: " + typeof num + "<br/>");
      document.write("The data type of str is: " + typeof str + "<br/>");
      document.write("The data type of bool is: " + typeof bool + "<br/>");
   </script>
</body>
</html>
Advertisements