Posts Tagged ‘JavaScript’

Extending, Currying and Monkey Patching. part 3

May 27, 2012

Monkey Patching

Or sometimes known as Duck Punching.

So what we’ve got here is an arbitrary object kimsObject (line 01) thrown in the BINARYMIST global, with a public method kimsMethod (line 03).
The trace method is passed an object and a method name (line 10). It replaces the specified
method with a new method that “wraps” additional functionality around the original method.
The call is made from line 23

var BINARYMIST = {};
BINARYMIST.kimsObject = (function () {
  return {
    kimsMethod: function () {
      alert("Now inside kimsMethod.");
    }
  };
}());

BINARYMIST.trace = (function () {
  return function (targetObject, targetMethod) {
    var originalMethod = targetObject[targetMethod];
    var that = this;
    (function () {
      console.log(new Date(), "Entering:", targetMethod);
      var result = originalMethod.apply(that, arguments);
      console.log(new Date(), "Exiting:", targetMethod);
      return result;
    }(/*execute me!*/));
  };
}());

(function () {
  BINARYMIST.trace(BINARYMIST.kimsObject, 'kimsMethod')
}());

I believe if used with care, and in moderation.
Monkey Patching can support and provide implementation for
Dr. Barbara Liskov’s Liskov Substitution Principle (LSP)

Consider the developer that uses a function he/she thinks does something, but it actually does something entirely unexpected.
Be sure to make known to the team and those what will use your code what you have done, and what they can expect.
Make sure this is documented in code around the API, whether it be with comments or simply in the way you write your code.

monkey patching

Jeff Atwood has a good post on the dangers of using Monkey Patching.
Be sure to check it out.

You may or may not need the Object.create function. It’s part of the ECMA Standard 262
which is the vendor-neutral standard for what was originally Netscape’s JavaScript.
This allows us to specify the object we want to be the prototype for our new object, I.E. our base class.
Properties added to an object‘s prototype are shared, through inheritance, by all objects sharing the prototype.
Alternatively, a new object may be created with an explicitly specified
prototype by using the Object.create built-in function.

This also makes me think of what we try to achieve with Aspect Orientation in .NET.
Below I’ve had an attempt at trying to make the BINARYMIST.createAspectedObjectWithTracing as generic as possible.
So that on the last line you can instantiate a BINARYMIST.kimsObject and call the kimsMethod method.
The way I’ve setup the BINARYMIST.createAspectedObjectWithTracing, you should be able to instantiate any object and call which ever method on it that you desire.
You get the tracing functionality for free.
Using this sort of approach, you should be able to apply any functionality you want to any method you want.

I’m keen on hearing how this could be improved.
Making the call even more transparent.

BINARYMIST.kimsObject = (function () {
  return {
    kimsMethod: function () {
      alert("Now inside kimsMethod.");
    }
  };
}());

BINARYMIST.trace = (function () {
  return function (targetObject, targetMethod) {
    var originalMethod = targetObject[targetMethod];
    var that = this;
    (function () {
      console.log(new Date(), "Entering:", targetMethod);
      // We can pass any number of args to the original method we wanted to call.
      // We also handle any return value. So hopefully this should be able to be used for any method.
      var result = originalMethod.apply(that, arguments);
      console.log(new Date(), "Exiting:", targetMethod);
      return result;
    }(/*execute me!*/));
  };
}());

// Add create method to the Object function
// Gives us dynamic control of what a base class should look like.
// method (create) that takes an object argument, returns a new object that has the parameter assigned to it's prototype.
// Creates a function on Object (create) that takes an object argument.
// Creates a function (Func) and assigns the object parameter to the function definition's prototype.
// Instantiates and assigns the new function (Func) to the "create" function definition on Object.
(function () {
  if (typeof Object.create !== 'function') {
    Object.create = function (o) {
      var Func = function () {};
      Func.prototype = o;
      return new Func();
    };
  }
}());

BINARYMIST.createAspectedObjectWithTracing = (function (anyObject, anyFunction) {
  var localObject = Object.create(anyObject);
  localObject[anyFunction] = function () {
    return BINARYMIST.trace(anyObject, anyFunction);
  };
  return localObject;
});

// Instantiate your object (any object) and call a method on it.
BINARYMIST.createAspectedObjectWithTracing(BINARYMIST.kimsObject, 'kimsMethod').kimsMethod();

Now as you can see again, all of the objects I’ve defined are sitting tidily out of the global object.

javascript global abatement

Now as you can see below, our BINARYMIST.kimsObject is now part of the new object’s (that localObject references) prototype object.
and it’s method is clearly visible.

javascript prototype

On line 42 above, we set the localObject‘s kimsMethod  to reference a wrapped version of BINARYMIST.kimsObject.kimsMethod.
The wrapped version has the tracing added.

We then return the localObject which references BINARYMIST.kimsObject and call the most specific kimsMethod
which has the functionality we just set.

return BINARYMIST.trace(anyObject, anyFunction);

and as you can see below, we’re now ready to start playing with our target method (kimsMethod).

