Determining Object Type with MooTools’ typeOf

By  on  

One thing about JavaScript I dislike is the vagueness of what the typeof operator returns. Pass typeof an array? You get "object" back (which it is, but a more concise answer would be helpful). Pass typeof a Date object? You get "object" again. What if there was a better way of determining an object's descriptive type? That's where the typeOf function within MooTools Core comes into play.

typeOf Source and Usage

The typeOf function is actually quite short:

var typeOf = this.typeOf = function(item){
	if (item == null) return 'null';
	if (item.$family) return item.$family();

	if (item.nodeName){
		if (item.nodeType == 1) return 'element';
		if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? 'textnode' : 'whitespace';
	} else if (typeof item.length == 'number'){
		if (item.callee) return 'arguments';
		if ('item' in item) return 'collection';
	}

	return typeof item;
};

typeOf checks for specific properties on the object in question to determine its descriptive type. Simple, right? Note the $family() check within typeOf; each Type (Array, Function, Date, etc.) instance is given a $family method which returns its type. Let's try a few typeOf calls:

typeof document.body;  // returns "object"
typeOf(document.body);  // returns "element"

typeof new Date();  // returns "object"
typeOf(new Date());  // returns "date"

typeof [];  // returns "object"
typeOf([]);  // returns "array"

typeOf is an awesome utility function, right? Getting a more detailed object type than simply "object" can be hugely help in validating the object before using it. typeOf is just another awesome utility within the MooTools JavaScript framework.

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

Discussion

  1. I use the regular “typeOf” to determine if classes are present, but the MooTools typeOf is much better, and great for making sure variables are the correct type. I wish more plugin coders would return robust error messages with these kinds of checks.

  2. Nice one !!!!!!

  3. Lorenzo

    Anyone knows if Mootools’ typeOf is more reliable than standard typeof when I want to check if something is a function or not?

    var a = (function() { return true; });
    var b = { name: 'value' };
    // typeof(a) == typeOf(a) == 'function' is always TRUE?
    // typeof(b) == typeOf(b) != 'function' is always TRUE?
    
  4. Mootools supports another type check – the Type Object.
    Type.isNumber(var), Type.isObject() etc.

    This is nowhere in the docs (except once used in an example on the Array page). It is shorter and more semantic when you are checking for one type, don’t know why it is hidden.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!