What is JavaScript Data Type ?
JavaScript offers various data types for various values. In JavaScript, there are two types of data.
- Primitive data type
- Non-primitive (reference) data type
JavaScript is a dynamic variable - type language which means that we don't have to specify variable type because JavaScript engine is dynamically utilized. We need to use var here to specify the data type. It can hold any type of values such as numbers, strings, objects and more.
For Example:
var length = 16; // Number
var lastName = "Rawats"; // String
var x = {firstName:"Shruti", lastName:"Rawat"}; // Object
JavaScript Strings
A string is a set of characters such as "Shruti Negi". Strings are written with quotes. We can use single or double quotes:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written with quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
var carName1 = "Mohit Negi";
var carName2 = 'Rohit Negi';
document.getElementById("demo").innerHTML = carName1 + "<br>" + carName2; </script>
</body>
</html>
Output:
We can use quotes inside a string, as long as they don't match the quotes surrounding the string:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string:</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Rohit'";
var answer3 = 'He is called "Mohit"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>
Output:
JavaScript Numbers
JavaScript has only one type of numbers. Numbers can be written with, or without decimals:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
var x1 = 55.00;
var x2 = 65;
var x3 = 4.15;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
Output:
Extra large or extra small numbers can be written with scientific (exponential) notation:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with scientific (exponential) notation:</p>
<p id="demo"></p>
<script>
var y = 456e7;
var z = 456e-7;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>
</body>
</html>
Output:
JavaScript Booleans
Booleans can only have two values: true or false.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
var x = 6;
var y = 6;
var z = 7;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
Output:
JavaScript Arrays
JavaScript arrays are written with square brackets. Array items are separated by commas. The code below declares (creates) an array called friends, containing three items (firends names):
For 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="demo"></p>
<script>
var firends = ["Rohit","Mohit","Shruti"];
document.getElementById("demo").innerHTML = firends[0];
</script>
</body>
</html>
Output:
Note: Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
JavaScript Objects
JavaScript objects are written with curly braces {}. Properties of objects are written as names: commas separated, value pairs.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
var person = {
firstName : "Shruti",
lastName : "Negi",
age : 25,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Output:
Note: Here The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.
The typeof Operator
We can use the JavaScript typeof operator to find the type of a JavaScript variable. The typeof operator returns the type of a variable or an expression:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe"+ "<br>"+
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>
Output:
Undefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Output:
Empty Values
An empty value has nothing to do with undefined. An empty string has a legal value as well as a kind.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a type:</p>
<p id="demo"></p>
<script>
var firends = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof firends;
</script>
</body>
</html>
Output:
Null
In JavaScript null is "nothing". It should be something that is not there. Sadly, the null data type is an object in JavaScript.
We can empty an object by setting it to null:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Here we our objects can be emptied by setting the value to <b>null</b>.</p>
<p id="demo"></p>
<script>
var person = {firstName:"Rohit", lastName:"Negi", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>
Output:
Difference Between Undefined and Null
undefined and null are equal in value but different in type:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Undefined and null are equal in value but different in type:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>
Output:
Primitive Data
A primitive, value of the data is one simple value of the data without additional properties and methods. The typeof operator can return one of these primitive types:
- string
- number
- boolean
- undefined
| 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 |
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "Rohit" + "<br>" +
typeof 5.15 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html>
Output:
Complex Data
The typeof operator can return one of two complex types:
- function
- object
For both objects, arrays and null, the typeof operator returns the object. The operator does not return a function object.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns object for both objects, arrays, and null.</p>
<p>The typeof operator does not return object for functions.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof {name:'Nashi', age:25} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>
</body>
</html>
Output: