Data Types in JavaScript

Data Types in JavaScript
Data Types in JavaScript

Primitive and Non Primitive Data Types JavaScript

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

  1. Primitive data type
  2. 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 :

  1. Object literal
  2. 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.

 To visit the  Official website of JavaScript Click here
Similar Topics:  How To Enable JavaScript in Browsers,   How to Generate Output in JavaScript
3 2 votes
Article Rating
Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tilak
1 year ago

Nice

pushpa
pushpa
1 year ago

good notes

yashodha
yashodha
1 year ago

very good notes

asha
asha
1 year ago

nice

trackback
1 year ago

[…] Similar posts : JavaScript Objects ,    JavaScript Functions and Loops    JavaScript Control Statements and Operators  Data Types in JavaScript […]

Santosh
Santosh
1 year ago

Informative

trackback
10 months ago

[…] Data Types in JavaScript       JavaScript Control Statements and Operators             JavaScript Functions and Loops […]

trackback
10 months ago

[…] Data Types in JavaScript             JavaScript Control Statements and Operators                        JavaScript Functions and Loops […]

Please Subscribe to Stay Connected

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

DigitalSanjiv will use the information you provide on this form to be in touch with you and to provide updates and marketing.
Share via
Copy link
Powered by Social Snap
%d bloggers like this: