Primitive Data Types in JavaScript with Examples and full code in JS. When we talk about any language like C, C++, and Java, the most basic and most important characteristics of that is the set of data types of that language. Javascript support maximum 6 types of primitive data types which are Boolean, Null, Undefined, Number, String, and Symbol (new in ECMAScript 6), But we are focusing only 3 types of mainly using data types in javascript. JavaScript mainly focus on three primitive data types are–
So What we are going to learn in this article, Here is a list of a content that we are going to learn in this Javascript datatypes article.
Here, JavaScript also supports composite data type, is an object. An object is a collection of values like numbers, string, objects. JavaScript support dual nature of objects:
Before working with data types one should know the behavior of Data Types. We assume that you already know the How statement Execute in JS.
i) Data types in JavaScript are Dynamic:
Data Types in JavaScript are dynamic means we define a variable once and that can hold different data type values. Like if we have a variable x then it can contain a numeric value and also a string value.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Dynamic data types</p>
<p id="DynamicData"></p>
<script>
var x;
x = 5;
x = "Programming With Basics";
document.getElementById("DynamicData").innerHTML = x;
</script>
</body>
</html>
Here we define x and provide an integer value and again the same variable is provided string value. Now the value of x is string value then the result is “Programming With Basics”.
ii) when number values added to a string:
When a numeric value added to the string. JavaScript has a facility to handle this situation. Automatically it assumes int value is a string and append it with a string value.
Example:
<!DOCTYPE html>
<html>
<body>
<p>adding number and string</p>
<p id="DataTypeDemo"></p>
<script>
var AddNumAndString = 26 + "Programming with basics";
document.getElementById("DataTypeDemo").innerHTML = AddNumAndString;
</script>
</body>
</html>Now we see it didn’t gives error. Result will be 26Programming with basics.
Let’s define Data Types in Brief:
The string is a series or collection of Characters.
Ex: “Programming with basics”
Also, the string can be defined in single quotes. We can use a string with conditions statements for example If, If-Else, and Switch statements.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Strings in JavaScript</h2>
<p id="StringsInJS"></p>
<script>
var OurSite = "Programming With Basics";
var OurTutorial = 'DataTypes';
document.getElementById("StringsInJS").innerHTML =OurSite + ":" + OurTutorial;
</script>
</body>
</html>
The numeric data is all digit values including decimal values, like 29, 105.98 etc. In JavaScript there are no integer or floating point values, JavaScript treats all numbers as floating point values.
Example:
<!DOCTYPE html>
<html>
<body>
<h>Numbers</h>
<p id="Numbers"></p>
<script>
var a = 10;
var b = 11;
var c = 12;
document.getElementById("Numbers").innerHTML =a + "<br>" + b + "<br>" + c;
</script>
</body>
</html>
Boolean data types have two values only, either true or false.
Ex: var x=true;
var x=false;
Example:
<!DOCTYPE html>
<html>
<body>
<h>Boolean Demo</h>
<p id="BooleanDemo"></p>
<script>
var a = 10;
var b = 10;
var c = 15;
var x;
if(a==b||b==c)
{
x=true;
}
else
{
x=false;
}
document.getElementById("BooleanDemo").innerHTML =x;
</script>
</body>
</html
JavaScript Arrays:
JavaScript arrays are defined within square brackets, and the items within brackets are separated by a comma. As we defined earlier array based on numeric values, its index starts from 0.
Ex: We defined an array of all we have in our blog:
Var OurSite = [“C”, ”C++”, ”Java”, ”JS”, ”Hackerrank”];
Here C is at 0 indexes, C++ at index 1 and so on.
Example:
<!DOCTYPE html>
<html>
<body>
<h>Arrays in JavaScript</h>
<p id="Array"></p>
<script>
var oursite = ["C", "C++", "JavaScript", "Java"];
var text = "";
var i;
for (i = 0; i < oursite.length; i++) {
text += oursite[i] + "<br>";
}
document.getElementById("Array").innerHTML = text;
</script>
</body>
</html>
JavaScript Objects:
Objects are key: value pairs, separated by a comma, are written inside curly brackets.
Ex: var book = {Name:“JavaScript”, Pages:500, Price=400 }
Example:
<!DOCTYPE html>
<html>
<body>
<h>JavaScript Objects</h>
<p id="demo"></p>
<script>
var Book = {
Name : "John",
Price : 500,
Pages : 400
};
document.getElementById("demo").innerHTML =
Book.Name + " has " + Book.Price + " with no of pages" + Book.Pages;
</script>
</body>
</html>
A variable without a value, has value undefined.
<!DOCTYPE html>
<html>
<body>
<h>Undefined Data Types</h>
<p id="undefineddemo"></p>
<script>
var x;
document.getElementById("undefineddemo").innerHTML =x;
</script>
</body>
</html>
Null means no value. If we want to assign a null value to a variable.
Var a = null;
Know More: List of All Events in JS
The typeof Operator
typeof operator finds the data type of a variable.
Example:
<!DOCTYPE html>
<html>
<body>
<h> typeof operator <h>
<p id="demo"></p>
<script>
var x= 5;
var y ="PWB"
var z=null;
var k=undefined ;
document.getElementById("demo").innerHTML =
typeof x + "<br>" +
typeof y + "<br>" +
typeof z + "<br>" +
typeof k;
</script>
</body>
</html>
Result :
number
string
object
undefined
Here we observe that typeof returns number for a numeric variable, string for a string variable. Undefined for undefined value variable. But returned Object for null type, this will be a bug of JavaScript. The only difference between null and undefined is their data types, either their working behavior is the same.
Read More: For Loop in Javascript.
Data types in Javascript, this in-depth article is written by Suman Yadav. She already wrote an article on Functions, What are a Functions in JS. You can also write to us, Submit your article and be a member of our A Programming Solutions Blog. Join us by sending a well-written article for more information visit Write for Us.
- Numbers
- Strings
- Boolean
So What we are going to learn in this article, Here is a list of a content that we are going to learn in this Javascript datatypes article.
Index of Content
- Picture of an Article
- The concept of Data Types in JS
- Dynamic
- when number values added to a string
- Data types in Javascript
- Numbers
- Strings
- Boolean
- Null
- Undefined
- Examples of Data Types in Javascript
- Javascript Array
- Javascript objects
- The typeof Operator
- About Author
Here, JavaScript also supports composite data type, is an object. An object is a collection of values like numbers, string, objects. JavaScript support dual nature of objects:
- JavaScript Object can represent an unordered collection of named values.
- And ordered a collection of numbered values. Like values are indexed with numeric values.
JavaScript Concept of Data Types:
Before working with data types one should know the behavior of Data Types. We assume that you already know the How statement Execute in JS.
i) Data types in JavaScript are Dynamic:
Data Types in JavaScript are dynamic means we define a variable once and that can hold different data type values. Like if we have a variable x then it can contain a numeric value and also a string value.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Dynamic data types</p>
<p id="DynamicData"></p>
<script>
var x;
x = 5;
x = "Programming With Basics";
document.getElementById("DynamicData").innerHTML = x;
</script>
</body>
</html>
Here we define x and provide an integer value and again the same variable is provided string value. Now the value of x is string value then the result is “Programming With Basics”.
ii) when number values added to a string:
When a numeric value added to the string. JavaScript has a facility to handle this situation. Automatically it assumes int value is a string and append it with a string value.
Example:
<!DOCTYPE html>
<html>
<body>
<p>adding number and string</p>
<p id="DataTypeDemo"></p>
<script>
var AddNumAndString = 26 + "Programming with basics";
document.getElementById("DataTypeDemo").innerHTML = AddNumAndString;
</script>
</body>
</html>Now we see it didn’t gives error. Result will be 26Programming with basics.
Let’s define Data Types in Brief:
1. Strings Datatypes in JS:
The string is a series or collection of Characters.
Ex: “Programming with basics”
Also, the string can be defined in single quotes. We can use a string with conditions statements for example If, If-Else, and Switch statements.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Strings in JavaScript</h2>
<p id="StringsInJS"></p>
<script>
var OurSite = "Programming With Basics";
var OurTutorial = 'DataTypes';
document.getElementById("StringsInJS").innerHTML =OurSite + ":" + OurTutorial;
</script>
</body>
</html>
2. Numbers in Javascript:
The numeric data is all digit values including decimal values, like 29, 105.98 etc. In JavaScript there are no integer or floating point values, JavaScript treats all numbers as floating point values.
Example:
<!DOCTYPE html>
<html>
<body>
<h>Numbers</h>
<p id="Numbers"></p>
<script>
var a = 10;
var b = 11;
var c = 12;
document.getElementById("Numbers").innerHTML =a + "<br>" + b + "<br>" + c;
</script>
</body>
</html>
3. JavaScript Booleans:
Boolean data types have two values only, either true or false.
Ex: var x=true;
var x=false;
Example:
<!DOCTYPE html>
<html>
<body>
<h>Boolean Demo</h>
<p id="BooleanDemo"></p>
<script>
var a = 10;
var b = 10;
var c = 15;
var x;
if(a==b||b==c)
{
x=true;
}
else
{
x=false;
}
document.getElementById("BooleanDemo").innerHTML =x;
</script>
</body>
</html
JavaScript Arrays:
JavaScript arrays are defined within square brackets, and the items within brackets are separated by a comma. As we defined earlier array based on numeric values, its index starts from 0.
Ex: We defined an array of all we have in our blog:
Var OurSite = [“C”, ”C++”, ”Java”, ”JS”, ”Hackerrank”];
Here C is at 0 indexes, C++ at index 1 and so on.
Example:
<!DOCTYPE html>
<html>
<body>
<h>Arrays in JavaScript</h>
<p id="Array"></p>
<script>
var oursite = ["C", "C++", "JavaScript", "Java"];
var text = "";
var i;
for (i = 0; i < oursite.length; i++) {
text += oursite[i] + "<br>";
}
document.getElementById("Array").innerHTML = text;
</script>
</body>
</html>
JavaScript Objects:
Objects are key: value pairs, separated by a comma, are written inside curly brackets.
Ex: var book = {Name:“JavaScript”, Pages:500, Price=400 }
Example:
<!DOCTYPE html>
<html>
<body>
<h>JavaScript Objects</h>
<p id="demo"></p>
<script>
var Book = {
Name : "John",
Price : 500,
Pages : 400
};
document.getElementById("demo").innerHTML =
Book.Name + " has " + Book.Price + " with no of pages" + Book.Pages;
</script>
</body>
</html>
4. Undefined in Javascript:
A variable without a value, has value undefined.
<!DOCTYPE html>
<html>
<body>
<h>Undefined Data Types</h>
<p id="undefineddemo"></p>
<script>
var x;
document.getElementById("undefineddemo").innerHTML =x;
</script>
</body>
</html>
5. Null in Javascript:
Null means no value. If we want to assign a null value to a variable.
Var a = null;
Know More: List of All Events in JS
The typeof Operator
typeof operator finds the data type of a variable.
Example:
<!DOCTYPE html>
<html>
<body>
<h> typeof operator <h>
<p id="demo"></p>
<script>
var x= 5;
var y ="PWB"
var z=null;
var k=undefined ;
document.getElementById("demo").innerHTML =
typeof x + "<br>" +
typeof y + "<br>" +
typeof z + "<br>" +
typeof k;
</script>
</body>
</html>
Result :
number
string
object
undefined
Here we observe that typeof returns number for a numeric variable, string for a string variable. Undefined for undefined value variable. But returned Object for null type, this will be a bug of JavaScript. The only difference between null and undefined is their data types, either their working behavior is the same.
Read More: For Loop in Javascript.
About Author
Data types in Javascript, this in-depth article is written by Suman Yadav. She already wrote an article on Functions, What are a Functions in JS. You can also write to us, Submit your article and be a member of our A Programming Solutions Blog. Join us by sending a well-written article for more information visit Write for Us.
