All TutorialsCoursesEvents & Contests

Module

Data Types in JavaScript

Print in JavaScript

Variables in JavaScript

Data Types in JavaScript

Take Input in JavaScript

Comments in JavaScript

Modules

Data Types in JavaScript

By Mukul Latiyan

Updated on : 14 Oct 2022

15 mins read

Published on : 14 Oct 2022

Introduction to Data Types

In programming, the data types help us identify the types of data that are stored in a variable. For example,
let number = 32;

Here, the number variable stores a non-decimal number. In this case, the data type of this variable is an integer.

The idea is that if we want to make use of some variable, we must know what kind of data it stores.

For example, suppose we are adding variables of different types. Let's see what our code will look like.
let key = 10 + "Masai School"

Here, we are thinking about adding a number type variable with a string type.

Technically, it should cause an error, however, in JavaScript, this code runs completely fine.
let key = "10" + "Masai School"
console.log(key)

The above code results in 10Masai School because JavaScript variables are evaluated from left to right, hence the integer value 10 is converted to a string value "10". We will learn about what's happening here while exploring the type conversion topic.

Also, if we assign a particular type value to a variable, we can reassign the value of another data type to the same variable as well.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>

<body>
        <h1>Dynamic Typing Example.</h1>
        <script>
                let num = 23

                console.log(num);

                num = true

                console.log(num);

                num = "also accepted"

                console.log(num);
        </script>
</body>

</html>

Explanation - In the above code, we created a variable named num, which initially contained a number (23) as the value, and later I assigned a boolean value (true) to it, before again changing the data type to a string ("also accepted").

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image3.png

Different types of Data types in JavaScript

In JavaScript, we can classify the overall data types into two categories:
  1. Primitive Types
    The data types that, once defined, cannot be changed are known as primitive data types.
  2. Non-Primitive Types
    Those data types which can be changed once defined are known as non-primitive data types.

Strings, numbers, booleans, null and undefined are primitive data types in JavaScript, whereas anything that is an Object is a non-primitive data type in JavaScript.

Primitive Data Types

Strings

A string in JavaScript is a series of characters. For example, the text "Masai School" is considered a string in JavaScript.

Strings are written in quotes, and JavaScript gives you the freedom to write strings in either single quotes or double quotes.

Consider the code snippet where I will create a string using single quotes and double quotes.

Code Snippet:
let destination = "Goa";

let anotherDestination = 'Seychelles';

We can use either a single quote or a double quote, but we cannot use the same starting quote in between the string value. For example,
  • "Goa isn't all about just beaches" - valid because the string is started with double quotes, and the single quote is used in between
  • "Goa isn't all about just beaches" - invalid because the string is started with a single quote, and the single quote is used in between as well

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>

<body>
        <h1>String - Quote Example.</h1>
        <script>
                let destination = "Goa isn't all about just beaches";

                console.log(destination);

                let anotherDestination = 'Dubai and the famous "Burj Khalifa"';

                console.log(anotherDestination);
        </script>
</body>

</html>

Explanation -

