Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check if the value is primitive or not in JavaScript?
In JavaScript, data types are divided into two categories: primitive and non-primitive. Understanding how to check if a value is primitive is crucial for proper data handling.
Primitive data types: String, number, undefined, boolean, null, symbol, and bigint.
Non-primitive data types: Objects (including arrays, functions, and dates).
Primitive values are immutable and represent data at the lowest level of the language. When you "change" a primitive value, you're actually creating a new value and reassigning it to the variable.
Using Object() Constructor
The Object() constructor converts primitive values to objects. By comparing the original value with its object-wrapped version using strict equality, we can detect primitives.
Syntax
inputValue !== Object(inputValue)
Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>Check if the value is primitive or not</h2>
<p id="result"></p>
</body>
<script type="text/javascript">
function isPrimitive(inputValue) {
if (inputValue === Object(inputValue)) {
console.log("Value is not primitive")
document.getElementById("result").innerHTML += inputValue + ": not primitive <br>"
} else {
console.log("Value is primitive")
document.getElementById("result").innerHTML += inputValue + ": primitive <br>"
}
}
isPrimitive(null)
isPrimitive(12)
isPrimitive("This is simple string")
isPrimitive(new String("This is string object"))
isPrimitive(false)
isPrimitive([1, 2, 3])
isPrimitive([])
isPrimitive({})
</script>
</html>
Using typeof Operator
The typeof operator returns the data type as a string. Since non-primitive types are objects or functions, we can check against these types. However, null requires special handling as typeof null returns "object" due to a JavaScript quirk.
Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>Check if the value is primitive or not</h2>
<div id="result"></div>
</body>
<script type="text/javascript">
function isPrimitive(inputValue) {
if (inputValue == null) {
return "primitive <br>";
}
if (typeof(inputValue) == "function" || typeof(inputValue) == "object") {
return "not primitive <br>";
} else {
return "primitive <br>";
}
}
let resultDiv = document.getElementById("result");
resultDiv.innerHTML += "12: " + isPrimitive(12);
resultDiv.innerHTML += "null: " + isPrimitive(null);
resultDiv.innerHTML += "false: " + isPrimitive(false);
resultDiv.innerHTML += "[1,2,3]: " + isPrimitive([1,2,3]);
resultDiv.innerHTML += ""This is simple string": " + isPrimitive("This is simple string");
resultDiv.innerHTML += "new String(): " + isPrimitive(new String("This is string object"));
resultDiv.innerHTML += "[]: " + isPrimitive([]);
resultDiv.innerHTML += "{}: " + isPrimitive({});
resultDiv.innerHTML += "new Date(): " + isPrimitive(new Date());
</script>
</html>
Comparison of Methods
| Method | Handles null correctly? | Code simplicity |
|---|---|---|
Object() comparison |
Yes | Simpler logic |
typeof operator |
Requires special handling | More explicit checks needed |
Conclusion
Both methods effectively check for primitive values. The Object() approach is cleaner, while typeof provides more explicit type information but requires special null handling.
3K+ Views
