What is the difference between JavaScript object and primitive types?

Question

Stoyan Stefanov in his excellent book 'Object-Oriented JavaScript' says:

Any value that doesn't belong to one of the five primitive types listed above is an object.

With five primitive types he means Number, String, Boolean, Undefined and Null. However in Google Chrome console it seems like number is not primitive type at all (compared to C primitive types like int). It looks like the primitive number has methods:

var a = 2.2;
console.log(a.toFixed()); // logs "2"

Thus I assumed that I can work with number as with an object, so I tried to assign a property to it:

var a = 2;
a.foo = 'bar';
console.log(a.foo); // logs undefined

I don't understand that behavior. If number has a method, it should behave like object, shouldn't it? It even has a prototype:

Number.prototype.foo = 'bar';
var a = 2;
console.log(a.foo); // logs 'bar'

So what is the magic behind this? How JavaScript treats objects versus primitive types? I would rather not use the word primitive and substitute it with simple objects. As I see it those are objects which can't be extended with new properties, however they are constructed through their constructor and also have prototype which can be extended like with normal objects.

Answer 1

[...] It looks like the primitive number has methods

The primitive, does not actually has its own properties. It gets coerced to an object in order to be able to access "its" properties. The coerced object is not accessable outside the called Method *(In strict mode even not inside the method)*. As such, the referenced variable is always a primitive.

Consider this simple example:

Number.prototype.myTypeInAMethod = function () {
   console.log (typeof this.valueOf ()) //"number" => The primitive is wrapped in an object. 
   return typeof this;
}

var num = 123;
typeof num; //number
num.myTypeInAMethod () //object

_{side note: In ES5s strict mode,this would be a primitive and the type would be number}

Since the variable num is a primitive, you can not assign values to it.

num.foo = "bar";
num.foo //undefined

If you instead create a number (or string) via its object constructor, its type indeed is an object. A quick check by adding a property shows it can actually be assigned.

var objNum = new Number(123);
typeof objNum ; //"object"
objNum.foo = "bar";
objNum.foo //"bar"

---

So what is the magic behind this? How JavaScript treats objects versus primitive types?

This process is described in ES5 §8.7.1 GetValue

For an object:

• If Type(V) is not Reference, return V.
• Let base be the result of calling GetBase(V).
• If IsUnresolvableReference(V), throw a ReferenceError exception.
• If IsPropertyReference(V), then
  • If HasPrimitiveBase(V) is false, then let get be the [[Get]] internal method of base, otherwise let get be the special [[Get]] internal method defined below.
  • Return the result of calling the get internal method using base as its this value, and passing GetReferencedName(V) for the argument.
• Else, base must be an environment record.
  • Return the result of calling the GetBindingValue (see 10.2.1) concrete method of base passing GetReferencedName(V) and IsStrictReference(V) as arguments.

For a primitive:

The following [[Get]] internal method is used by GetValue when V is a property reference^[1] with a primitive base value. It is called using base as its this value and with property P as its argument. The following steps are taken:

• Let O be ToObject(base).
• Let desc be the result of calling the [[GetProperty]] internal method of O with property name P.
• If desc is undefined, return undefined.
• If IsDataDescriptor(desc) is true, return desc.[[Value]].
• Otherwise, IsAccessorDescriptor(desc) must be true so, let getter be desc.[[Get]].
• If getter is undefined, return undefined.
• Return the result calling the [[Call]] internal method of getter providing base as the this value and providing no arguments.

_{NOTE The object that may be created in step 1 is not accessible outside of the above method. An implementation might choose to avoid the actual creation of the object. The only situation where such an actual property access that uses this internal method can have visible effect is when it invokes an accessor function.}

[1] IsPropertyReference(V). Returns true if either the base value is an object or HasPrimitiveBase(V) is true; otherwise returns false.