New MooTools Methods: .from()

By  on  

MooTools 1.3 beta 2 was recently released and you may see a few new methods implemented to String, Array, Number, and Function: from. The from method of each of those Types returns an object of that type. Simply put: you'll always receive back an object of that type based on what you give it.

The New Method Code

Function.from = function(item){
	return (typeOf(item) == 'function') ? item : function(){
		return item;
	};
};

Array.from = function(item){
	if (item == null) return [];
	return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : Array.prototype.slice.call(item) : [item];
};

Number.from = function(item){
	var number = parseFloat(item);
	return isFinite(number) ? number : null;
};

String.from = function(item){
	return item + '';
};

The from method is added to String, Array, Number, and Function natives. Enough with the underlying code though -- examples are easier to understand.

Function.from, Array.from, Number.from, String.from Examples

Array.from('Item');
//returns ['Item'] (array type)

Function.from('Item, Whoa, Hey');
//returns function() { return 'Item, Whoa', Hey'; } (function type)

String.from(function() { alert('MooTools FTW!'); });
//returns function () { alert("MooTools FTW!"); } (string type)

Number.from('8765309');
//returns 8765309 (number type)

Each example above shows you what's returned by each method. Being able to generate a given object type from any argument using from can save you a lot of time -- especially when a given MooTools class or method requires an argument of a specific type. from is just another example of how MooTools can make your JavaScript life easier!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    WebKit-Specific Style:  -webkit-appearance

    I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

Discussion

  1. Oh great! :)

    nomore switch-cases for specific type argument…
    Life is really easier with MooTools

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