javascript tracing

We then assign the this. We then execute the  anonymous closure.
In doing so, this is bound to the global object.
So to access the outer scope we need the that.
We then apply the originalMethod to that (BINARYMIST in our case).

Extending, Currying and Monkey Patching. part 2

May 14, 2012

Currying

Currying got it’s name from Haskell Curry,

Haskell Curry

originally discovered by Moses Schönfinkel.

schonfinkel

The programming language Haskell named after Haskell Curry is a purely functional language.
So the concept of Currying has it’s roots in functional programming.

It seems that the concepts of Currying and Partial Function Application are often used interchangeably, although they are different.
Lets try and shed some light on the confusion.

Function Application

In carrying on from part 1 of this topic “Extending, Currying and Monkey Patching”
When it comes to functional programming languages, strictly speaking we don’t so much use the terms calling or invoking a function.
We apply functions.
As you can see in the next example, calling or applying a function has the same effect.
Lines 36, 40 and 45 all do the same thing.

// In JavaScript
var coffeeAttributes;
var BINARYMIST;

BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {}));

BINARYMIST = (function (binMist) {

  var capitaliseFirstChar = function (target) {
    return target.replace(/^\w/, function (character) { return character.toUpperCase(); });
  };

   binMist.coffeeAttributes = function (myPoison) {
      try {
        // If String.prototype.toLowerCase fails, myPoison isn't a string
        var poison = (myPoison || "").toLowerCase();
      } catch (e) {
        return "Looks like the argument you passed wasn't a string.";
      }

      if(poison === "real coffee")
        return capitaliseFirstChar(poison) + " provides great taste and a good buzz.";
      if(poison === "instant coffee")
        return capitaliseFirstChar(poison) + " provides terrible taste and minimal buzz.";
      if(poison)
        return "I don't recognise " + poison + ". It's attrbutes could be anyones guess.";

      return "well it depends on what type of coffee we're talking about.";
  };
  return binMist;
}(BINARYMIST || {}));

// Call or invoke your function.
coffeeAttributes = BINARYMIST.coffeeAttributes( new String("Real coffee"));
document.writeln(coffeeAttributes + '<br>');
// Real coffee provides great taste and a good buzz.

coffeeAttributes = BINARYMIST.coffeeAttributes('instant Coffee');
document.writeln(coffeeAttributes + '<br>');
// Instant coffee provides terrible taste and minimal buzz.

// Apply your function.
coffeeAttributes = BINARYMIST.coffeeAttributes.apply(null, ["pseudo coffee"]);
document.writeln(coffeeAttributes + '<br>');
// I don't recognise pseudo coffee. It's attrbutes could be anyones guess.

In essence, how we code  a function call / invocation is syntactic sugar for the slightly longer form “function application”.

Partial Application

Or partial function application…

  • returns a function which behaves like the function you pass in but which takes fewer arguments, because the others have been bound into the returned function.
  • takes a function and from it builds a function which takes fewer arguments.

Implementing Partial Application

Now we could continue with the same theme as above, but for the purpose of providing easy understanding, I’m going to use a simpler theme.
I’ve seen the add function used a few times to explain the topic, so I’m going to use it as well.
We’re going to look at the examples in both JavaScript and C#.
Don’t get to caught up on the C# examples, as I’ve never had a need to curry in C#.
They’re just there to provide some contrast.

// In JavaScript
var BINARYMIST;
var fullApplicationResult;
var add9;
var partialApplicationResult;

BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {}));

BINARYMIST = (function (binMist) {
  binMist.add = function (firstParam, secondParam) {
    var firstLocal = (typeof firstParam === 'number') ? firstParam : 0;
    var secondLocal = (typeof secondParam === 'number') ? secondParam : 0;
    return firstLocal + secondLocal;
  }
  return binMist;
}(BINARYMIST || {}));

BINARYMIST.partialApply = (function () {
  return function (localFunction, param2) {
    return function (param3) {
      return localFunction(param2, param3);
    }
  }
}());

fullApplicationResult = BINARYMIST.add.apply(null, [9, 6]);
document.writeln('Full Function Application results: ' + fullApplicationResult + '<br>');
// Full Function Application results: 15

add9 = BINARYMIST.partialApply.apply(null, [BINARYMIST.add, 9]);
partialApplicationResult = add9(6);
document.writeln('Partial Function Application results: ' + partialApplicationResult + '<br>');
// Partial Function Application results: 15
// In C#
using System;

namespace BinaryMist {
    class Program {

        static string Add(int firstParam, int secondParam) {
            return (firstParam + secondParam).ToString();
        }

        static Func<T2, TResult> PartialApply<T1, T2, TResult>(Func<T1, T2, TResult> localFunction, T1 param2) {
            return (param3) => localFunction(param2, param3);
        }

        static void Main(string[] args) {
            Func<int, int, string> kimsAdd = Add;

            Func<int, string> add9 = PartialApply(kimsAdd, 9);
            string partialApplicationResult = add9(6);
            Console.WriteLine("Partial Function Application results: {0}", partialApplicationResult);
            // Partial Function Application results: 15
        }
    }
}

