JavaScript closures and memory management

Question

I'm curious as to how memory is handled with variables inside closures. Take this code for example -

function iAmAClosure() {
    var txtName = document.getElementById('name');

    function validation() {
        if (txtName.value.length === 0) {
            return false;
        }
        return true;
    }

    document.getElementById('submit').onclick = function () {
        return validation();
    }
}

My validation function is called whenever the user clicks on a button.

My question is, does the txtName variable stay in memory as long as the page is active, or is it GC'ed and initialized every time the method validation is called? Is there something more to it then that?

What's better performance wise?

Answer 1

Any variables in the closure of a function are kept in memory as long as there is a way to reference that function. Here, txtName is in the closure of your onclick function, so it will stay in memory as long as the onclick binding is intact and the "submit" button exists.