Monday, November 18, 2024
Google search engine
HomeLanguagesJavascriptWhat is a potential pitfall using typeof bar === “object” to determine...

What is a potential pitfall using typeof bar === “object” to determine if bar is an object ?

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>
    // Output should be "string"
    console.log(typeof "Geeks");
     
    // Output should be "number"
    console.log(typeof 1);
     
    // Output should be "boolean"
    console.log(typeof false);
     
    // Undeclared variable. Output should be "undefined"
    console.log(typeof neveropenForGeeks);
     
    // Output should be "object"
    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"
    };
      
    // Printing object
    console.log(gfgObject);
</script>


Output:

{
   name: 'Rajat',
   age: 30,
   gender: 'Male'
}

Example: Create an object by using any object constructor

Javascript




<script>
 
    // Constructor function ("this" refers
    // to the current object)
    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";
   
  // Printing object
  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;
     
    // Logs true to the console
    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;
 
 // Logs false
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

RELATED ARTICLES

Most Popular

Recent Comments