increasing understanding of variable scope and declaration
<pre><code>(function() {

    var content = [
        {
            title: 'My awesome blog post',   
            thumbnail: 'images/bane.jpg',
        },
        {
            title: 'My second awesome blog post',
            thumbnail: 'images/joker.jpg',
        },
    ],
        template = $.trim( $('#blogTemplate').html() ),
        frag = '';

    $.each( content, function( index, obj ) {  
        frag +=
            template.replace( /{{title}}/ig, obj.title )
                    .replace( /{{thumbnail}}/ig, obj.thumbnail );       
    });

    $('body').append(frag);

})();
</code></pre>

<p>Hello There,</p>

<p>I was just wondering why it is that the code block that is contained within a self invoking  anonymous function cannot have the following variable declarations prefixed with the var keyword like so:</p>

<pre><code>    var template = $.trim( $('#blogTemplate').html() ),
    var frag = '';
</code></pre>

<p>Adding the var keyword to the local variables in this function - <code>template</code> and <code>frag</code> seems to break my code and I really don't understand why, however if I declare <code>template</code> and <code>frag</code> on a global scope outside of the function as shown below then my code works. </p>

<pre><code>var template;
var frag;
</code></pre>

<p>If this relates to scope and anyone has the time to explain it would be much appreciated. Ideally I would like to prefix <code>template</code> and <code>frag</code> with the var keyword to increase readability.</p>
