Edit in JSFiddle

// closure allows a function to access all the variables and functions that are in scope when the function itself is declared. A declared function can be called at any later time, even after the scope in which it was declared has gone away. All the variables and functions that were in scope when the function was declared become part of the closure.
function assert(value, desc) {
    var res = $("#results");
    var li = document.createElement("li");
    li.className = value ? "pass" : "fail";
    li.appendChild(document.createTextNode(desc));
    res.append(li);
}

var outerValue = "ov";
var later;

function outerFunction() {
    var innerValue = "iv";

    function innerFunction(num) {
        assert(outerValue, "outerValue is in scope");
        assert(innerValue, "innerValue is in scope");
        // function parameters are included in the closure of that function  
        assert(num, "num is in scope");
        // all variables in an outer scope, even those after function declaration, are included  
        assert(somethingElse, "somethingElse is in scope");
        // all functions in an outer scope, even those after function declaration, are included
        assert(outerFunction2, "outerFunction2 is in scope");
    }

    later = innerFunction;
}
// within the same scope, variables not yet defined CANNOT be forward referenced
assert(!somethingElse, "somethingElse is not in scope");
var somethingElse = "se";

// within the same scope, functions not yet defined CAN be forward referenced
assert(outerFunction2, "outerFunction2 is in scope");
function outerFunction2(){}

// variables in an internal scope are inaccessible
assert(outerFunction.innerValue===undefined, "innerValue is not in scope");

// functions in an internal scope are inaccessible
assert(outerFunction.innerFunction===undefined, "innerFunction is not in scope");

outerFunction();
later(10);

// There is no closure object which is keeping all the things in scope. 
// All the closure information is held in memory which is an overhead. This memory will be maintained until its clear to js engine that its not required or the page unloads.

// in the below example a closure is created by the anonymous function on elem, counter and timer. Had we defined them in global scope the first call of animate would interfere with the second call. So by declaring them inside a function we made sure that 2 separate scopes (safety bubbles) got created where one set of variables didnt interfere with the other set.
function animate(id){
    var elem = document.getElementById(id);
    var counter = 0;
    var timer = setInterval(function(){
        if(counter < 100){
            if(counter % 2 === 0){
                elem.style.margin =  counter + "px";
            }else{
                elem.style.margin = (counter - 10) + "px"; 
            }
            counter++;
        }else{
            clearInterval(timer);
            $(".animDiv").hide();
        }
    } ,100);
}

animate("anim1");
animate("anim2");
///////////////////////////
// binding function contexts in closure
var button = {
    clicked: false,
    click: function(){
        this.clicked = true;
        assert(button.clicked, "The button has been clicked");
    }
};
var btn = $("#test");
// if instead of writing button.click.apply we had written button.click, it wouldnt have worked since the click method automatically changes the function context to calling element i.e btn
btn.click(button.click.apply(button, null));
// in newer js there is a bind function added to change the context so this would also work
// btn.click(button.click.bind(button));

<div id="results"></div>
<div class="animDiv">
<div id="anim1">A N I M A T I O N </div>
<div id="anim2">N O I T A M I N A</div>
</div>
<button id="test">Test function context</button>

body {
    margin:10px;
}
.pass {
    color:green;
}
.fail {
    color:red;
    text-decoration:line-through;
}
.animDiv{
    height:270px;
    width:350px;
    border:black 1px solid;
}