Data Types
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Data Types</title>
</head>
<body>
<!--
Data types describe the different types or kinds of data that we're gonna be working with and storing in variables.
There are five basic or primitive datatypes :
- number : represents both integer and floating point numbers. Also includes Infinity, -Infinity and NaN
- string : represents a collection of alphanumeric characters within a single quotes or double quotes or Backticks
- boolean : has only two values either true or false.
- undefined : is a value that is not assigned.
- null : represents “nothing”, “empty” or “value unknown”
- bigint : represent integer values larger than (2**53-1) (that’s 9007199254740991), or less than -(2**53-1) for negatives.
- symbol : is a primitive datatype which represents a unique "hidden" identifier that no other code can accidentally access.
-->
<h1>Demo: JavaScript Data Types</h1>
<div>
<h2>JavaScript DataType : number</h2>
<p id="para1"></p>
</div>
<div>
<h2>JavaScript DataType : bigint</h2>
<p id="para2"></p>
</div>
<div>
<h2>JavaScript DataType : string</h2>
<p id="para3"></p>
</div>
<div>
<h2>String Literals using backticks (`)</h2>
<p id="para4"></p>
</div>
<div>
<h2>JavaScript DataType : boolean</h2>
<p id="para5"></p>
</div>
<div>
<h2>JavaScript DataType : null and undefined</h2>
<p id="para6"></p>
</div>
<div>
<h2>JavaScript DataType : symbol</h2>
<p id="para7"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// JavaScript DataType : number
//
const x = 5;
const y = 10;
const z = 0;
let value1 = x + y; // number datatype
let value2 = "string"/x; // NaN - Not a number
let value3 = x/z; // Infinity
document.getElementById("para1").innerHTML =
"value1 = " + value1 + " and typeof(value1) is " + typeof(value1) + "<br>" +
"value2 = " + value2 + " and typeof(value2) is " + typeof(value2) + "<br>" +
"value3 = " + value3 + " and typeof(value3) is " + typeof(value3);
/************************************************/
// JavaScript DataType : BigInt
//
const intNumber = 1234567890123456789012345678901234567890;
const largeNumber = 1234567890123456789012345678901234567890n; // Data Type BigInt
document.getElementById("para2").innerHTML =
"intNumber = " + intNumber + " and typeof(intNumber) is " + typeof(intNumber) + "<br>" +
"largeNumber = " + largeNumber + " and typeof(largeNumber) is " + typeof(largeNumber);
/************************************************/
// JavaScript DataType : string
//
let text1 = "Make in "; // strings in double quotes
let text2 = 'India'; // strings in single quotes
let text3 = text1 + text2; // "+" will concatinate the strings
document.getElementById("para3").innerHTML =
"text3 = " + text3 + " and typeof(text3) is " + typeof(text3);
/************************************************/
// JavaScript DataType : strings using backticks(`)
// Example on string Literals
//
const _name = "Ronaldinho";
const _msg = `Hello, ${_name}!`; // embed a variable using Backticks
const _expr = `${_name} scored : ${1 + 2}`; // embed an expression using Backticks
document.getElementById("para4").innerHTML =
"Message: " +_msg + "<br>" +
"Expression: " +_expr;
/************************************************/
// JavaScript DataType : boolean
//
let indiaGoals = 3;
let chinaGoals = 2;
let equalGoals = (indiaGoals == chinaGoals); // boolean Datatype
let indiaWon = (indiaGoals > chinaGoals); // boolean Datatype
document.getElementById("para5").innerHTML =
"India & China scored equal goals ? " + equalGoals + "<br>" +
"India won against China ? " + indiaWon;
/************************************************/
// JavaScript DataType : null and undefined
//
let myAge = null; // DataType "null"
let myColor; // DataType "undefined"
document.getElementById("para6").innerHTML =
"myAge = " + myAge + " and typeof(myAge) is " + typeof(myAge) + "<br>" +
"myColor = " + myColor + " and typeof(myColor) is " + typeof(myColor);
/************************************************/
// JavaScript DataType : symbol
//
const player = {
fname: "Leo",
lname: "Messi",
position: "Forward" };
let uid = Symbol('uid');
player[uid] = 98765;
document.getElementById("para7").innerHTML =
'Player uid using Symbol: ' + player[uid] + '<br>' +
'Player uid using Object: ' + player.uid + '<br>' +
'typeof(uid) is ' + typeof(uid);
</script>
<!-- JavaScript code Ends here -->
</body>
</html>