JavaScript typeof
In JavaScript, there are five types of data that can store information.
stringnumberbooleanobjectfunction
There are 6 types of objects:
ObjectDateArrayStringNumberBoolean
Two data types that cannot hold values:
The typeof Operator
You can figure out the data type of a JavaScript variable by using the typeof operator.
Please observe:
- The data type of NaN is number
- The data type of an array is object
- The data type of a date is object
- The data type of null is object
- The data type of an undefined variable is undefined
*
- The data type of a variable that has not been assigned a value is
also undefined *
You cannot use typeof to determine if a JavaScript object is an array (or a date).
Primitive Data
A basic data value is a simple piece of information without any extra features or actions.
You can find out the type of a value using the typeof operator, which can give you one of these basic types:
stringnumberbooleanundefined
Complex Data
You can use the typeof operator to get one of two complex types:
The typeof operator tells you that something is an object when you use it with objects, arrays, or null.
The typeof operator doesn't show object when used with functions.
The typeof tool shows that arrays are treated as objects in JavaScript, so when you use it with arrays, it returns object.
The Data Type of typeof
The typeof operator isn't a variable; it's an operator. Unlike variables, operators ( + - * / ) don't have a specific data type.
The typeof operator always gives a string, showing what type the thing is.
The constructor Property
The constructor property gives you the constructor function for all JavaScript variables.
You can use the constructor property to determine if an object is an array, meaning it has the word Array in it.
A simpler way is to verify whether the object is an Array by using the Array function.
To determine if an object is a Date (contains the word "Date"), you can examine the constructor property using the Date constructor.
Or even simpler, you can check if the object is a Date function:
Undefined
In JavaScript, when a variable doesn't have a value assigned to it, it is considered as having the value undefined. The type of such a variable is also undefined.
You can clear a variable by assigning the value undefined. The variable's type will then become undefined as well.
Empty Values
A blank value isn't connected to undefined.
A blank space can be considered both valid and categorized by its type.
Null
In JavaScript, when you see null, think of it as representing nothing. It's meant to signify the absence of something that should be there.
Unfortunately, in JavaScript, when you use the data type "null," it's treated as an object.
In JavaScript, there's a little mistake where typeof null says it's an object, but it should actually say null.
You can make an object empty by assigning it the value null:
In JavaScript, when you set an object to undefined, it means you're making it empty or indicating that it doesn't have a defined value.
Difference Between Undefined and Null
In JavaScript undefined and null have the same value, but they are of different types.
The instanceof Operator
The instanceof operator tells you if an object is an example of a particular type. It gives back true when the object is an instance of the specified type.
The void Operator
The void operator checks an expression and gives back undefined. It's commonly used to get the undefined basic value, like in "void(0)" (helpful when you want to evaluate an expression without using its return value).
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator tells you what kind of thing a variable, object, function, or expression is.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "'John' is " + typeof "John" + " <br> " +
"3.14 is " + typeof 3.14 + " <br> " +
"NaN is " + typeof NaN + " <br> " +
"false is " + typeof false + " <br> " +
"[1, 2, 3, 4] is " + typeof [1, 2, 3, 4] + " <br> " +
"{name:'John', age:34} is " + typeof {
name: 'John',
age: 34
} + " < br > " +
"new Date() is " + typeof new Date() + " <br> " +
"function () {} is " + typeof
function() {} + " <br> " +
"myCar is " + typeof myCar + " <br> " +
"null is " + typeof null;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator tells you what type a variable or expression is.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof "john" + " <br> " +
typeof 3.14 + " <br> " +
typeof true + " <br> " +
typeof false + " <br> " +
typeof x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator tells us the type of something in JavaScript. It says object for objects, arrays, and null.</p>
<p>The typeof command doesn't say 'object' for functions.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof {
name: 'john',
age: 34
} + " <br> " +
typeof [1, 2, 3, 4] + " <br> " +
typeof null + " <br> " +
typeof
function myFunc() {};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Properties</h1>
<h2>The constructor Property</h2>
<p>The constructor property gives back the function that created a variable or an object.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "john".constructor + " <br> " +(3.14).constructor + " <br> " +
false.constructor + " <br> " + [1, 2, 3, 4].constructor + " <br> " + {
name: 'john',
age: 34
}.constructor + " <br> " +
new Date().constructor + " <br> " +
function() {}.constructor;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>This "home made" isArray() function returns true when used on an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Object</h1>
<p>This "home made" isArray() function returns true when used on an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor === Array;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>
<p id="demo"></p>
<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>
<p id="demo"></p>
<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor === Date;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>. </p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML = car + " <br> " + typeof car;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>. </p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + " <br> " + typeof car;
</script>
</body>
</html>
<!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>
let car = "";
document.getElementById("demo").innerHTML = "The value is: " + car + " <br> " +
"The type is: " + typeof car;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Objects can be emptied by setting the value to <b>null</b>. </p>
<p id="demo"></p>
<script>
let person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The undefined Data Type</h2>
<p>Objects can be emptied by setting the value to <b>undefined</b>. </p>
<p id="demo"></p>
<script>
let person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The instanceof Operator</h2>
<p>The instanceof operator returns true if an object is an instance of a specified object:</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = (cars instanceof Array) + " <br> " + (cars instanceof Object) + " <br> " +(cars instanceof String) + " <br> " +(cars instanceof Number);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The void Operator</h2>
<p>
<a href="javascript:void(0);">Useless link</a>
</p>
<p>
<a href="javascript:void(document.body.style.backgroundColor='red');"> Click me to change the background color of body to red.</a>
</p>
</body>
</html>
HTML
CSS
Javascript
Jquery