google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






JavaScript Concepts: Simply the Best IF you often watch the HBO movies, then the title of this JavaScript post will be familiar to you: "Simply the Best". Yes, that's right, I want to borrow this slogan from HBO to describe the content of this post: it will provide you the very basic JavaScript concepts, and you will be able to access, understand the web programming JavaScript language easily and quickly.

This JavaScript article tutorial shows you the full-detailed practices, combined with live JavaScript example codes to try. At present, this JavaScript article tutorial us 5 parts and I'll update if there's new chapter, meanwhile, you can go through:
- Part 1: JavaScript Classes
- Part 2: JavaScript Inheritance
- Part 3: JavaScript and JSON
- Part 4: The Prototype Property
- Part 5: JavaScript Closures

Read more other JavaScript article tutorials on jsB@nk:
- JavaScript Function Declarations & JavaScript Function Expressions - Basic Concepts
- JavaScript Prototype: Some Basic Concepts
- 5 Chief JavaScript Inheritance Concepts
- Simple Concepts about Types and Objects in JavaScript OOP
- Top 10 Best JavaScript eBooks that Beginners should Learn


Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

Part 5: Javascript Closures

Closures are a tricky concept in Javascript. They seem deceptively simple but there are a lot of intricacies that can trip up developers. To start understanding closures, we need to start with scope – in Javascript, a function has access to it’s parent’s context, grandparent’s  context, etc. up the scope chain. To see this try the code,

var X = "window";

function outermost() {
    var Y = "outermost";

    function inner() {
        // Knows about the parent function's Y
        alert(Y);

        function innermost() {
            // Knows about the grandparent function's Y
            alert(Y);
            // Knows about the greatgrandparent's X
            alert(X);
        }
        innermost();
    }
    inner();
}
outermost();

This seems simple enough, even expected. Now here’s the trick, let’s return some function pointers,

var X = "window";

function outermost() {
    var Y = "outermost";

    function inner() {
        // Knows about the parent function's Y
        alert(Y);

        function innermost() {
            // Knows about the grandparent function's Y
            alert(Y);
            // Knows about the greatgrandparent's X
            alert(X);
        }

        // 'inner' returns a reference to the 'innermost' function
        return innermost;
    }

    // 'outermost' returns a reference to the 'inner' function
    return inner;
}

Now let’s call these functions,

// Get the reference to the 'inner' function
var inr = outermost();

// Call the 'inner' function
inr();  // alerts 'outermost'

// Get the reference to the innermost function
var inmost = inr(); // alerts 'outermost'

// Call the 'innermost' function
inmost();   // alerts 'outermost' and 'window'

As you can see, when we call the ‘innermost’ function, using the reference returned by the call to ‘inner’, it still has access to the X and Y values as they were in scope when the ‘innermost’ function was defined. This is Javascript’s closure – capturing information at the point of definition, so that the information can be used at the point of execution. Also the variables are not copies – they are references.

A very common problem that occurs is in the unintended creation of closure,

for (var i = 0; i < 5; i++) {
    // This creates a closure!
    elements[i].onclick = function() { alert(i); };
}

Now clicking on any element will alert ‘4’, why? Because all of the functions we created have a reference (not a copy) to the outer var i, probably not the effect you want. To fix this,

for (var i = 0; i < 5; i++) {
    // Don't create a function - no closure
    elements[i].onclick = Handle(i);
}

function Handle(i) {
    return function() { alert(i); };
}

You can read up more about closures here.

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web