All the JavaScript programmers should known and understand difference between JavaScript object, primitive and literal ? As we read or practice more JavaScript programming we may often come across these terms. In this article I will cover the difference between the three. Let’s see what all the three terms mean in JavaScript programming.
Before going further you may want to learn about data types in javascript here.
JavaScript Literal
JavaScript literal represents value of a specific data type, such as quoted string, floating point number or boolean.
"vikram chaudhary" 1.50 false
In the first case I have created a string literal. Next is float literal and the last is boolean. Here we have used the literal notation to use the extensive set of functionality. However if we want to do more with variable we have to use the data type’s complementary javascript object and its properties.
var str1 = "vikram.chaudhary"; console.log(str1.length); //16
For example, if I want to calculate the length of a string as shown in the above code, we will access the String object’s length property.
While calculating the length a new string object is created. This new string object is created by accessing the String object’s property on the literal. And the value of this new object is set to the str1’s values. The length property is accessed and printed out and the newly created object is discarded.
This is the basic difference between creating a literal and String object using new keyword as discussed in the next section. If you are planning to use any of the functions on the primitive types it’s better to use the object notation of the primitive type. This will prevent from conversions which I discussed in the previous para.
JavaScript primitive
There are exactly five primitive data types in javascript. String, number, boolean, null and undefined. Only string, number and boolean data types have alternate constructor object. Otherwise these three primitives are represented as literals as shown in the code below.
var str = "vikram chaudhary"; var flt = 1.50; bar bln = false;
We can create the primitive boolean, string and number variables either by using a literal representation as in the above code. Or it can be created using the object without using the new operator.
var str1 = String("vikram chaudhary");// primitive string
var flt = Number(1.5);//primitive number
var bln = Boolean(true);//primitive boolean
console.log(typeof(str1)); //string
console.log(typeof(flt));// number
console.log(typeof(bln)); //booleanObjects in JavaScript
To create an object we have to use the new keyword as shown in below code
var str1 = new String("vikram chaudhary");// object
var flt = new Number(1.5);//object
var bln = new Boolean(true);//object
console.log(typeof(str1)); //object
console.log(typeof(flt)); //object
console.log(typeof(bln)); //objectWe should note sown here that the javascript developers don’t directly create object instances for the three primitive data types.Developers just want a number boolean or string to just act like number, boolean or string rather than an object.
Strict Comparison:
We use “===” operator to check the object type equality in javascript. For == and === operator you can visit this article.
var str1 = String("vikram chaudhary");
if(str1 === "vikram chaudhary")
console.log("equal");
else
console.log("Not equal");
var str1 = new String("vikram chaudhary");
if(str1 === "vikram chaudhary")
console.log("equal");
else
console.log("Not equal");Can you spot the difference between above two code snippets. In the first case the output will be “equal” as on both side of the equality operator, the operands are of type string.
But in the second case one is type object i.e. str1 and the other is string literal. The result will be “Not Equal”.
Conclusion:
In this article I have discussed all the three very confusing words literals, primitives and objects. If these words are not clearly understood learning JavaScript can become difficult. But on the other hand if we are very much known to these words it is very easy to learn JavaScript.