In the above code, we have two variables with string values. The first string is enclosed inside double quotes, however, it has a single quote inside the string itself (isn't).

Similarly, the second string is enclosed inside single quotes and has double quotes ("Burj Khalifa") inside it.

Both are valid in JavaScript strings, so we get the following output in the terminal.

Output:
image10.png

Number

In JavaScript, the Number type can be classified into two types:
  • without decimal known as integer type
  • with decimal known as floating type

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>

<body>
        <h1>Number - Example.</h1>
        <script>
                let firstNumber = 123;

                console.log(firstNumber);

                let secondNumber = 456.789;

                console.log(secondNumber);
        </script>
</body>

</html>

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image1.png

BigInt

While representing numbers, it should be noted that numbers that are not in the range 2^{53} - 1 to -(2^{53} - 1) cannot be represented by the Number type, and for them, we need to make use of the BigInt type.

One important thing to note about the BigInt type is that a BigInt integer cannot be added to a normal integer.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>BigInt - Example.</h1>
        <script>
                // A BigInt value
                const firstValue = 900819925234740998n;

                // Adding the two integers
                const firstResult = firstValue + 1n;
                console.log(firstResult);

                const secondValue = 9001103719925124740998n;

                // The below code will result in an error
                const secondResult = secondValue + 1;
                console.log(secondResult);
        </script>
</body>

</html>

Explanation - In the above code, we declared two variables both holding large values in them, and then later, we tried using the add operations of these two variables.

First, we added the bigInt value to another bigInt value (1n) which gives the sum of two numbers. Then, we added the bigInt value to a normal integer value (1), which generated an error.

It's because we cannot perform addition between a BigInt value and a normal integer value.

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image4.png
Undefined

In JavaScript, a variable of undefined value type means that the 'value is not assigned to that variable.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>

<body>
        <h1>Undefined - Example.</h1>
        <script>
                let val;

                console.log(val);
        </script>
</body>

</html>

Explanation - In the above code, we declared a variable named val and didn't assign any value to it. Hence, the value undefined is assigned to it by JavaScript.

So, when we try and print the variable, we get undefined as the output.

Output:
image5.png

Boolean
The Boolean type in JavaScript is used to represent logical entities, and these can have only two values: true or false.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>Boolean - Example.</h1>
        <script>
                let isMarried = false;

                console.log(isMarried);

                let isStudying = true;

                console.log(isStudying);
        </script>
</body>

</html>

Explanation - In the above code, we declared two variables, namely, isMarried and isStudying where the value of these variables are boolean, either true or false, and then printed both of these variables.

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image2.png

Null
Null in JavaScript represents an intentional absence in place of the value. It is treated as a false value in JavaScript when we want to use it as a boolean operation.

Consider the code shown below.

Code:
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>Null - Example.</h1>
        <script>
                let value = null;

                console.log(value);
        </script>
</body>

</html>

Explanation - In the above code, we declared a variable named value and assigned a null value.

When we print the value, we get the null as output.

Output:
image6.png

Non-Primitive Data Types

All the data types that we have seen above are called "primitive" data types, and now we will explore data types that are "non-primitive" in nature.

Object
In JavaScript, the object is an entity that has properties and methods attached to them. The object type is used mainly to store various key-value collections and more complex entities.

Let's see an example.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>Object - Example.</h1>
        <script>
                let person = {
                        name: 'John',
                        age: 35,
                        isMarried: true,
                }

                console.log(person);

                console.log(person.name);
                console.log(person.age);
                console.log(person.isMarried);
        </script>
</body>

</html>


Explanation - In the above code, we have created an object.
  let person = {
          name: 'John',
          age: 35,
          isMarried: true,
  }

Here, the array includes 3 properties: name, age, and isMarried, with different values.

We then used dot notation to access those properties of the array.

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image8.png

Arrays

In JavaScript, an array enables us to store a collection of multiple items of the same or different types under a single variable name.

The arrays in JavaScript are resizable in nature and can contain a mixture of different data types.

Let's see an example.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>Array - Example.</h1>
        <script>
                // an array of string
                const countries = ['India', 'Japan', 'Tokyo'];
                console.log(countries);

                // an array of integer
                const numbers = [1, 3, 5, 7];
                console.log(numbers);
        </script>
</body>

</html>


Explanation - In the above code, we have created two arrays.

To store string data
const countries = ['India', 'Japan', 'Tokyo'];

To store numbers
const numbers = [1, 3, 5, 7];

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image9.png

We will explore more about arrays while learning about Arrays in JavaScript.

Check Data type using typeof

In JavaScript, we can make use of the typeof operator to check the data type of a variable.

Syntax:
typeof operand

Let's consider an example, where we will see how we can make use of the typeof operator in JavaScript on different operands.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>

<body>
        <h1>typeof - Example.</h1>
        <script>
                console.log(typeof "123");

                console.log(typeof 123);

                console.log(typeof NaN);

                console.log(typeof true);

                console.log(typeof ['1','2','3']);

                console.log(typeof {'name':'1', 'age':25});

                console.log(typeof function(){});

                console.log(typeof null);

                console.log(typeof undefined);
        </script>
</body>

</html>
Explanation - In the above code, we are using the typeof operator on various values to check the data types.

If we run the above code in a browser, we will get the following output in the terminal.

Output:
image7.png

Conclusion

In this article, we learned about data types in JavaScript. We also explored different types of data types and examples of each one of them, and finally, we learned to check the data type of a variable.

Check Out Programs Offered By Masai

If you are currently studying in 1st, 2nd or pre-final year of college,

Connect with a growingcommunity of learners

Masai School

Get StartedJoin the Program