Now with an add method that takes 3 arguments:

// In JavaScript
var BINARYMIST;
var add9;
var partialApplicationResult;

BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {}));

BINARYMIST = (function (binMist) {
  binMist.add = function (firstParam, secondParam, thirdParam) {
    var firstLocal = (typeof firstParam === 'number') ? firstParam : 0;
    var secondLocal = (typeof secondParam === 'number') ? secondParam : 0;
    var thirdLocal = (typeof thirdParam === 'number') ? thirdParam : 0;
    return firstLocal + secondLocal + thirdLocal;
  }
  return binMist;
}(BINARYMIST || {}));

BINARYMIST.partialApply = (function () {
  return function (localFunction, param2) {
    return function (param3, param4) {
      return localFunction(param2, param3, param4);
    }
  }
}());

add9 = BINARYMIST.partialApply.apply(null, [BINARYMIST.add, 9]);
partialApplicationResult = add9(6, 2);
document.writeln('Partial Function Application results: ' + partialApplicationResult + '<br>');
// Partial Function Application results: 17
// In C#
using System;

namespace BinaryMist {
    class Program {

        static string Add(int firstParam, int secondParam, int thirdParam) {
            return (firstParam + secondParam + thirdParam).ToString();
        }

        static Func<T2, T3, TResult> PartialApply<T1, T2, T3, TResult>(Func<T1, T2, T3, TResult> localFunction, T1 param2) {
            return (param3, param4) => localFunction(param2, param3, param4);
        }

        static void Main(string[] args) {
            Func<int, int, int, string> kimsAdd = Add;

            Func<int, int, string> add9 = PartialApply(kimsAdd, 9);
            string partialApplicationResult = add9(6, 2);
            Console.WriteLine("Partial Function Application results: {0}", partialApplicationResult);
            // Partial Function Application results: 17
        }
    }
}

and again, but broken out into stages:

// In JavaScript
var BINARYMIST;
var add9;
var add6;
var add2;
var partialApplicationResult;

BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {}));

BINARYMIST = (function (binMist) {
  binMist.add = function (firstParam, secondParam, thirdParam) {
    var firstLocal = (typeof firstParam === 'number') ? firstParam : 0;
    var secondLocal = (typeof secondParam === 'number') ? secondParam : 0;
    var thirdLocal = (typeof thirdParam === 'number') ? thirdParam : 0;
    // Time to un-wind the call stack
    return firstLocal + secondLocal + thirdLocal;
  }
  return binMist;
}(BINARYMIST || {}));

BINARYMIST.partialApply = (function () {
  // Because of JavaScript's dynamic typing, we don't need to overload our methods.
  return function (localFunction, param2) {
    return function (param3, param4) {
      return localFunction(param2, param3, param4);
    }
  }
}());

add9 = BINARYMIST.partialApply.apply(null, [BINARYMIST.add, 9]);
add6 = BINARYMIST.partialApply.apply(null, [add9, 6]);
add2 = BINARYMIST.partialApply.apply(null, [add6, 2]);
// Time to wind the call stack up.
partialApplicationResult = add2();
document.writeln('Partial Function Application results: ' + partialApplicationResult + '<br>');

 

// In C#
using System;

namespace BinaryMist {
    class Program {

        static string Add(int firstParam, int secondParam, int thirdParam) {
            // Time to un-wind the call stack.
            return (firstParam + secondParam + thirdParam).ToString();
        }

        // Because of C#'s static typing, we need 3 overloaded methods.
        static Func<T2, T3, TResult> PartialApply<T1, T2, T3, TResult>(Func<T1, T2, T3, TResult> localFunction, T1 param2) {
            return (param3, param4) => localFunction(param2, param3, param4);
        }

        // Because of C#'s static typing, we need 3 overloaded methods.
        static Func<T2, TResult> PartialApply<T1, T2, TResult>(Func<T1, T2, TResult> localFunction, T1 param2) {
            return param3 => localFunction(param2, param3);
        }

        // Because of C#'s static typing, we need 3 overloaded methods.
        static Func<TResult> PartialApply<T1, TResult>(Func<T1, TResult> localFunction, T1 param2) {
            return () => localFunction(param2);
        }

        static void Main(string[] args) {
            Func<int, int, int, string> kimsAdd = Add;

            Func<int, int, string> add9 = PartialApply(kimsAdd, 9);
            Func<int, string> add6 = PartialApply(add9, 6);
            Func<string> add2 = PartialApply(add6, 2);
            // Time to wind the call stack up.
            string partialApplicationResult = add2();
            Console.WriteLine("Partial Function Application results: {0}", partialApplicationResult);
            // Partial Function Application results: 17
        }
    }
}

Currying

  • is creating a function that understands partial application and implements it.
  • builds functions which take multiple arguments by composition of functions which each take a single argument.

Implementing Currying

