Introduction

JavaScript Data types refer to the different types of data that we will be working with and storing in variables. It’s essential that we learn each of these data types for the reason that if not data may become stored in an incorrect format that will result in problems in our code afterward.

In this article, we will discuss the more common data types in JavaScript and how to appliance them in our code.

Description

Data types essentially state what kind of data may be stored and deployed inside a program. There are six elementary data types in JavaScript. Those further can be divided into three key groups:

Primitive (Primary)

The primitive data types are String, Number, and Boolean. These data types can hold only one value at a time.

Composite (Reference)

All types of objects such as Object, Array, and Function are composite data types. These data types can hold groups of values and additional complex entities

Special data types

Undefined and Null are special data types.

Now, we will discuss each data type one by one in-depth.

The String type

String type is used to signify textual data. These are groups of alphanumeric characters and symbols. This is in what way we’re going to store letters and words. It is a collection of elements of 16-bit nameless integer values. Each element in the String lives in a position in the String. The first component is at index 0, the afterward at index 1, and so on. The String length is the number of elements in it. Strings are immutable as it is not possible to change something once a string is created.

We create Strings by using single or double quotes surrounding one or more characters. Look at the below code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript String Data Type</title>
</head>
<body>
    <script>
    // Creating variables
    var a = 'Hi there!';  // using single quotes
    var b = "Hi there!";  // using double quotes
    // Printing variable values
    document.write(a + "/\n/g");
    document.write(b);
    </script>
</body>
</html>

We can take in quotes within the string on the condition that they don’t match the enclosing quotes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Including Quotes inside the JavaScript String</title>
</head>
<body>
    <script>
    // Creating variables
    var a = "Let's have a cup of coffee.";
    var b = 'He said "Hello" and left.';
    var c = 'We\'ll never give up.';
    // Printing variable values
    document.write(a + "/\n/g");
    document.write(b + "<br>");
    document.write(c);
    </script>
</body>
</html>

The Number Type

The Number signifies integer and floating numbers such as decimals and exponential.

Example:

const number1 = 3;
const number2 = 3.433;
const number3 = 3e5 // 3 * 10^5

A number type may also be;
+Infinity
-Infinity
NaN (not a number).

Example:

const number1 = 3/0;
console.log(number1); // Infinity
const number2 = -3/0;
console.log(number2); // -Infinity
// strings can't be divided by numbers
const number3 = "abc"/3;
console.log(number3);  // NaN

The Boolean Type

The Boolean data type may hold only true or false values data. It is normally used to store values similar to yes (true) or no (false) as proved below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Boolean Data Type</title>
</head>
<body>
    <script>
    // Creating variables
    var isReading = true;   // yes, I'm reading
    var isSleeping = false; // no, I'm not sleeping
    // Printing variable values
    document.write(isReading + "/\n/g");
    document.write(isSleeping);
    </script>
</body>
</html>

The Object Type

An object is a complex data type that permits us to store collections of data.

Example:

const student = {
    firstName: 'ram',
    lastName: null,
    class: 10
};

The Array Type

The array is a type of object. It is t used for storing several values in a single variable. Each value or element in an array has a numeric position. That is known as its index. It can cover data of any data type-numbers, strings, Boolean, functions, objects, and even other arrays.

The easiest way to create an array is by stating the array values as a comma-separated list encircled by square brackets.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Array Data Type</title>
</head>
<body>
    <script>
    // Creating arrays
    var colors = ["Red", "Yellow", "Green", "Orange"];
    var cities = ["London", "Paris", "New York"];
    // Printing array values
    document.write(colors[0] + "/\n/g");   // Output: Red
    document.write(cities[2]);   // Output: New York
    </script>
</body>
</html>

The Function type

A function is a callable object. It implements a block of code. It is likely to assign functions to variables as the functions are objects.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Function Data Type</title>
</head>
<body>
    <script>
    var greeting = function(){
        return "Hello World!";
    }
    // Check the type of greeting variable
    document.write(typeof greeting) // Output: function
    document.write("/\n/g");
    document.write(greeting());     // Output: Hello World!
    </script>
</body>
</html>

The Undefined type

The undefined data type may only have one value. It has a special value undefined.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Undefined Data Type</title>
</head>
<body>
    <script>
    // Creating variables
    var a;
    var b = "Hello World!"
    // Printing variable values
    document.write(a + "/\n/g");
    document.write(b);
    </script>
</body>
</html>

The Null Data Type

The Null is one more special data type. It can have only one value-the null value. It means that there is no value. A variable may be clearly emptied of its present contents by allocating it the null value.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Null Data Type</title>
</head>
<body>
<script>
var a = null;
document.write(a + "/\n/g"); // Print: null
var b = "Hello World!"
document.write(b + "<br>"); // Print: Hello World!
b = null;
document.write(b) // Print: null
</script>
</body>
</html>

Conclusion

At this time, we should have a well understanding of some of the main data types that are available for us to use in JavaScript.
All of these data types will become vital as we develop programming projects in the JavaScript language.

For more details visit:https://www.technologiesinindustry4.com/2022/01/javascript-data-types.html