Question

I thought there are 5 primitive types for JavaScript (null, undefined, boolean, number, string), and then there is object (which includes array, function, and custom defined pseudo class objects). But it is somewhat strange that

typeof null

is "object", and there is no easy way to get back the object class name for pseudo-classical class such as Person, Author. I wonder if there is a newer operator or function that can return possibly lower case names for primitive type (and "null" for null, not "object"), and capital case for custom-defined pseudo-classical objects?

If no such operator or function exist in ECMA-5 or later, would it make sense to have it? Otherwise, we may need to rely on our own definition or any framework, but that will not be standard across different platforms.

Answer 1

ECMAScript 5 objects have an internal property known as [[Class]]. This is the closest thing in ES5 to what you’re asking. You can access [[Class]] with Object.prototype.toString as follows:

function getClassOf(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
}

getClassOf([ ]); // => "Array"
getClassOf(new Date()); // => "Date"
getClassOf(function() { }); // => "Function"
getClassOf(3); // => "Number"
getClassOf(true) // => "Boolean"
getClassOf(document.createElement('div')); // => "HTMLDivElement"
getClassOf(Math); // => "Math"
getClassOf(null); // => "Null"
getClassOf(undefined); // => "Undefined"
getClassOf({ x: 1 }); // => "Object"

This behavior is crucial for adequately identifying objects which come from other frames.

However, it doesn’t work for user-defined constructors. Objects created with user-defined constructors have [[Class]] "Object".

function Foo() { }
var foo = new Foo();

getClassOf(foo); // => "Object"

It looks like ECMAScript 6 might have the ability to extend what’s returned by Object.prototype.toString, so that getClassOf(foo) could be "Foo" through the @@toStringTag symbol.

See https://mail.mozilla.org/pipermail/es-discuss/2012-September/025344.html for more information on the upcoming standard.

---

You could create your own function to do what you want like this:

function getTypeOf(value) {

    // Return "null" for null.
    if (value === null) return 'null';

    // Return primitive types.
    var type = typeof value;
    if (type != 'object') return type;

    // Return [[Class]] if available for objects.
    type = Object.prototype.toString.call(value).slice(8, -1);
    if (type != 'Object') return type;

    // Return "Object" if it wasn't created with another constructor.
    var proto = Object.getPrototypeOf(value);
    if (proto == Object.prototype)
        return 'Object';

    // Return the constructor name if constructor hasn't been
    // modified on the object.
    if (value.constructor && proto === value.constructor.prototype)
        return value.constructor.name;

    // Return the constructor name if constructor hasn't been
    // modified on the prototype.
    if (proto.constructor && proto === proto.constructor.prototype)
        return proto.constructor.name;

    // Return "???" if the type is indeterminable.
    return '???';

}

Examples:

getTypeOf([ ]); // => "Array"
getTypeOf(new Date()); // => "Date"
getTypeOf(function() { }); // => "Function"
getTypeOf(3); // => "number"
getTypeOf(true) // => "boolean"
getTypeOf(document.createElement('div')); // => "HTMLDivElement"
getTypeOf(Math); // => "Math"
getTypeOf(null); // => "null"
getTypeOf(undefined); // => "undefined"
getTypeOf({ x: 1 }); // => "Object"

function Foo() { }
var foo = new Foo();

getTypeOf(foo); // => "Foo"

// If the constructor property is changed, still works.
foo.constructor = function FakeConstructor() { };
getTypeOf(foo); // => "Foo"

// If the constructor property AND the prototype's constructor is
// changed, result is "???".
foo.constructor = function FakeConstructor() { };
Foo.prototype.constructor = function FakeConstructor2() { };
getTypeOf(foo); // => "???"