Now the function that takes the single argument is on line 48.
The composition of functions is performed in the same function where we return that (which is the original add applied to the parameter of 9 for the first test).
So in this function we actually return add applied to 9 concatenated to 6.
The original 9 is held in argumentsArray.
I’ve also modified the add method to be a little more flexible and deal with n number of arguments.

// In JavaScript
// Setup our global
var BINARYMIST;

// Variables for testing
var add9;
var sixteen;
var addOne;
var fortyOne;
var addSix;

// First up we add a method to Function's prototype.
// In JavaScript every object (incl Function) is linked to a prototype object
// This allows us to add any function to Function's prototype
Function.prototype.method = (function (name, func) {
  // Add the function (func) as a property of Function's prototype object.
  this.prototype[name] = func;
  return this;
});

// This is our add method repeated from above.
BINARYMIST = (function (binMist) {
  binMist.add = function () {
    var addend;
    var sum = 0;
    for (arg in arguments) {
      if (arguments.hasOwnProperty(arg)) {
        addend = arguments[arg];
        sum += (typeof addend === 'number') ? addend : 0
      }
    }
    return sum;
  }
  return binMist;
}(BINARYMIST || {}));

// Second we add a function called curry to the global Functions prototype.
Function.method('curry', function ( ) {
  // Because we want to concatenate 2 lots of the arguments, we need arguments to be of type Array.
  // Because the arguments parameter is not a real array, we need to borrow the slice method from Array.prototype.
  var slice = Array.prototype.slice;
  // Create an array from arguments.
  var argumentsArray = slice.apply(arguments);
  // In our case, this is bound to add because it's add's prototype's curry method that we invoked.
  var that = this;
  return function ( ) {
    // We now apply add (which is referenced by that) to the current scope, which is the curried function (add9, in this case).
    return that.apply(null, argumentsArray.concat(slice.apply(arguments)/*Create a real array from arguments.*/)/*Concatenate it with the curry parameter*/);
  };
});

Testing curry

// In JavaScript

// Execute the curry method which is a member of add's prototype.
add9 = BINARYMIST.add.curry(9);
document.writeln("Curry results: " + add9(6) + '<br>'); // Curry results: 15

// Single-step currying. Works with any number of arguments.
addSixteen = BINARYMIST.add.curry(1, 2, 3)(5, 5);
document.writeln("Curry results: " + addSixteen + '<br>'); // Curry  results: 16

// Two-step currying.
addOne = BINARYMIST.add.curry(1);
addSix = BINARYMIST.add.curry(3, 1, 2);
fortyOne = addOne(10, 10, 10, 10);
six = addOne(2, 3);
sixteen = addSix(5, 5);

As you can see from the C# example below, dynamic languages such as JavaScript, make currying less verbose and provide considerably more flexibility.

Currying in C# feels a little awkward.

// In C#
using System;

namespace BinaryMist {
    class Program {

        static int Add(int firstParam, int secondParam, int thirdParam) {
            // Time to un-wind the call stack.
            return firstParam + secondParam + thirdParam;
        }

        static Func<T1, Func<T2, Func<T3, TResult>>> Curry<T1, T2, T3, TResult>(Func<T1, T2, T3, TResult> function) {
            return a => b => c => function(a, b, c);
        }

        // Testing curry
        static void Main(string[] args) {
            Func<int, int, int, int> kimsAdd = Add;

            string curryResult = "Curry results: {0}";

            // Single-step currying.
            var curried = Curry(kimsAdd);
            Console.WriteLine(curryResult, curried(9)(6)(3));
            // Curry results: 18

            // Two-step currying.
            Func<int, Func<int, Func<int, int>>> curryAdd = Curry(kimsAdd);
            Func<int, Func<int, int>> add9 = curryAdd(9);
            Func<int, int> add15 = add9(6);
            Console.WriteLine(curryResult, add15(3));
            // Curry results: 18
        }
    }
}

Why / where would we want to Curry

If you are making calls to a particular function with some of the same arguments every time.
You could dynamically create a function that holds on to the previously repeated parameters, thus saving you the effort of passing them every time.
This function will supply the original function with it’s saved parameters, so the original function has the full set.
Currying is not really needed in C#. The examples provided are for academic purposes only.

To wrap up:

Although I don’t think there is much use for explicit Partial Application or Currying in C#,
Jon Skeet has an interesting blog post on Partial Application and Currying in C#, with:

  1. some sample code useful for stepping through
  2. a good controversial and thought provoking conversation following

This post also provided some clarification.

Other Insights obtained from the excellent:

  1. Doug Crockfords JavaScript The Good Parts
  2. Stoyan Stefanov’s JavaScript Patterns

Extending, Currying and Monkey Patching. part 1

April 29, 2012

Extending

The JavaScript Function.prototype.call and Function.prototype.apply methods allow us to extend an object with additional functionality.
The first argument to Function.prototype.call and Function.prototype.apply is the object on which the function is to be:
temporarily added to, invoked, then removed again.
The first argument is bound to this for the current scope (within the current function body).
Be wary of what this is bound to. I talk a little more about this below.
If you have no arguments to pass to the applied method, call or apply will achieve the same result.

