What is a potential pitfall using typeof bar === “object” to determine if bar is an object ?
Last Updated :
13 Jan, 2023
The typeof operator in JavaScript returns a string that indicates the data type of the operand, whether it be a variable, function, or object.
Syntax: Following is the syntax of typeof operator:
typeof operand
// OR
typeof(operand)
Parameter: It takes the following parameter:
- operand: The expression whose type needs to be evaluated.
Example: Basic example demonstrating the typeof operator.
Javascript
<script>
console.log(typeof "Geeks");
console.log(typeof 1);
console.log(typeof false);
console.log(typeof geeksForGeeks);
console.log(typeof { name: "Rajat", gender: "Male" });
</script>
|
Output:
string
number
boolean
undefined
object
An object in JavaScript is a collection of properties and these properties usually come in the form of key-value pairs. It can be considered as a non-primitive data type.
There are three different methods to create an object:
- By an object literal
- By using any object constructor
- By creating an instance of Object class in JavaScript directly.
Example: Create an object by an object literal.
Syntax:
const object = {property1: value1, property2: value2};
Javascript
<script>
const gfgObject = {
name: "Rajat",
age: 30,
gender: "Male"
};
console.log(gfgObject);
</script>
|
Output:
{
name: 'Rajat',
age: 30,
gender: 'Male'
}
Example: Create an object by using any object constructor
Javascript
<script>
function student(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
const s = new student("Rajat",11,"Male");
console.log(s);
<script>
|
Output:
{
name: 'Rajat',
age: 11,
gender: 'Male'
}
Example: Create an object by creating an instance of Object class in JavaScript directly.
Syntax:
const GFG = new Object();
Javascript
const GFG = new Object();
GFG.name = "Rajat";
GFG.age = 35;
GFG.gender = "Male";
console.log(GFG);
|
Output:
{
name: 'Rajat',
age: 35,
gender: 'Male'
}
Coming to typeof bar === “object”, if the variable bar is an object meaning that if it takes the form of any of the three aforementioned object types, then the statement will return true. Initially, typeof bar === “object” seems like a reliable method to determine whether bar is an object or not. However, one potential pitfall of using the same is that in the realm of JavaScript, even the primitive value null is considered as an object.
This is actually a bug in the language since null should indicate the intentional absence of an object value yet it returns “object” when tested with the typeof operator. There was an attempt made to fix it in the past but it was rejected due to a backward compatibility issue. The following code snippet illustrates this issue:
Javascript
<script>
const bar = null;
console.log(typeof bar === 'object');
</script>
|
Output:
true
This can be avoided if a simple check is added to the pre-existing code. That is, check if bar !== null. Now it will yield the expected output (false).
Javascript
const bar = null;
console.log((bar !== null) && (typeof bar === 'object'));
|
Output:
false
Till this stage, it is assumed that bar is a variable. But what if bar is a function? The solution above will return false which is the desired output in most cases but if there is a scenario in which the expected output is true, the code needs to slightly modified as follows:
Javascript
<script>
function bar() {
const b = 1;
}
console.log((bar !== null) && (typeof bar === 'object') ||
(typeof bar === 'function'));
</script>
|
Output:
true
If bar is an array, then the solution above will return true which is the desired output in this case since arrays are considered objects but if there is a situation where the output is expected to be false, the code can be amended as shown below:
Javascript
<script>
const bar = [1, 2, 3];
console.log((bar !== null) && (typeof bar === "object") &&
(toString.call(bar) !== "[object Array]"));
</script>
|
Output:
false
There is one final alternative that returns false for arrays, nulls, and functions, but true for objects. The code looks as follows:
Javascript
<script>
const bar = { firstName: "foo", lastName: "bar" };
console.log((bar !== null) && (bar.constructor === Object));
</script>
|
Output:
true
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...