const str1 = 'Imagine'; // literal form const str2 = String('Imagine'); const strObj = new String('Imagine'); // constructor function form
We generally prefer the literal form
'Imagine' when writing code, but how does it differ from other forms listed above? How can we invoke methods on this primitive value?
'Imagine'.length; // how are we able to access this property 'Imagine'.toUpperCase(); // or call any other String method 1971.toString(); // this works for other primitive types as well!
It works because of auto-boxing and a bit of coercion magic.
Primitives and objects
Considering the first example:
const str1 = 'Imagine'; const str2 = String('Imagine'); const strObj = new String('Imagine');
str2 hold a
string primitive value.
strObj on the other hand holds the (
String) object equivalent of
The difference between
strObj initialization is the
new keyword. When the
String function is called without a
new keyword, it returns a primitive value. With a
new keyword it works as a constructor function and returns a
str2 are identical (and both are a bit different from
strObj). Looking at their comparison:
const str1 = 'Imagine'; const str2 = String('Imagine'); console.log(str1 === str2); // true const strObj = new String('Imagine'); console.log(str1 === strObj); // false console.log(str1 == strObj); // true
A strict equality (
===) between the literal and object form returns
false but a coercive equality (
true. This works since the object form “stores” the primitive value (
'Imagine') and was able to coerce itself to the primitive form at the time of equality.
We can also retrieve the primitive value (
string) from a “wrapper” (
String) object using the
The above example explains the similarities between primitive and object values. Now, to uncover auto-boxing.
Here’s a recap, lets look at the types as well this time:
const str1 = 'Imagine'; const strObj = new String('Imagine'); console.log(typeof str1); // 'string' console.log(typeof strObj); // 'object'
All methods and properties are available on the
String object’s prototype (
Now, whenever you take a look at this piece of code, you’ll be able to understand the magic and beauty behind it 🙂
// string primitive → String object → prototype → toUpperCase 'Imagine'.toUpperCase();