Basics
You may not know it but, in JavaScript, whenever we interact with string, number or boolean primitives we enter a hidden world of object shadows and coercion.
string, number, boolean, null, undefined, and symbol.
In JavaScript there are 7 primitive types: undefined
, null
, boolean
, string
, number
, bigint
and symbol
. Everything else is an object. The primitive types boolean
, string
and number
can be wrapped by their object counterparts. These objects are instances of the Boolean
, String
and Number
constructors respectively.
typeof true; //"boolean"
typeof new Boolean(true); //"object"
typeof "this is a string"; //"string"
typeof new String("this is a string"); //"object"
typeof 123; //"number"
typeof new Number(123); //"object"
If primitives have no properties, why does "this is a string".length
return a value?
Because JavaScript will readily coerce between primitives and objects. In this case the string value is coerced to a string object in order to access the property length. The string object is only used for a fraction of second after which it is sacrificed to the Gods of garbage collection – but in the spirit of the TV discovery shows, we will trap the elusive creature and preserve it for further analysis…
To demonstrate this further consider the following example in which we are adding a new property to String constructor prototype.
String.prototype.sampleProperty = 5;
var str = "this is a string";
str.sampleProperty; // 5
By this means primitives have access to all the properties (including methods) defined by their respective object constructors.
So we saw that primitive types will appropriately coerce to their respective Object counterpart when required.
Analysis of toString()
method
Consider the following code
var myObj = {lhs: 3, rhs: 2};
var myFunc = function(){}
var myString = "This is a sample String";
var myNumber = 4;
var myArray = [2, 3, 5];
myObj.toString(); // "[object Object]"
myFunc.toString(); // "function(){}"
myString.toString(); // "This is a sample String"
myNumber.toString(); // "4"
myArray.toString(); // "2,3,5"
As discussed above, what's really happening is when we call toString()
method on a primitive type, it has to be coerced into its object counterpart before it can invoke the method.
i.e. myNumber.toString()
is equivalent to Number.prototype.toString.call(myNumber)
and similarly for other primitive types.
But what if instead of primitive type being passed into toString()
method of its corresponding Object constructor function counterpart, we force the primitive type to be passed as parameter onto toString()
method of Object function constructor (Object.prototype.toString.call(x)
)?
Closer look at Object.prototype.toString()
As per the documentation,
When the toString method is called, the following steps are taken:
- If the
this
value is undefined
, return "[object Undefined]"
.
- If the
this
value is null
, return "[object Null]"
.
- If this value is none of the above, Let
O
be the result of calling toObject
passing the this
value as the argument.
- Let class be the value of the
[[Class]]
internal property of O
.
- Return the String value that is the result of concatenating the three Strings
"[object "
, class
, and "]"
.
Understand this from the following example
var myObj = {lhs: 3, rhs: 2};
var myFunc = function(){}
var myString = "This is a sample String";
var myNumber = 4;
var myArray = [2, 3, 5];
var myUndefined = undefined;
var myNull = null;
Object.prototype.toString.call(myObj); // "[object Object]"
Object.prototype.toString.call(myFunc); // "[object Function]"
Object.prototype.toString.call(myString); // "[object String]"
Object.prototype.toString.call(myNumber); // "[object Number]"
Object.prototype.toString.call(myArray); // "[object Array]"
Object.prototype.toString.call(myUndefined); // "[object Undefined]"
Object.prototype.toString.call(myNull); // "[object Null]"
References:
https://es5.github.io/x15.2.html#x15.2.4.2
https://es5.github.io/x9.html#x9.9
https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/