JavaScript typeof : Learn Data Types, typeof Operator, null, undefined, and More
Table of Contents
JavaScript typeof :
Explore JavaScript fundamentals, including data types, the typeof operator, null, undefined, and more. Dive into the core concepts of JavaScript programming with this beginner’s guide.
In JavaScript, the typeof operator is used to determine the data type (or type) of a given value or expression. It returns a string that represents the data type of the operand.
Here’s how you use it:
JavaScript typeof operand
Here, operand is the value or expression you want to check the type of.
The result of typeof is always a string
It can return one of the following values:
“undefined”: If the operand is declared but has not been assigned a value, or if the operand is a function parameter that has not been passed a value.
“boolean”: If the operand is a boolean value (true or false).
“number”: If the operand is a number, including integers and floating-point numbers.
“string”: If the operand is a string.
“symbol”: If the operand is a symbol, which is a unique and immutable data type introduced in ECMAScript 6 (ES6).
“object”: If the operand is an object or null.
“function”: If the operand is a function.
Here are some examples:
typeof undefined; // "undefined"
typeof true; // "boolean"
typeof 42; // "number"
typeof "Hello"; // "string"
typeof Symbol(); // "symbol"
typeof {} // "object"
typeof null; // "object" (Note: This is a known quirk in JavaScript)
typeof function(){}; // "function"
All JavaScript typeof
JavaScript’s typeof operator can return the following values to represent the data type of a given operand:
“undefined”:
Represents an uninitialized or undefined value.
typeof undefined; // “undefined”
“undefined”:complete code example in html
Here’s a complete HTML code example that demonstrates the use of the “undefined” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "undefined" Example</title>
</head>
<body>
<script>
// Check the typeof "undefined" value
var someVariable; // Declaring a variable without initializing it
var anotherVariable = undefined; // Initializing a variable with undefined
// Using typeof to check the data type
var typeOfSomeVariable = typeof someVariable;
var typeOfAnotherVariable = typeof anotherVariable;
// Displaying the results
document.write('typeof someVariable: ' + typeOfSomeVariable + '<br>');
document.write('typeof anotherVariable: ' + typeOfAnotherVariable + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare two variables, someVariable and anotherVariable. The someVariable is declared without initialization, so its value is undefined. The anotherVariable is explicitly initialized with the value undefined.
- We use the typeof operator to check the data types of these variables and store the results in typeOfSomeVariable and typeOfAnotherVariable.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
typeof someVariable: undefined
typeof anotherVariable: undefined
This demonstrates how the “undefined” data type is used and how you can check for it using the typeof operator in JavaScript within an HTML document.
JavaScript Typeof “boolean”:
Represents a boolean value (true or false).
typeof true; // “boolean”
“boolean”:
Here’s a complete HTML code example that demonstrates the use of the “boolean” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "boolean" Example</title>
</head>
<body>
<script>
// Boolean values
var isTrue = true; // A true boolean value
var isFalse = false; // A false boolean value
// Using typeof to check the data type
var typeOfTrue = typeof isTrue;
var typeOfFalse = typeof isFalse;
// Displaying the results
document.write('isTrue is of type: ' + typeOfTrue + '<br>');
document.write('isFalse is of type: ' + typeOfFalse + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare two variables, isTrue and isFalse, and assign them boolean values true and false, respectively.
- We use the typeof operator to check the data types of these variables and store the results in typeOfTrue and typeOfFalse.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
isTrue is of type: boolean
isFalse is of type: Boolean
javaScript typeOf “number”:
Represents a numeric value, including integers and floating-point numbers.
typeof 42; // “number”
number:complete code example
Here’s a complete HTML code example that demonstrates the use of the “number” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "number" Example</title>
</head>
<body>
<script>
// Number values
var integerNumber = 42; // An integer number
var floatingPointNumber = 3.14; // A floating-point number
// Using typeof to check the data type
var typeOfInteger = typeof integerNumber;
var typeOfFloat = typeof floatingPointNumber;
// Displaying the results
document.write('integerNumber is of type: ' + typeOfInteger + '<br>');
document.write('floatingPointNumber is of type: ' + typeOfFloat + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare two variables, integerNumber and floatingPointNumber, and assign them numeric values, one as an integer and the other as a floating-point number.
- We use the typeof operator to check the data types of these variables and store the results in typeOfInteger and typeOfFloat.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
integerNumber is of type: number
floatingPointNumber is of type: number
This demonstrates how the “number” data type is used and how you can check for it using the typeof operator in JavaScript within an HTML document.
javaScript TypeOf “string”:
Represents a string of characters.
typeof “Hello”; // “string”
“string”:complete code example
Here’s a complete HTML code example that demonstrates the use of the “string” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "string" Example</title>
</head>
<body>
<script>
// String values
var greeting = "Hello, world!"; // A string
// Using typeof to check the data type
var typeOfGreeting = typeof greeting;
// Displaying the result
document.write('greeting is of type: ' + typeOfGreeting + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare a variable named greeting and assign it a string value, “Hello, world!”.
- We use the typeof operator to check the data type of the greeting variable and store the result in the typeOfGreeting variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
greeting is of type: string
This demonstrates how the “string” data type is used and how you can check for it using the typeof operator in JavaScript within an HTML document.
JavaScript “symbol” data type:
Represents a unique and immutable value introduced in ECMAScript 6 (ES6).
typeof Symbol(); // “symbol”
symbol:
Here’s a complete HTML code example that demonstrates the use of the “symbol” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "symbol" Example</title>
</head>
<body>
<script>
// Symbol value
var uniqueSymbol = Symbol('mySymbol'); // Creating a unique symbol with a description
// Using typeof to check the data type
var typeOfSymbol = typeof uniqueSymbol;
// Displaying the result
document.write('uniqueSymbol is of type: ' + typeOfSymbol + '<br>');
</script>
</body>
</html>
In this HTML example:
- We create a unique symbol using the Symbol() constructor and provide a description for it as “mySymbol”.
- We use the typeof operator to check the data type of the uniqueSymbol variable and store the result in the typeOfSymbol variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
Unique Symbol is of type: symbol
This demonstrates how the “symbol” data type is used, and you can check for it using the typeof operator in JavaScript within an HTML document.
Symbols are unique and immutable values introduced in ECMAScript 6 (ES6)
They are typically used to create object properties with private or internal meanings.
Javascript typeof “object”: Represents an object or null.
Note that it returns “object” for null, which is considered a quirk in JavaScript.
typeof {}; // “object”
typeof null; // “object”
JavaScript object data type
Here’s a complete HTML code example that demonstrates the use of the “object” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "object" Example</title>
</head>
<body>
<script>
// Object values
var person = {
name: 'John',
age: 30
}; // An object
var emptyObject = {}; // An empty object
// Using typeof to check the data type
var typeOfPerson = typeof person;
var typeOfEmptyObject = typeof emptyObject;
// Displaying the results
document.write('person is of type: ' + typeOfPerson + '<br>');
document.write('emptyObject is of type: ' + typeOfEmptyObject + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare two variables, person and emptyObject, and assign them values of type “object.” person is an object with properties name and age, while emptyObject is an empty object.
- We use the typeof operator to check the data types of these variables and store the results in typeOfPerson and typeOfEmptyObject.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
person is of type: object
emptyObject is of type: object
This demonstrates how the “object” data type is used, and you can check for it using the typeof operator in JavaScript within an HTML document.
Objects in JavaScript are used to store collections of key-value pairs and can represent a wide range of data structures and entities in your code.
javaScript “function” data type: Represents a function.
typeof function(){}; // “function”
These are the possible values that typeof can return.
It helps you determine the basic data type of a value or expression in JavaScript, which can be useful for type checking and handling different data types in your code.
function:
Here’s a complete HTML code example that demonstrates the use of the “function” data type in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof "function" Example</title>
</head>
<body>
<script>
// Function declaration
function greet(name) {
return 'Hello, ' + name + '!';
}
// Using typeof to check the data type
var typeOfGreet = typeof greet;
// Displaying the result
document.write('greet is of type: ' + typeOfGreet + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare a function named greet that takes a name parameter and returns a greeting message.
- We use the typeof operator to check the data type of the greet function and store the result in the typeOfGreet variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
greet is of type: function
This demonstrates how the “function” data type is used, and you can check for it using the typeof operator in JavaScript within an HTML document.
Functions are an essential part of JavaScript and are used to encapsulate and execute blocks of code.
The data type of NaN is number:
Yes, in JavaScript, the data type of NaN is indeed “number.” Here’s a complete HTML code example that demonstrates this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof NaN Example</title>
</head>
<body>
<script>
// Create a NaN value
var notANumber = NaN;
// Using typeof to check the data type
var typeOfNaN = typeof notANumber;
// Displaying the result
document.write('notANumber is of type: ' + typeOfNaN + '<br>');
</script>
</body>
</html>
In this HTML example:
- We create a variable named notANumber and assign it the value NaN, which stands for “Not-a-Number.”
- We use the typeof operator to check the data type of the notANumber variable and store the result in the typeOfNaN variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
notANumber is of type: number
This demonstrates that the data type of NaN is indeed “number” in JavaScript, which can be surprising but is a quirk of the language’s design.
The data type of an array is object:
Yes, in JavaScript, the data type of an array is “object.” Here’s a complete HTML code example that demonstrates this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof Array Example</title>
</head>
<body>
<script>
// Create an array
var myArray = [1, 2, 3, 4, 5];
// Using typeof to check the data type
var typeOfArray = typeof myArray;
// Displaying the result
document.write('myArray is of type: ' + typeOfArray + '<br>');
</script>
</body>
</html>
In this HTML example:
- We create an array named myArray containing some numeric values.
- We use the typeof operator to check the data type of the myArray variable and store the result in the typeOfArray variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
myArray is of type: object
This demonstrates that the data type of an array in JavaScript is indeed “object.” Arrays are a specialized type of object in JavaScript that have numeric indices and some additional methods and properties for working with ordered collections of data.
The data type of a date is object:
In JavaScript, the data type of a Date object is indeed “object.” Here’s a complete HTML code example that demonstrates this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof Date Object Example</title>
</head>
<body>
<script>
// Create a Date object representing the current date and time
var currentDate = new Date();
// Using typeof to check the data type
var typeOfDate = typeof currentDate;
// Displaying the result
document.write('currentDate is of type: ' + typeOfDate + '<br>');
</script>
</body>
</html>
In this HTML example:
- We create a Date object named currentDate using the new Date() constructor, which represents the current date and time.
- We use the typeof operator to check the data type of the currentDate variable and store the result in the typeOfDate variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
currentDate is of type: object
This demonstrates that the data type of a Date object in JavaScript is indeed “object.” Date objects are used to work with dates and times in JavaScript, and they have methods and properties for various date-related operations.
The data type of null is object:
In JavaScript, the data type of null is indeed reported as “object” when using the typeof operator. This behavior is considered a quirk in JavaScript’s history.
Here’s a complete HTML code example that demonstrates this behavior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof null Example</title>
</head>
<body>
<script>
// Create a variable and set it to null
var nullValue = null;
// Using typeof to check the data type
var typeOfNull = typeof nullValue;
// Displaying the result
document.write('nullValue is of type: ' + typeOfNull + '<br>');
</script>
</body>
</html>
In this HTML example:
- We create a variable named nullValue and set it to null, which represents the absence of a value.
- We use the typeof operator to check the data type of the nullValue variable and store the result in the typeOfNull variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
nullValue is of type: object
This demonstrates that when you use typeof on null, it returns “object” as a result. This behavior is a well-known quirk in JavaScript, and it is important to keep in mind when performing type checks or working with null values in your code.
The data type of an undefined variable is undefined *:
In JavaScript, the data type of an undefined variable is indeed “undefined.” Here’s a complete HTML code example that demonstrates this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof undefined Example</title>
</head>
<body>
<script>
// Declare a variable without initializing it
var undefinedVariable;
// Using typeof to check the data type
var typeOfUndefined = typeof undefinedVariable;
// Displaying the result
document.write('undefinedVariable is of type: ' + typeOfUndefined + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare a variable named undefinedVariable without initializing it, which means it is undefined.
- We use the typeof operator to check the data type of the undefinedVariable variable and store the result in the typeOfUndefined variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
undefinedVariable is of type: undefined
This demonstrates that the data type of an undefined variable in JavaScript is indeed “undefined.” This can be useful for checking whether a variable has been declared and assigned a value or not in your code.
The data type of a variable that has not been assigned a value is also undefined *:complete example
You are correct. The data type of a variable that has not been assigned a value is also “undefined.” Here’s a complete HTML code example that demonstrates this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof Unassigned Variable Example</title>
</head>
<body>
<script>
// Declare a variable without assigning a value
var unassignedVariable;
// Using typeof to check the data type
var typeOfUnassigned = typeof unassignedVariable;
// Displaying the result
document.write('unassignedVariable is of type: ' + typeOfUnassigned + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare a variable named unassignedVariable without assigning it a value. As a result, it is undefined.
- We use the typeof operator to check the data type of the unassignedVariable variable and store the result in the typeOfUnassigned variable.
- We use document.write() to display the result in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
unassignedVariable is of type: undefined
This demonstrates that both an undefined variable and a variable that has not been assigned a value have the data type “undefined” in JavaScript.
typeof: Primitive Data
The typeof operator in JavaScript is primarily used to determine the data type (or type) of a given value or expression.
It returns a string that represents the data type of the operand.
The data types it can return are typically classified into two categories:
primitive data types and non-primitive data types (objects).
Here, I’ll focus on the typeof results for primitive data types:
typeof undefined: Returns “undefined” for an uninitialized variable or when the value is explicitly set to undefined.
typeof null: Returns “object”. Note that this is considered a quirk in JavaScript, and null is a primitive value.
typeof booleanValue: Returns “boolean” for boolean values, either true or false.
typeof numberValue: Returns “number” for numeric values, including integers and floating-point numbers.
typeof stringValue: Returns “string” for string values.
typeof symbolValue: Returns “symbol” for symbol values (introduced in ECMAScript 6).
typeof functionValue: Returns “function” for function objects.
These are the results you can expect when using typeof with primitive data types in JavaScript. It helps you determine the basic data type of a value, which can be useful for type checking and handling different data types in your code.
complete code example
Here’s a complete HTML code example that demonstrates the use of the typeof operator with various primitive data types in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof with Primitive Data Types Example</title>
</head>
<body>
<script>
// Primitive data types
var undefinedVar; // undefined variable
var nullVar = null; // null value
var boolVar = true; // boolean value
var numVar = 42; // numeric value
var strVar = "Hello"; // string value
var symbolVar = Symbol("mySymbol"); // symbol value
var funcVar = function() {}; // function value
// Using typeof to check data types
var typeOfUndefined = typeof undefinedVar;
var typeOfNull = typeof nullVar;
var typeOfBoolean = typeof boolVar;
var typeOfNumber = typeof numVar;
var typeOfString = typeof strVar;
var typeOfSymbol = typeof symbolVar;
var typeOfFunction = typeof funcVar;
// Displaying the results
document.write('typeof undefinedVar: ' + typeOfUndefined + '<br>');
document.write('typeof nullVar: ' + typeOfNull + '<br>');
document.write('typeof boolVar: ' + typeOfBoolean + '<br>');
document.write('typeof numVar: ' + typeOfNumber + '<br>');
document.write('typeof strVar: ' + typeOfString + '<br>');
document.write('typeof symbolVar: ' + typeOfSymbol + '<br>');
document.write('typeof funcVar: ' + typeOfFunction + '<br>');
</script>
</body>
</html>
In this HTML example:
- We declare variables of various primitive data types, including undefined, null, boolean, number, string, symbol, and function.
- We use the typeof operator to check the data types of these variables and store the results in variables with names like typeOfUndefined, typeOfNull, etc.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the following output, demonstrating the data types of different values:
typeof undefinedVar: undefined
typeof nullVar: object
typeof boolVar: boolean
typeof numVar: number
typeof strVar: string
typeof symbolVar: symbol
typeof funcVar: function
This code example shows how the typeof operator can be used with various primitive data types in JavaScript.
typeof: Complex Data
The typeof operator in JavaScript is primarily used to determine the data type (or type) of a given value or expression. It returns a string that represents the data type of the operand. When applied to complex or non-primitive data types (objects), typeof can provide information about the general category of the object, but it may not give you detailed information about the specific type of object. Here are some common results for complex data types:
typeof objectValue: Returns “object” for most objects, including -defined objects, arrays, and built-in objects like the Date object.
typeof arrayValue: Returns “object” for arrays, as arrays are a type of object in JavaScript.
typeof functionValue: Returns “function” for function objects.
typeof nullValue: Returns “object”. Note that this is considered a quirk in JavaScript, and null is a primitive value.
typeof regExpValue: Returns “object” for regular expression objects.
typeof dateValue: Returns “object” for Date objects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript typeof with Complex Data Types Example</title>
</head>
<body>
<script>
// Complex data types
var obj = { name: 'John' }; // Object
var arr = [1, 2, 3]; // Array
var func = function() {}; // Function
var regExp = /pattern/; // Regular expression
var date = new Date(); // Date object
var error = new Error('An error occurred'); // Error object
var map = new Map(); // Map object
var set = new Set(); // Set object
// Using typeof to check data types
var typeOfObj = typeof obj;
var typeOfArr = typeof arr;
var typeOfFunc = typeof func;
var typeOfRegExp = typeof regExp;
var typeOfDate = typeof date;
var typeOfError = typeof error;
var typeOfMap = typeof map;
var typeOfSet = typeof set;
// Displaying the results
document.write('typeof obj: ' + typeOfObj + '<br>');
document.write('typeof arr: ' + typeOfArr + '<br>');
document.write('typeof func: ' + typeOfFunc + '<br>');
document.write('typeof regExp: ' + typeOfRegExp + '<br>');
document.write('typeof date: ' + typeOfDate + '<br>');
document.write('typeof error: ' + typeOfError + '<br>');
document.write('typeof map: ' + typeOfMap + '<br>');
document.write('typeof set: ' + typeOfSet + '<br>');
</script>
</body>
</html>
In this example:
- We declare variables of different complex data types, including objects, arrays, functions, regular expressions, Date objects, error objects, Map objects, and Set objects.
- We use the typeof operator to check the data types of these variables.
- We use document.write() to display the results in the HTML document.
When you open this HTML file in a web browser and inspect the page, you will see the results that indicate the general data type category for each complex data type.
The Data Type of typeof :
The typeof operator in JavaScript returns a string representing the data type of the given operand. To demonstrate the data type of the typeof operator itself, you can use the following code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Type of typeof Example</title>
</head>
<body>
<script>
// Using typeof to check the data type of typeof
var typeOfOperator = typeof typeof 42;
// Displaying the result
document.write('The data type of typeof is: ' + typeOfOperator + '<br>');
</script>
</body>
</html>
In this HTML example:
- We use the typeof operator twice: first to check the data type of the number 42 (which is “number”), and then to check the data type of the result of typeof 42, which is a string, “string”.
- We store the result of the second typeof operation in the variable typeOfOperator.
- We use document.write() to display the result, which will show that the data type of the typeof operator itself is a string, “string”.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
The data type of typeof is: string
This demonstrates that the typeof operator returns a string data type, even when used on itself or other values.
The constructor Property
- In JavaScript, the constructor property is a property that is automatically created for every object, and it references the constructor function that was used to create that object.
- This property allows you to identify the type or class of an object.
Here’s how the constructor property works:
Creating Objects:
When you create an object using a constructor function or a class, the constructor property is automatically set to that constructor function.
Checking Object Types:
You can use the constructor property to check the type of an object, which is especially useful when dealing with instances of custom constructor functions or classes.
Here’s an example that illustrates the use of the constructor property:
// Define a constructor function
function Person(name, age) {
this.name = name;
this.age = age;
}
// Create an object using the constructor function
var person = new Person("John", 30);
// Use the constructor property to check the object type
if (person.constructor === Person) {
document.write("person is an instance of Person");
} else {
document.write("person is NOT an instance of Person");
}
In this example:
- We define a Person constructor function to create Person objects.
- We create a person object using the Person constructor function.
- We use the constructor property to check if person is an instance of the Person constructor. If it is, we print a message indicating that person is an instance of Person.
- The constructor property helps identify the type of the person object, which in this case is Person.
Keep in mind that while the constructor property is a convenient way to check object types, it can be overridden or modified for custom objects, so it’s not always foolproof for type checking. Additionally, it’s primarily used for identifying custom constructor functions or classes and may not provide detailed information about built-in JavaScript objects or objects from third-party libraries.
complete code example in html
Here’s a complete HTML code example that demonstrates the use of the constructor property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript constructor Property Example</title>
</head>
<body>
<script>
// Define a constructor function
function Person(name, age) {
this.name = name;
this.age = age;
}
// Create an object using the constructor function
var person = new Person("John", 30);
// Use the constructor property to check the object type
var constructorType = person.constructor;
// Displaying the result
document.write('Object type using constructor property: ' + constructorType.name + '<br>');
</script>
</body>
</html>
In this HTML example:
- We define a Person constructor function to create Person objects, which have name and age properties.
- We create a person object using the Person constructor function.
- We access the constructor property of the person object and store it in the constructorType variable. The constructor property returns a reference to the constructor function.
- We use document.write() to display the result, specifically the name of the constructor function, which indicates the object type.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
Object type using constructor property: Person
This demonstrates how to use the constructor property to check the object type in JavaScript within an HTML document.
Empty Values
In JavaScript, “empty values” typically refer to values that do not contain any meaningful data or have not been assigned a value.
There are two primary types of empty values: null and undefined. While both represent the absence of a value, they are used in slightly different contexts:
null: The null value represents the intentional absence of any object value or a placeholder for an object that should exist but doesn’t. It is a value that is explicitly set or assigned to indicate that there is no object or value present.
undefined: The undefined value represents the absence of a defined value. It often occurs when a variable is declared but not initialized, or when a function does not return a value explicitly.
Here’s a code example that demonstrates the use of both null and undefined as empty values in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Empty Values Example</title>
</head>
<body>
<script>
// Using null as an empty value
var emptyValue1 = null;
// Using undefined as an empty value
var emptyValue2;
var emptyValue3 = undefined;
// Checking empty values
if (emptyValue1 === null) {
document.write('emptyValue1 is null<br>');
}
if (emptyValue2 === undefined) {
document.write('emptyValue2 is undefined<br>');
}
if (emptyValue3 === undefined) {
document.write('emptyValue3 is undefined<br>');
}
</script>
</body>
</html>
In this HTML example:
- We assign the null value to emptyValue1 to represent an intentionally empty value.
- We declare emptyValue2 without assigning a value, which makes it undefined.
- We assign the undefined value to emptyValue3.
- We use conditional statements to check and confirm whether these values are null or undefined.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
emptyValue1 is null
emptyValue2 is undefined
emptyValue3 is undefined
This demonstrates the use of null and undefined as empty values in JavaScript.
complete code example
Here’s a complete HTML code example that demonstrates the concept of undefined in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript undefined Example</title>
</head>
<body>
<script>
// Example 1: Declaring a variable without assigning a value
var uninitializedVar;
document.write('Value of uninitializedVar: ' + uninitializedVar + '<br>');
// Example 2: Using an undefined variable
var someVar;
if (typeof someVar === 'undefined') {
document.write('someVar is undefined<br>');
}
// Example 3: Function with missing return value
function noReturnValue() {}
var result = noReturnValue();
document.write('Value of result: ' + result + '<br>');
</script>
</body>
</html>
In this HTML example:
- Example 1: We declare a variable uninitializedVar without assigning it a value. By default, it is undefined, and we display its value.
- Example 2: We declare a variable someVar but do not assign a value. We then use the typeof operator to check if it is undefined and display a message.
- Example 3: We define a function noReturnValue that doesn’t return any value explicitly. When we call this function and store the result in the result variable, it becomes undefined.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
Value of uninitializedVar: undefined
someVar is undefined
Value of result: undefined
This demonstrates how undefined can occur in JavaScript, whether through uninitialized variables, checking for undefined values, or functions without a return value.
Null
In JavaScript, null is a special value that represents the intentional absence of any object value or a placeholder for an object that should exist but doesn’t. It is often used to indicate that a variable, object property, or function parameter intentionally does not have a value or is not pointing to any object.
Here are some key points about null:
Explicitly Set: You can explicitly set a variable or object property to null to indicate that it has no value.
Type of Null: The typeof operator applied to null returns “object”. This is a quirk in JavaScript and is considered one of its idiosyncrasies.
Comparison: When comparing null to other values using the equality operator (==), it will only be equal to undefined or itself (null == undefined is true). It is not equal to any other value.
Falsy Value: null is considered a falsy value in JavaScript, which means it is treated as false in boolean contexts.
Here’s a simple example that demonstrates the use of null in JavaScript:
// Explicitly setting a variable to null
var myVar = null;
// Checking if a variable is null
if (myVar === null) {
document.write("myVar is null");
} else {
document.write("myVar is not null");
}
// Using null as a placeholder for an object that doesn't exist
var person = null; // Initially, no person object exists
// Later in your code, you can create and assign an object to person
person = { name: "John", age: 30 };
In this example:
- We explicitly set the variable myVar to null to indicate that it has no meaningful value.
- We use a conditional statement to check if myVar is null and print a message accordingly.
- We demonstrate how null can be used as a placeholder for an object that may be created later in the code.
When working with JavaScript, you’ll often encounter null when handling cases where a variable or object doesn’t have a value or needs to be explicitly reset to indicate an empty state.
complete code example
Here’s a complete HTML code example that demonstrates the use of null in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript null Example</title>
</head>
<body>
<script>
// Example 1: Setting a variable to null
var myVar = null;
// Example 2: Checking if a variable is null
if (myVar === null) {
document.write('myVar is null<br>');
} else {
document.write('myVar is not null<br>');
}
// Example 3: Using null as a placeholder for an object
var person = null; // Initially, no person object exists
// Later in your code, you can create and assign an object to person
person = { name: "John", age: 30 };
// Displaying the person object
document.write('Person object: ' + JSON.stringify(person) + '<br>');
// Example 4: null compared to undefined
var undefinedVar;
if (undefinedVar === null) {
document.write('undefinedVar is null<br>');
} else if (undefinedVar === undefined) {
document.write('undefinedVar is undefined<br>');
}
</script>
</body>
</html>
In this HTML example:
- Example 1: We set the variable myVar to null to indicate that it has no meaningful value.
- Example 2: We use a conditional statement to check if myVar is null and display a message accordingly.
- Example 3: We demonstrate how null can be used as a placeholder for an object that may be created later in the code. Initially, the person variable is null, but it is later assigned an object with name and age properties.
- Example 4: We compare null to undefined to show the difference between the two.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
myVar is null
Person object: {“name”:”John”,”age”:30}
undefinedVar is undefined
This complete code example illustrates various aspects of using null in JavaScript, including setting variables to null, checking for null, and using it as a placeholder for objects.
Difference Between Undefined and Null
In JavaScript, both undefined and null represent the absence of a value, but they are used in slightly different contexts and have some subtle differences:
Undefined:
Automatic Default: Variables that are declared but not assigned a value are automatically initialized with undefined. Function parameters that are not provided with arguments also have the value undefined.
Type: When you access an uninitialized variable or a missing object property, it results in undefined.
Behavior in Comparisons: undefined is not equal to any other value, including itself. For example, undefined == null is true, but undefined == undefined is false.
Null:
Explicit Assignment: null is typically set explicitly by a developer to indicate that a variable, object property, or function return value intentionally has no value or is empty.
Type: null is a specific value that represents the absence of an object or value.
Behavior in Comparisons: null is equal to undefined (null == undefined is true) and itself (null == null is true).
Here’s a code example that illustrates the differences between undefined and null:
// Example 1: Undefined
var uninitializedVar; // Automatically set to undefined
var obj = {}; // An empty object with no properties
document.write(uninitializedVar); // Outputs: undefined
document.write(obj.nonExistentProperty); // Outputs: undefined
// Example 2: Null
var nullVar = null; // Explicitly set to null
document.write(nullVar); // Outputs: null
// Example 3: Comparisons
document.write(undefined == null); // Outputs: true
document.write(undefined === null); // Outputs: false
document.write(null == null); // Outputs: true
document.write(null === null); // Outputs: true
In this example:
undefined is automatically set for uninitialized variables and missing object properties.
null is explicitly assigned when a developer wants to indicate the absence of a value.
Comparisons show how undefined and null behave in different situations.
In summary, while both undefined and null represent the absence of a value, undefined often occurs as a default or when something is missing, while null is usually set explicitly by a developer to signify the absence of a value or an empty state.
complete code example
Here’s a complete HTML code example that demonstrates the differences between undefined and null in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Undefined vs Null Example</title>
</head>
<body>
<script>
// Example 1: Undefined
var uninitializedVar; // Automatically set to undefined
var obj = {}; // An empty object with no properties
document.write('Value of uninitializedVar: ' + uninitializedVar + '<br>');
document.write('Value of obj.nonExistentProperty: ' + obj.nonExistentProperty + '<br>');
// Example 2: Null
var nullVar = null; // Explicitly set to null
document.write('Value of nullVar: ' + nullVar + '<br>');
// Example 3: Comparisons
document.write('Comparison (undefined == null): ' + (undefined == null) + '<br>');
document.write('Comparison (undefined === null): ' + (undefined === null) + '<br>');
document.write('Comparison (null == null): ' + (null == null) + '<br>');
document.write('Comparison (null === null): ' + (null === null) + '<br>');
</script>
</body>
</html>
In this HTML example:
- Example 1: We declare an uninitializedVar, which is automatically set to undefined. We also create an empty object obj and attempt to access a non-existent property, which also results in undefined.
- Example 2: We explicitly set the variable nullVar to null.
- Example 3: We perform various comparisons to illustrate how undefined and null behave in comparisons.
When you open this HTML file in a web browser and inspect the page, you will see the following output:
Value of uninitializedVar: undefined
Value of obj.nonExistentProperty: undefined
Value of nullVar: null
Comparison (undefined == null): true
Comparison (undefined === null): false
Comparison (null == null): true
Comparison (null === null): true
This complete code example demonstrates the differences between undefined and null in JavaScript, including how they are assigned, their behavior in comparisons, and their use cases.
The instanceof Operator
In JavaScript, the instanceof operator is used to test whether an object is an instance of a particular class or constructor function.
It checks the prototype chain to determine if an object has a particular constructor in its prototype chain. Here’s how it works:
object instanceof constructor
object: The object you want to check.
constructor: A reference to the constructor function or class that you want to check if the object is an instance of.
The instanceof operator returns true if object is an instance of constructor, and false otherwise.
Here’s an example:
function Animal(name) {
this.name = name;
}
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
var myDog = new Dog("Buddy");
document.write(myDog instanceof Dog); // true
document.write(myDog instanceof Animal); // true
document.write(myDog instanceof Object); // true
document.write(myDog instanceof String); // false
In this example:
- We define two constructor functions, Animal and Dog.
- We create an instance of Dog called myDog.
- We use the instanceof operator to check if myDog is an instance of Dog, Animal, Object, and String.
- It returns true for Dog and Animal because myDog is an instance of both Dog and Animal (due to prototype chaining).
- It returns true for Object because all JavaScript objects inherit from Object in their prototype chain.
- It returns false for String because myDog is not an instance of the String constructor.
The instanceof operator is often used to determine the type of objects in JavaScript and is useful for checking inheritance relationships between objects and constructor functions or classes.
complete code example
Here’s a complete HTML code example that demonstrates the use of the instanceof operator in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript instanceof Operator Example</title>
</head>
<body>
<script>
// Define constructor functions
function Animal(name) {
this.name = name;
}
function Dog(name) {
Animal.call(this, name);
}
// Set up prototype chain
Dog.prototype = Object.create(Animal.prototype);
// Create instances
var myDog = new Dog("Buddy");
var someAnimal = new Animal("Generic Animal");
// Use instanceof operator to check the type
var isDog = myDog instanceof Dog;
var isAnimal = myDog instanceof Animal;
var isObject = myDog instanceof Object;
var isString = myDog instanceof String;
// Display the results
document.write('Is myDog an instance of Dog? ' + isDog + '<br>');
document.write('Is myDog an instance of Animal? ' + isAnimal + '<br>');
document.write('Is myDog an instance of Object? ' + isObject + '<br>');
document.write('Is myDog an instance of String? ' + isString + '<br>');
</script>
</body>
</html>
In this HTML example:
- We define two constructor functions, Animal and Dog.
- We set up the prototype chain so that Dog inherits from Animal.
- We create instances of Dog and Animal called myDog and someAnimal.
- We use the instanceof operator to check if myDog is an instance of Dog, Animal, Object, and String.
- We display the results using document.write().
When you open this HTML file in a web browser and inspect the page, you will see the following output:
Is myDog an instance of Dog? true
Is myDog an instance of Animal? true
Is myDog an instance of Object? true
Is myDog an instance of String? false
This complete code example demonstrates how the instanceof operator can be used to check the type and inheritance relationships of objects in JavaScript.
The void Operator
The void operator is a rarely used operator in JavaScript. It evaluates an expression and then returns undefined. It is typically used to create a “void” or “no-op” operation, where you want to perform some action but don’t need a meaningful return value.
Here’s the syntax of the void operator:
void expression;
expression: An expression that you want to evaluate.
Here are a few common use cases for the void operator:
Creating Bookmarklets: void is often used when creating bookmarklets (small JavaScript programs that you can save as bookmarks). This ensures that the bookmarklet doesn’t inadvertently return a value to the page, which could interfere with its functionality.
Preventing Navigation: You can use void in an anchor (<a>) tag’s href attribute to prevent it from navigating to a new page when clicked. For example, href=”javascript:void(0)” is commonly used to create non-navigating links.
Here’s an example of using the void operator to create a bookmarklet that alerts a message:
javascript:void alert(“Hello, World!”);
In this example, void is used to prevent the return value of the alert() function from interfering with the current page. Instead, it ensures that the bookmarklet only alerts the message and returns undefined.
While the void operator has some niche use cases, it is not commonly used in everyday JavaScript programming. In most situations, you can achieve your goals without the need for void.
complete code example
Here’s a complete HTML code example that demonstrates the use of the void operator in JavaScript within an anchor (<a>) tag to create a non-navigating link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript void Operator Example</title>
</head>
<body>
<p>Click the link below to trigger an alert:</p>
<a href="javascript:void(0);" onclick="showAlert()">Click Me</a>
<script>
function showAlert() {
alert("Hello, World!");
}
</script>
</body>
</html>
In this HTML example:
- We create an anchor (<a>) tag with the href attribute set to javascript:void(0);. This ensures that clicking the link does not navigate to a new page.
- We add an onclick attribute to the link, which calls the showAlert() JavaScript function when the link is clicked.
- Inside the <script> tag, we define the showAlert() function, which displays an alert message when called.
When you open this HTML file in a web browser and click the “Click Me” link, it triggers the showAlert() function and displays the “Hello, World!” alert message, demonstrating the use of the void operator to create a non-navigating link.
Quiz with answers about this lesson
Here’s a multiple-choice quiz about JavaScript concepts covered in this lesson:
1-What does the typeof operator in JavaScript return?
a) The value itself
b) The data type of the value
c) An error message
d) A boolean value
Answer: b) The data type of the value
2-Which data type represents the intentional absence of any object value or an empty state?
a) string
b) null
c) undefined
d) number
Answer: b) null
3-What is the primary use of the undefined value in JavaScript?
a) To represent empty strings
b) To indicate intentional absence of a value
c) To represent numeric values
d) To store boolean values
Answer: b) To indicate intentional absence of a value
4-Which operator is used to check if an object is an instance of a specific constructor function or class?
a) typeOf
b) instanceof
c) isInstanceOf
d) isTypeOf
Answer: b) instanceof
5-What does the void operator in JavaScript return?
a) The value itself
b) undefined
c) An error message
d) A boolean value
Answer: b) undefined
6-What is the result of null == undefined in JavaScript?
a) true
b) false
c) It causes an error
d) It depends on the context
Answer: a) true
7-What is the purpose of the constructor property in JavaScript?
a) To create new objects
b) To specify the object’s prototype
c) To check the type or class of an object
d) To define object methods
Answer: c) To check the type or class of an object
8-Which data type represents a single 16-bit numeric value and is often used as a unique identifier?
a) boolean
b) number
c) string
d) symbol
Answer: d) symbol
9-Which JavaScript operator is used to assign a default value to a variable if it is undefined?
a) ?
b) ??
c) ||
d) &&
Answer: b) ?? (Nullish coalescing operator)
10-What is the result of typeof NaN in JavaScript?
a) “number”
b) “NaN”
c) “undefined”
d) “string”
Answer: a) “number”
11-Which JavaScript data type is used to store a sequence of characters, such as text?
a) number
b) boolean
c) string
d) undefined
Answer: c) string
12-What is the primary use of the typeof operator in JavaScript?
a) To perform mathematical operations
b) To check the type of a variable or value
c) To create new objects
d) To concatenate strings
Answer: b) To check the type of a variable or value
13-Which JavaScript data type represents true or false values?
a) boolean
b) number
c) string
d) undefined
Answer: a) boolean
14-What is the result of 10 / 0 in JavaScript?
a) 10
b) 0
c) NaN (Not-a-Number)
d) Infinity
Answer: d) Infinity
15-What is the purpose of the instanceof operator in JavaScript?
a) To check if an object is empty
b) To compare two values for equality
c) To test if an object is an instance of a particular class or constructor function
d) To convert a value to a different data type
Answer: c) To test if an object is an instance of a particular class or constructor function
16-Which operator is used to combine two or more strings in JavaScript?
a) +
b) –
c) *
d) /
Answer: a) + (Concatenation operator)
17-What is the result of typeof null in JavaScript?
a) “null”
b) “undefined”
c) “object”
d) “string”
Answer: c) “object”
18-Which JavaScript data type represents a single, 64-bit floating-point number?
a) boolean
b) number
c) string
d) symbol
Answer: b) number
19-Which of the following statements is true about the null data type in JavaScript?
a) It represents a numeric value.
b) It represents the absence of a value or an empty state.
c) It is equivalent to the undefined data type.
d) It is used to store true or false values.
Answer: b) It represents the absence of a value or an empty state.
20-What is the primary purpose of the void operator in JavaScript?
a) To perform bitwise operations on numbers.
b) To create non-navigating links in HTML.
c) To convert a string to a number.
d) To check the type of an object.
Answer: b) To create non-navigating links in HTML.
21-Which JavaScript data type is used to represent unique identifiers, often used as object property keys?
a) number
b) boolean
c) symbol
d) string
Answer: c) symbol
22-What does the NaN (Not-a-Number) value represent in JavaScript?
a) A valid numeric value
b) A division by zero error
c) The result of an undefined variable
d) An invalid or unrepresentable numeric value
Answer: d) An invalid or unrepresentable numeric value
23-Which operator is used for strict equality comparison in JavaScript?
a) ==
b) ===
c) !==
d) !=
Answer: b) === (Strict equality operator)
24-What is the result of “5” + 2 in JavaScript?
a) 7
b) 52
c) “52”
d) NaN
Answer: c) “52”
25-Which operator is used for logical AND in JavaScript?
a) &&
b) ||
c) !
d) &
Answer: a) && (Logical AND operator)