The way I remember how the call and apply functions work, is like the following:

BINARYMIST.extensions.minutes.remaining applied to (BINARYMIST.coffee)
Method on the left is applied to the object on the right.

First we create our single global object (line 01) that will be used as a namespace
On line 05 we declare the extensions object and augment it to our single BINARYMIST object.
You can see on line 07, this is how we create extension methods in JavaScript.
If we replaced the apply method from line 34 with call,  the outcome would be exactly the same.
You’ll also notice on line 34 and 35, that the remaining method of BINARYMIST.extensions.minutes returns a minutes property.
Once BINARYMIST.extensions.minutes.remaining is applied to BINARYMIST.coffee, return this.minutes now returns a function that returns privateMinutes.

javascript binding callback

You can copy past the below code:

var BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {/*if BINARYMIST is falsy, create a new object and pass it*/}));

BINARYMIST.extensions = (function () {
   var localExtensions = {}; // private
   localExtensions.minutes = {
      minutes: 0,
      remaining: function () {
         // this is bound to the object that "remaining" is a member of at runtime, because "remaining" is a property of the object "localExtensions.minutes".
         // If "remaining" was not the property of an object, it would be invoked as a function rather than a method. "this" would be bound to the global object.
         return this.minutes;
      }
   };

   return localExtensions;
}());

var BINARYMIST = (function (binMist) {
   var privateMinutes = 5;
   binMist.coffee = {
      type: "ShortBlack",
      member: function () {
         return privateMinutes;
      }
   };
   return binMist;
}(BINARYMIST || {}));
// Function.call, Function.apply are interchangeable if your only using a single parameter.
// The first argument of call or apply can also be a primitive value, null or undefined.
// Either way it will be bound to the this object.
// A word of warning here:
// When a function is not the property of an object, then it is invoked as a function.
// The this object is then bound to the global object (One of the poor design decisions in JavaScript).
var deliveryTime = BINARYMIST.extensions.minutes.remaining.apply(BINARYMIST.coffee);
alert("Your coffee will be ready in " + deliveryTime() + " minutes");

In continuing with the code comment immediately above:
If the first parameter to apply or call is null, then the this is bound to the global object upon invocation.
When you invoke a function that is not a method, this is exactly what happens.

You may have noticed, I’m using the module pattern in the above example.
This pattern is effective for getting our objects nicely nested into a single namespace (or more correctly an object ) that sits in the global object.
This stops us from littering the global space with every object we create.
You can also see from the following image, what’s private and what’s public.
So we can easily define accessibility.

JavaScript global scope abatement

What are the differences between apply and call then?

call

You can think of Function.prototype.call as being syntax sugar on top of Function.prototype.apply.
If you only have a single parameter after the first, your better off to use Function.prototype.call as it’s more efficient than creating an array for a single value.

The difference is in the parameters after the first invocation context argument.
With call, an arbitrary number of arguments can be passed.
Following the first argument, each argument will be passed to the extension method. In our case remaining (line 09 above).
So we could make the following changes to the above code.
You’ll notice on line 8 below once applied to BINARYMIST.coffee, no longer returns a function, because we explicitly set this.minutes to a number… 3.
Now in the below example on line 16, if we fail to pass an argument to BINARYMIST.extensions.minutes.remaining, by default our coffee will be ready in 10 minutes.

BINARYMIST.extensions = (function () {
   var localExtensions = {}; //private
   localExtensions.minutes = {
      minutes: 0,
      remaining: function (numberOfMinutes) {

         var defaultMinutes = 10;
         this.minutes = numberOfMinutes || defaultMinutes;

         return this.minutes;
      }
   };
   return localExtensions;
}());

var deliveryTime = BINARYMIST.extensions.minutes.remaining.call(BINARYMIST.coffee, 3);
alert("Your coffee will be ready in " + deliveryTime + " minutes");

Better still, lets pass a couple of arguments..
While we’re at it, lets tidy things up a bit.
Lets put the code we use to test the extensions on our coffee into an immediately invoked function expression,
also known as an anonymous closure.
You can see this on line 36.

On line 15 we assign localSpent the second argument we passed in (minutesSpent),
but only if we’re sure it’s a number,
else we assign the undefined value.

var BINARYMIST = (function (binMist) {
   return binMist;
} (BINARYMIST || {/*if BINARYMIST is falsy, create a new object and pass it*/}));

BINARYMIST.extensions = (function () {
   var localExtensions = {}; // private
   localExtensions.minutes = {
      minutes: 0,
      remaining: function (numberOfMinutes) {
         var defaultMinutes = 10;

         // check our numbers are actually numbers.
         var isNumber = function isNumber(num) { return typeof num === 'number' && isFinite(num);}
         var localRemaining = isNumber(numberOfMinutes) ? numberOfMinutes : defaultMinutes;
         var localSpent = isNumber(arguments[1]) ? arguments[1] : undefined;

         this.minutes = {remaining: localRemaining, spent: localSpent}
         return this.minutes;
      }
   };
   return localExtensions;
}());

