Primitive and Non Primitive Data Types JavaScript

Table of Contents

JavaScript provides various data types to hold different types of values. Mainly, there are two types of data types in JavaScript.

Primitive data type
Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don’t need to specify data type of the variable because it is dynamically used by JavaScript engine. Keyword var is used to define the data type. A variable can hold any type of values such as strings, numbers and booleans etc. For example:

var a=40; // holding number

var b=”Rahul”; / /holding string

The fundamental difference between primitive Data Type and non primitive Data Type is that primitive data types are immutable and non primitive data types are mutable.

Primitives are known as being immutable data types because there is no way to change a primitive value once it gets created while non primitive data types can be changed anytime.

JavaScript primitive data types

Five types of primitive data types in JavaScript are as follows:

Data Type	Description
String	represents sequence of characters e.g. “hello”
Number	represents numeric values e.g. 100
Boolean	represents boolean value either false or true
Undefined	represents undefined value
Null	represents null i.e. no value at all

JavaScript non primitive data types

The non-primitive data types are as follows:

Data Type	Description
Object	objects are instances with which members can be accessed
Array	represents group of similar values
RegExp	represents regular expression

JavaScript Object

Object in JavaScript comes under non primitive data type. An Object is just like any other variable, with the only difference is that an object holds more than one value in terms of properties and methods. Properties can save values of primitive data types and methods are used to save functions.

In JavaScript a Non Primitive Data Type, an object is a standalone entity because there is no class in JavaScript. However, a class like functionality can be get by using functions.

In JavaScript, there are two different ways to create an object :

Object literal
Object constructor

Object Literal-Non Primitive Data Types

The object literal is a simple way of creating an object using curly { } brackets. You can include key-value pair in curly braces, separated by colon and here the key would be property or method name and value will be value of property of any data type or a function. Use comma to separate multiple key-value pairs.

Syntax: var <object-name> = { key1: value1, key2: value2,… keyN: valueN};

Access JavaScript Object Properties & Methods

The values of an object’s properties can be get and set using dot notation or bracket. Still , an object’s method can only be called using dot notation.

!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Object</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
var person = {
firstName: "Ram",
lastName: "Mohan",
age: 25,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
document.getElementById("p1").innerHTML = person.firstName;
document.getElementById("p2").innerHTML = person.lastName;
document.getElementById("p3").innerHTML = person["firstName"];
document.getElementById("p4").innerHTML = person["lastName"];
document.getElementById("p5").innerHTML = person.getFullName();
</script>
</body>
</html>

Object Constructor- Non Primitive Data Types

The another way to create an object is using Object Constructor with new keyword. Properties and methods can be connected using dot notation. Also , properties can be created using brackets and defining property name as string.

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Object</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
var person = new Object();
// Attach properties and methods to person object
person.firstName = "Rita";
person["lastName"] = "Sita";
person.age = 25;
person.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};
// access properties & methods
document.getElementById("p1").innerHTML = person.firstName;
document.getElementById("p2").innerHTML = person.lastName;
document.getElementById("p3").innerHTML = person["firstName"];
document.getElementById("p4").innerHTML = person["lastName"];
document.getElementById("p5").innerHTML = person.getFullName();
</script>
</body>
</html>

Undefined Property or Method

If you try to access properties or call methods in JavaScript that do not exist, JavaScript will return ‘undefined’ .

When you are not confident whether an object has a particular property or not, then use hasOwnProperty() method before accessing properties.

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Object</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
var person = new Object();
document.getElementById("p1").innerHTML = person.firstName;
if(person.hasOwnProperty("firstName")){
document.getElementById("p2").innerHTML = person.firstName;
}
</script>
</body>
</html>

Pass by Reference

Object in JavaScript passes references from one method to another by using pass by reference.

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Object</h1>
<p id="p1"></p>
<p id="p2"></p>
<script>
function changeFirstName(per)
{
per.firstName = "Sham";
}
var person = { firstName : "Ram" };
document.getElementById("p1").innerHTML= person.firstName;
changeFirstName(person)
document.getElementById("p2").innerHTML= person.firstName;
</script>
</body>
</html>

JavaScript Array – Non Primitive Data Types

A variable at a time can hold just one value, for example var i = 1, assigns only one literal value to i. We cannot assign multiple literal values to a variable i at a single instance of time. To overcome this problem, JavaScript uses an array.

So we can say that an array is a special type of variable, that can store multiple values at a time using special syntax. Each value of a array can be accessed with numeric index starting with 0.

Array Initialization

An array in JavaScript can be defined and initialized in two different ways, as array literal and Array constructor syntax.

Array Literal

Array literal syntax is simple. Array literal can be written as a list of values, each separated by a comma and enclosed in square brackets.

Syntax: var <array-name> = [element0, element1, element2,… elementN];

<!DOCTYPE html>
<html>
<body>
         <h1>Demo: JavaScript Array</h1>
         <p id="p1"></p>
         <p id="p2"></p>
         <p id="p3"></p>
         <p id="p4"></p>
         <p id="p5"></p>
         <script>
                 var stringArray = ["one", "two", "three"];
                 var numericArray = [1, 2, 3, 4];
                 var decimalArray = [1.1, 1.2, 1.3];
                 var booleanArray = [true, false, false, true];
                 var mixedArray = [1, "two", "three", 4];
                 document.getElementById("p1").innerHTML= stringArray;
                 document.getElementById("p2").innerHTML= numericArray;
                 document.getElementById("p3").innerHTML= decimalArray;
                 document.getElementById("p4").innerHTML= booleanArray;
                 document.getElementById("p5").innerHTML= mixedArray;
    </script>
</body>
</html>

Array Constructor

An array with Array constructor syntax can be defined using new keyword. it has following three different forms.

var array1 = new Array();
var array2 = new Array(Number length);
var array3 = new Array(value1, value2, value3,... valueN);

The example above, demonstrates three different techniques to initialize an array. Here a new keyword, has been used to define an Array constructor, in the same way as an object.

Hope the Primitive Data Types and Non Primitive Data Types in JavaScript has been addressed thoroughly. If have any query Please comment on it, like and Share it.