Last Updated: February 25, 2016
· brianblocker

JavaScript Cooltricks: String Magic

So let's say that you follow a particular design pattern in JavaScript where you "namespace" all of your functions, like so:

window.App = {};

window.App.coolTrick = function( value ) {
    return 'Foo stands for: ' + value;

Now you can do something awesome like so:

var foo_stands_for = App.coolTrick( 'found obligatory object' );

console.log( foo_stands_for );

Now, what happens if somehow you have the string value of a particular namespaced function? Perhaps you got the string from a JSON response, or maybe you're doing some crazy "convention over configuration" madness, or maybe you just have the string for no apparent reason.

var function_name = 'coolTrick';

What can you do with this function name? Well obviously you could just do something like this:

foo_stands_for = App[ function_name ]( 'Fill Oswald Orderly' );

OR we can do something slightly magical, like this:

String.prototype.functionize = function() {
    var string_value = this;
    var theFunction = App[ string_value ];

    return theFunction.prototype.apply( window, arguments );

foo_stands_for = function_name.functionize( 'forged oblivion oreo' );

// also the same as

foo_stands_for = 'coolTrick'.functionize( 'foolish orthopedic operator' );

"Holy moly" you say. "I can't wait to try it" you proclaim. But wait, there are 2 things you should know:

1) I haven't tested this code, so surely there's a bug somewhere
2) This example doesn't make the best use of it... stay tuned
C) This is intended to get your creative problem solving juices started.

Hopefully you will understand these 2 things before moving forward. Understand them? Then let's continue.

A Decent(er) Scenario

So let's assume that you have a good understanding of dependency injection. You want to minimize code dependencies. If you are working on a rather large app, you may start to think about "Is my code going to break if I have to change my namespacing convention?" or some nonsense like that. Let me illustrate here:

// let's set up our primary namespace
window.App = { Models : {}, Views : {}, Routers : {}, Helpers : {} };

// now all future models, views, routers, helpers, etc can
// live in this namespace

( function() {
  var someModel = function() {


  return window.App.Models.someModel = someModel;

Ok, so far so good. we have a model called someModel and it's namespaced nice and pretty. But this requires that the code for someModel needs to know the namespacing convention utilized by your app. What if you could instead do this:

String.prototype.modelNamespace = function( model ) {
    var name = this

    return window.App.Models[ name ] = model;

( function() {
  var name = 'theNameOfThisModel';

  var someModel = function() {


  // all the model knows is his own name, a method
  // to make a namespace of his name, and that
  // he is, in fact, a model
  return name.modelNamespace( someModel );

Again, you will probably find some bugs in this untested code, but hopefully this will inspire you to ponder a bit more about how to come up with some crazy cool solutions.