// lets add some coffee
var BINARYMIST = (function (binMist) {
   var privateMinutes = 5;
   binMist.coffee = {
      type: "ShortBlack",
      minutes: function () {
         return privateMinutes;
      }
   };
   return binMist;
}(BINARYMIST || {}));

(function () {
   var minutesRemaining = 3;
   var minutesSpent = 7;
   var deliveryTime = BINARYMIST.extensions.minutes.remaining.call(BINARYMIST.coffee, minutesRemaining, minutesSpent);
   var minutesSinceOrder = deliveryTime.spent || 'a number of';
   alert("You placed your order " + minutesSinceOrder + " minutes ago. Your coffee will be ready in " + deliveryTime.remaining + " minutes.");
}());

On line 39 we pass in a couple of arguments.
Now to show another cool feature of JavaScript,
because I hate to miss a good opportunity.
All functions come with an arguments array.
This parameter is populated with all the arguments that were supplied to the function on invocation.
This includes any arguments that were not assigned to parameters.
As you can see below, arguments holds both values we passed in.

JavaScript argument's array

Now if we only pass in the first argument to the specified parameter, when line 41 is executed, we get…

apply

The difference with Function.apply is that it only takes 2 arguments.
The second being an array of arbitrary length.
Function.apply works with array-like objects as well as true arrays.


// show a new BINARYMIST.extension.minutes that takes an array

var minutesRemaining = 3;
var minutesSpent = 7;
var minutes = [minutesRemaining, minutesSpent];
var deliveryTime = BINARYMIST.Extensions.minutes.remaining.call(BINARYMIST.coffee, minutes);

Bind

In response to Mike Wilcox’s comments on the JavaScript Linked-in group
I’ve added some info on Function.prototype.bind introduced in Ecma 262 (I think).

This function is very similar to Function.prototype.call.
In fact the only difference I can see is that bind essentially returns a reference to the function that applies the function we want to apply to a target function.
Essentially this allows us to re-use an applied function, rather than create one each time we want to execute.
bind has the same function signature (has the same parameters) as Function.prototype.call.
This following example was taken from Mike West’s post here with some small changes and comments added.

This is tested and works as you would expect.

var first_multiply;
var second_multiply;

var first_object = {
   num: 42
};

var second_object = {
   num: 24
};

function multiply(mult) {
   return this.num * mult;
}

Function.prototype.bind = function (obj) {
   // When a function is not the property of an object, then it is invoked as a function:
   // Now because bind is a property of Function.prototype
   // and multiply inherits the bind property (which is a function of course) because multiply's prototype is Function's prototype.
   // this is bound to the bind properties object... which in this case is multiply.
   var method = this
   var temp = function () {
      return method.apply(obj, arguments);
   };
   // temp holds a reference to our bind functionality
   return temp;
}

first_multiply = multiply.bind(first_object);
document.writeln(first_multiply(5) + ''); // returns 42 * 5

second_multiply = multiply.bind(second_object);
document.writeln(second_multiply(5) + ''); // returns 24 * 5

JavaScript Reserved Words

December 19, 2011

Funnily enough, most of these are not used in the language.
They cannot be used to name variables or parameters.
In saying that,
I did some testing below and that statement’s not entirely accurate.

Usage of keywords in red should be avoided.

Reserved Keyword Comments
abstract  no
boolean  no
break  yes
byte  no  No type of byte in JavaScript
case  yes
catch  yes
char  no  JavaScript doesn’t have char. Use string instead
class  no  technically JavaScript doesn’t have class
const  no  no const, but read-only can be implemented
continue  yes
debugger  yes
default  yes
delete  yes
do  yes
double  no  JavaScript only has number (64 bit floating point)
else  yes
enum  no
export  no
extends  no
false  yes
final  no
finally  yes
float  no  JavaScript only has number (64 bit floating point)
for  yes
function  yes
goto  no
if  yes
implements  no  JavaScript uses prototypal inheritance. Reserved in strict mode
import  no
in  yes
instanceof  yes
int  no  JavaScript only has number (64 bit floating point)
interface  no  technically no interfaces, but they can be implemented. Reserved in strict mode
let  no Reserved in strict mode
long  no  JavaScript only has number (64 bit floating point)
native  no
new  yes  use in moderation. See comments in Responses below
null  yes
package  no Reserved in strict mode
private  no  access is inferred. Reserved in strict mode
protected  no  JavaScript has privileged, but it’s inferred. Reserved in strict mode
public  no  access is inferred. Reserved in strict mode
return  yes
short  no  JavaScript only has number (64 bit floating point)
static  no Reserved in strict mode
super  no
switch  yes
synchronized  no
this  yes
throw  yes
throws  no
transient  no
true  yes
try  yes
typeof  yes
var  yes
volatile  no
void  yes
while  yes
with  yes
yeild  no Reserved in strict mode

When reserved words are used as keys in object literals,
they must be quoted.
They cannot be used with the dot notation,
so it is sometimes necessary to use the bracket notation instead.
Or better, just don’t use them for your names.

