What are Primitive and Non-Primitive Data Types in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this article, we are going to explore about different types of data types available in JavaScript and their different usages −

Data Types − Every variable in JavaScript has a data type that defines the type of variable it is and what kind of data is being stored in the variable. There are two types of data types that are available in JavaScript namely Primitive Data Types and Non-Primitive Data Types.

Primitive Data Types − This is the predefined data type that is provided by JavaScript for different usages. These are also known as the in-built data types.

Non-Primitive Data Types − These data types are derived from the primitive data types and work as a reference. Therefore, they are also known as reference data types.

Primitive Datatypes

Different types of Primitive Datatype are −

1.Number −This data type can hold the decimal values as well as the without decimal values in JavaScript.

Example 1

In the below example, we will be exploring the Number data type.

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let x = 3874772;
      let y = 22/7;
      console.log("Value of x: " + x);
      console.log("Value of y: " + y);
   </script>
</body>
</html>

Output

It will produce the following output in the Console.

Value of x: 3874772
Value of y: 3.142857142857143

2. String Datatype − The String datatype in JavaScript is used for representing a sequence of characters that is surrounded by single or double quotes.

Example 2

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let str = 'Hello User...';
      let str1 = "Welcome to Tutorials Point";
      console.log("String: " + str);
      console.log("String 1: " + str1);
   </script>
</body>
</html>

Output

It will produce the following output in the Console.

String: Hello User...
String 1: Welcome to Tutorials Point

3. Undefined − The undefined data type is used when the value of any request or response cannot be defined by JavaScript. For example: Initializing a number without value.

Example 3

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let x;
      console.log("Value of x: " + x);
      x = undefined
      console.log("x: " + x);
   </script>
</body>
</html>

Output

It will produce the following output in the Console.

Value of x: undefined
x: undefined

4. Boolean − The boolean data type only accepts two types of values i.e. either true or false.

5. Null − This only accepts null values.

Example 4

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      let x = null;
      let bool = true;
      console.log("Boolean value: " + bool);
      console.log("Value of x:" + x);
      console.log("Dividing 0 by 0: " + 0/0);
   </script>
</body>
</html>

Output

It will produce the following output in the Console.

Boolean value: true
Value of x:null
Dividing 0 by 0: NaN

Non-primitive datatypes

The non-primitive data types are as follows −

1. Object − The objects in JavaScript are entities that have properties and methods. Everything in Java is an Object.

Creating an Object in JavaScript

Defining an Object using constructor:

// Create an empty generic object
var obj = new Object();

//Create a user defined object
var mycar = new Car();

Defining an Object using literal annotations −

// An empty object
var square = {};

// Here a and b are keys and
// 20 and 30 are values
var circle = {a: 20, b: 30};

Example 5

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      // Creating object with the name person
      let student = {
         firstName: "Gary",
         lastName: "Phillips",
      };
      // Printing the value on console
      console.log("Full Name: " + student.firstName + " " + student.lastName);
   </script>
</body>
</html>

Output

The output is displayed in the Console.

Full Name: Gary Phillips

2. Array − Arrays in JavaScript can be used for storing more than one element under a single name.

Declaring a 1D array −

// Call it with no arguments
var a = new Array();

// Call it with single numeric argument
var b = new Array(10);

// Explicitly specify two or
// more array elements
var d = new Array(1, 2, 3, "Hello");

Example 6

# index.html

<html>
<head>
   <title>Data Types</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      var x = new Array();
      var y = new Array(21);
      var z = new Array("Hello", 21, "Tutorials", "Point", 32, 56);
      console.log("value of x: " + x);
      console.log("value of y: " + y);
      console.log("value of z: " + z);
   </script>
</body>
</html>

Output

The above program will produce the following output in the Console.

value of x:
value of y: ,,,,,,,,,,,,,,,,,,,,
value of z: Hello,21,Tutorials,Point,32,56
raja
Updated on 28-Apr-2022 12:25:12

Advertisements