Using jQuery.each() to manipulate the elements of an Array/Object in place
<p>Playing around with JavaScript and jQuery over here. Making a function that produces timestamps. </p>

<p>I've got the following code:</p>

<pre><code>var timestamp = function () {
    var now = new Date();
    var components = [now.getHours(), now.getMinutes(), now.getSeconds()];

    components.zero_pad = function(index, component) {
        // When this function is called with `$.each()` below, 
        // `this` is bound to `component`, not `components`.
        // So, this code fails, because you can't index a Number.
        this[index] = (this[index].toString().length == 1) ?
          '0' + component : component;
    }

    // Offending line
    $.each(components, components.zero_pad);
    return components[0] + ':' + components[1] + ':' + components[2];
};
</code></pre>

<p>This code fails, because, <code>$.each()</code> binds the callback to the element it's working on rather than the iterable, as  such:</p>

<pre><code>// from jQuery.each()
for ( ; i &lt; length; i++ ) {
    // I would have guessed it would be 
    // value = callback.call( obj, i, obj[ i ] );
    // but instead it's:
    value = callback.call( obj[ i ], i, obj[ i ] );

    if ( value === false ) {
        break;
    }
}
</code></pre>

<p>Now, to get the binding I want, I can change the offending line in my code to:</p>

<pre><code>$.each(components, $.proxy(components.zero_pad, components));
</code></pre>

<p>but here I invoke even more framework code and this is starting to look quite messy.</p>

<p>I feel like I'm missing something! Is there a simpler way to modify the contents of an array in place?</p>