var method;                  // ok
var class;                   // illegal
object = {box: value};       // ok
object = {case: value};      // illegal
object = {'case': value};    // ok
object.box = value;          // ok
object.case = value;         // illegal
object['case'] = value;      // ok

I noticed in Doug Crockfords JavaScript The Good Parts
in Chapter 2 under Names, where he talks about reserved words.
It says:
“It is not permitted to name a variable or parameter with a reserved
word.
Worse, it is not permitted to use a reserved word as the name of an object
property in an object literal or following a dot in a refinement.”

I tested this in Chrome and FireFox with the following results.

var private = 'Oh yuk'; // if strict mode is on: Uncaught SyntaxError: Unexpected strict mode reserved word
var break = 'break me'; // Uncaught SyntaxError: Unexpected token break

 

var myFunc = function (private, break) {
   // if strict mode is on or off: Uncaught SyntaxError: Unexpected token break
   // strangly enough, private is always fine as a parameter.
}

 

var myObj = {
   private: 'dung', // no problem
   break: 'beetle' // no problem
}
console.log('myObj.private: ' + myObj.private) // myObj.private: dung
console.log(' myObj.break: ' + myObj.break); // myObj.break: beetle

 

JavaScript also predefines a number of global variables and functions
that you should also avoid using their names for your own variables and functions.
Here’s a list:

  • arguments
  • Array
  • Boolean
  • Date
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent
  • Error
  • eval
  • EvalError
  • Function
  • Infinity
  • isFinite
  • isNaN
  • JSON
  • Math
  • NaN
  • Number
  • Object
  • parseFloat
  • parseInt
  • RangeError
  • ReferenceError
  • RegExp
  • String
  • SyntaxError
  • TypeError
  • undefined
  • URIError

Scoping & Hoisting in JavaScript

November 14, 2011

Scoping

JavaScript scoping is different to classical languages, and can take some getting used to for programmers used to languages such as C, C++, C#, Java.
Classical languages like the before mentioned have block scope.
JavaScript has function scope.

In the following example “5” will be alerted.

var foo = 1;
function bar() {
   if (!foo) {
      var foo = 5;
   }
   alert(foo);
}
bar();


In the following example “1” will be alerted.

var a = 1;
function b() {
   a = 10;
   return;
   function a() {}
}
b();
alert(a);


In the following example Firebug will show 1, 2, 2.

var x = 1;
console.log(x); // 1
if (true) {
   var x = 2;
   console.log(x); // 2
}
console.log(x); // 2


In JavaScript, blocks such as if statements, do not create new scope. Only functions create new scope.

There is a workaround though 😉
JavaScript has Closure.
If you need to create a temporary scope within a function, do the following.

function foo() {
   var x = 1;
   if (x) {
      (function () {
         var x = 2;
         // some other code
      }());
   }
// x is still 1.
}

Line 3: begins a closure
Line 6: the closure invokes itself with ()

I discuss closure in depth in a later post.

Hoisting

Terminoligy

As far as I know…
function declaration or function statement
are the same thing.
function expression or variable declaration with function assignment
are the same thing.


A function statement looks like the following:

function foo( ) {}


A function expression looks like the following:

var foo = function foo( ) {};


A function expression must not start with the word “function”.

//anonymous function expression
var a = function () {
   return 3;
};

//named function expression
var a = function bar() {
   return 3;
};

//self invoking named function expression.
(function sayHello() {
   alert('hello!');
})();

//self invoking anonymous function expression.
(function ( ) {
   var hidden_variable;
   // This function can have some impact on
   // the environment, but introduces no new
   // global variables.
}() );


In JavaScript, a name enters a scope in one of four basic ways:

  1. Language-defined: All scopes are, by default, given the names this and arguments.
  2. Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function.
  3. Function declarations: These are of the form function foo() {}.
  4. Variable declarations: These take the form var foo;.

Function declarations and variable declarations are always hoisted
invisibly to the top of their containing scope by the JavaScript interpreter.
Function parameters and language-defined names are, obviously, already there. This means that code like this:

function foo() {
   bar();
   var x = 1;
}

Is actually interpreted like this:

function foo() {
   var x;
   bar();
   x = 1;
}


It turns out that it doesn’t matter whether the line that contains the declaration would ever be executed.
The following two functions are equivalent:

function foo() {
   if (false) {
      var x = 1;
   }
   return;
   var y = 1;
}
function foo() {
   var x, y;
   if (false) {
      x = 1;
   }
   return;
   y = 1;
}

The assignment portion of the declaration is not hoisted.
Only the identifier is hoisted.
This is not the case with function declarations, where the entire function body will be hoisted as well,
but remember that there are two normal ways to declare functions. Consider the following JavaScript:

