Data types in JavaScript indicate the characteristics of data. It tells the compiler whether the data value is numeric, date, alphabetic so that compiler can do appropriate operation. Different data types hold different types of value. If you are learning web designing or web development then JavaScript is a must language to learn so knowledge of data types surely will help you in clearing advanced level concepts of this language. Data types in JavaScript mainly divided into three types.Those are Primary Data types, Secondary Data types and Composite Data Types.
Primary Data types:
The Primary (Primitive) data types are again sub divided into three types • String • Number • Boolean
Composite Data types:
The composite (reference) data types are again divided into two data types • Object
Special Data types:
The special Data types are two types: • Null • Undefined
Strings:
String is nothing but a series of characters which are written within quotes that may be double or single quotes. We can use single quotation inside double quotation and vice versa. We can use single or double quotes. In a string we can use letters, digits and punctuation marks. So in JavaScript we use string data types to represent text var stdid1 = “Ramu XC10”; // Using double quotes var stdid2 = ‘Pradip va9’; // Using single quotes var Statement1 = “let’s go”; // Single quote inside double quotes var Statement2 = “I am ‘Rock'”; // Single quotes inside double quotes var Statement3 = ‘I am a student of “ADMEC”‘; // Double quotes inside single quotes Example 1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>String is nothing but a series of characters which are written within quotes, that may be double or single quotes.
We can use single quotation inside double quotation and vice versa.:</p>
<p id="ex1"></p>
<script>
var stdid1 = "Ramu XC10";
var stdid2 = 'Pradip va9';
document.getElementById("ex1").innerHTML = stdid1 + "<br>" + stdid2;
</script>
</body>
</html>Result:String is nothing but a series of characters which are written within quotes that may be double or single quotes. We can use single quotation inside double quotation and vice versa.Ramu XC10Pradip va9 Example 2:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>We can use single quotation inside double quotation and vice versa.<br>
We can use quotes inside a string,as long as they don't match the quotes surrounding the string:</p>
<p id="ex2"></p>
<script>
var statement1 = "let's go"; // Single quote inside double quotes
tatement2 = "I am 'Rock'"; // Single quotes inside double quotes
var statement3 = 'I am a student of "ADMEC"'; // Double quotes inside single quotes
document.getElementById("ex2").innerHTML = statement1 + "<br>" + statement2 + "<br>" + statement3;
</script>
</body>
</html>Result:We can use single quotation inside double quotation and vice versa.We can use quotes inside a string, as long as they don’t match the quotes surrounding the string:let’s goI am ‘Rock’I am a student of “ADMEC”
Numbers:
Number can be written with or without decimals
var x1 = 50.00; //result=50// Written with decimals
var x2 = 90; // result=90// Written without decimals
var x3 = 7.19; // result=7.19// Written with decimals Extra large or extra small numbers can be written with scientific (exponential) notation: var x1 = 190e8; // result=19000000000 var x2 = 190e-8; // result= 0.0000019 var x2 = .0001; var x2 = 0.0001; var x2 = 1e-4; var x2 =1.0e-4; var x3 = 3.45e2; //result=345 // A floating-point number.
An integer
var x4 = 45; //result=45// an integer
var x5 = 0378; //result=378// An integer. However, it seems like an octal digit
(which begins with zero),
as 8 is not a proper octal number,
so we will treated this number as a decimal. var x6 = 0377; //result=255// An octal integer. We have notice that however it only
seems to be one less than the above digit ,
but its actual value is quite different.
var x7 = 0.0001; //result=0.0001// A floating point number.
Although this start with a zero, but it is not an octal number as it has a
decimal point.
var x7 = 00.0001; //result=N/A (compiler error)// This is an error. The two leading
zeros mark the number as an octal,
but octals numbers are not allowed a decimal component.A hexadecimal integer
var x8 = 0Xff; //result=255// A hexadecimal integer.
var x9 = 0x37CF; //result=14287//A hexadecimal integer.
var x10 = 0x3e7; //result=999//A hexadecimal integer. Notice that the 'e' is not treated as exponentiation.
var x11 = 0x3.45e2; //result= N/A (compiler error)//
This is an error. Hexadecimal numbers cannot have decimal parts.Extra:
result= Positive and Negative 0. // JavaScript differentiates between positive and
negative zero.
result= Negative Infinity. // This is used when a negative number is too large to
represent in JavaScript
result= Positive Infinity. // This is used when a positive number is too large to
represent in JavaScript
result= NaN (not a number)// This is used when a mathematical operation is performed on inappropriate data,
such as strings or the undefined valueExample3
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="ex3"></p>
<script>
var x1 = 50.00;
var x2 = 90;
var x3 = 7.19;
document.getElementById("ex3").innerHTML = x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>Result:Numbers can be written with, or without decimals:50907.19
Booleans:
Booleans can only have two values either True or False.
var x = 18;
var y = 18;
var z = 9;
(x == y); //returns true
(x == z); //returns falsewe can use Booleans as conditional also.
Objects:
JavaScript objects are written with curly braces.
var flower = { };
Object properties are written as name: value pairs, separated by commas.
var flower = {firstName:"lily", time:70, flowerColor:"red"};The object (flower) in the example above has 4 properties: firstName, lastName, time, and flowerColor.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="ex"></p>
<script>
var flower = {
firstName : "lily",
lastName : "Asiatic",
time : 70,
flowerColor : "red"
};
document.getElementById("ex").innerHTML = flower.firstName + " is " +
flower.time + "days crop.";
</script>
</body>
</html>Result: lily is 70 days crop.Arrays:In JavaScript arrays are written square brackets and arrays items are separated by commasThe following code declares (creates) an array called foods, containing three items (food names): var foods = [“Roti”, “Chawal”, “DAL”];As array index are zero-based, i.e 1st item is [0], second is [1], and third is [2] Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="ex"></p>
<script>
var foods = ["Roti", "Chawal", "DAL"];
document.getElementById("ex").innerHTML = foods[0];
</script>
</body>
</html>Result:Array indexes are zero-based, which means the first item is [0].Roti
Null Data Types:
- The Null type has exactly one value: null. It represents the internal absence of any object value.
- A variable that contains null contains no valid number, string, Boolean, Array, or object.
- We can erase the contents of a variable without deleting the variable by assign it the null value.
- The null keyword cannot be used as the name of a function or variable.
Example:
function getVowels(str) {
var m = str.match(/[aeiou]/gi);
if (m === null) {
return 0;
}
return m.length;
}
console.log(getVowels('sky'));
//expected output: 0Example:
function getVowels(str) {
var m = str.match(/[aeiou]/gi);
if (m === null) {
return 0;
}
return m.length;
}
console.log(getVowels('eiougi'));
// expected output: 5Undefined Data Types:
A variable that has not been assigned a value has the value undefined.
function test(t) {
if (t === undefined) {
return 'Undefined value!';
}
return t;
}
var x;
console.log(test(x));
// expected output: "Undefined value!"Conclusion:Data are divided into different data types, those are Boolean, Null, Undefined, Number, String, and Object. This topic is very important to know in depth and hope now you have a good understanding of this subject in JavaScript. I am sure this knowledge will help you in becoming a good web designer and developer in coming years. To read more blogs related to JavaScript click on All JavaScript Blogs. To understand the essential concepts of this language one should also join any platform which provides all the necessary support and guidance to increase your programming skills. And I’m sure that Web Development Institute is the best place to enhance your knowledge and to become a JavaScript Master.