function test() {
   foo(); // TypeError 'foo is not a function'
   bar(); // 'this will run!'
   var foo = function () { // function expression assigned to local variable 'foo'
      alert('this won't run!');
   }
   function bar() { // function declaration, given the name 'bar'
      alert('this will run!');
   }
}
test();

In this case, only the function declaration has its body hoisted to the top. The name ‘foo’ is hoisted, but the body is left behind, to be assigned during execution.

Including named function expressions added to the local object

//'use strict';

var container;

function Container() {

   var that = this;
   var descender = 3;
   var targetMin = 0;
   var ascender = 0;
   var targetMax = 3;    

   this.inc = function () {

      if (ascender < targetMax) {
         ascender += 1;
         console.log('ascender incremented: now equals ' + ascender);
         return that;
      } else {
         that.inc = function () {
            console.log('inc now modified to return ' + targetMax);
         };
         that.inc();
         return that;
      }
   };

   alert(dec); // Uncaught ReferenceError: dec is not defined. we're actually looking for the global objects dec property which doesn't exist.
   alert(this.dec); // Prints 'undefined' because this.dec is hoisted and declared, but of course not yet defined.
   // If this.dec was not hoisted, we would get the same 'Uncaught ReferenceError: this.dec is not defined'.

   this.dec = function () {

      if (descender > targetMin) {
         descender -= 1;
         console.log('descender decremented: now equals ' + descender);
         return that;
      } else {
         that.dec = function () {
            console.log('dec now modified to return ' + targetMin);
         };
         that.inc();
         return that;
      }
   };
}

container = new Container();
container.inc().inc().inc().inc();
console.log(container.inc);
container.dec().dec().dec().dec();
console.log(container.dec);

Out of interest, the output looks like the following:

modify routine on the fly

Name Resolution Order

The most important special case to keep in mind is name resolution order. Remember that there are four ways for names to enter a given scope. The order I listed them above is the order they are resolved in. In general, if a name has already been defined, it is never overridden by another property of the same name. This means that a function declaration takes priority over a variable declaration. This does not mean that an assignment to that name will not work, just that the declaration portion will be ignored. There are a few exceptions:

  • The built-in name arguments behaves oddly. It seems to be declared following the formal parameters, but before function declarations. This means that a formal parameter with the name arguments will take precedence over the built-in, even if it is undefined. This is a bad feature. Don’t use the name arguments as a formal parameter.
  • Trying to use the name this as an identifier anywhere will cause a Syntax Error. This is a good feature.
  • If multiple formal parameters have the same name, the one occurring latest in the list will take precedence, even if it is undefined.

Now that you understand scoping and hoisting, what does that mean for coding in JavaScript?
The most important thing is to always declare your variables with var statements.
Declare your variables at the top of the scope (as already mentioned JavaScript only has function scope). See the Variable Declarations section.
If you force yourself to do this, you will never have hoisting-related confusion.
However, doing this can make it hard to keep track of which variables have actually been declared in the current scope.
I generally like to follow these coding standards with JavaScript.

function foo(a, b, c) {
   var x = 1;
   var bar;
   var baz = 'something';
   // other non hoistable code here
}

Function Declarations vs Function Expressions

August 17, 2011

This short post is in reaction to this post
on JavaScript Function Declarations and Function Expressions.
My concern was with the littering of the global object.

Subject to hoisting

  • function statements or function declarations
  • variable declarations, but not their assignment expressions

Function Statement
sometimes just a pseudonym for a Function Declaration
in Mozilla a Function Statement is an extension of Function Declaration
allowing the Function Declaration syntax to be used anywhere a statement
——is allowed.

Don’t forget; when a function is not the property of an object, it’s invoked as a function.
The this of the function is bound to the global object.
∴ foo and also bar are bound to the global object.
This is not good.
As Douglas Crockford puts it (and rightfully so), we’re clobbering the global variables.
I think a better way to do this, would be like the following code examples.

A few words on access first

All members of an object are public
You can add public members in the constructor, by using the
this keyword (which by the way, provides “privileged” access).
If you want to add private members, you can use a constructor Function.
You are actually adding the member to the function.
Private members are only accessible via the objects privileged members.
Privileged members are able to access private members,
and are themselves accessible to public members and outside.

Have a look at Angus Croll’s post to provide some context.

Question 1

function Foo(){
   function bar() {      //private
      return 3;
   }
   this.barMeth = bar(); //privileged
   function bar() {      //private
      return 8;
   }
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Question 2

function Foo(){
   var bar = function bar() { //private
      return 3;
   }
   this.barMeth = bar();      //privileged
   var bar = function bar() { //private
      return 8;
   }
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Question 3

var myFoo = new Foo();
alert(myFoo.barMeth);
function Foo(){
   var bar = function bar() { //private
      return 3;
   };
   this.barMeth = bar();      //privileged
   var bar = function bar() { //private
      return 8;
   };
}

Question 4

function Foo(){
   this.barMeth = bar();          //privileged
   var bar = function bar() {     //private
      return 3;
   };
   var barMeth = function bar() { //private
      return 8;
   };
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Or worse, but still not clobbering the global object…

var myApp = {};

myApp.fooTest = {
   foo: function (){
      function foo(){
         function bar() {
            return 3;
         }
         return bar();
         function bar() {
            return 8;
         }
      }
      alert(foo());
   }
}

myApp.fooTest.foo();