Front-End Analogies: Closure's Coffee — Closures, Lexical Scope

Closure's Coffee

Where Coffee's for Closures

Today we're visiting an internationally franchised cafe chain specializing in serving cups of the jitters. We'll hop-around to several areas and roles to get a good sense of the place.

The vibe is definitely PhD students working on their MacBooks while uniformed PhD students with 20 fewer dollars boil beans into a energetic goop. Just like all the other cafes. Try not to step on your own shoes, will ya?

---

A Visit from Corporate

Lexical Scope, Inheritance, Privacy

Some lifeless husks from headquarters are setting up two new stores. Gotta give 'em the rules and all. No tattoos out in the open, nobody phones, no nothin'. Then the suits are just going to copy their work for the next store.

That second store has people that write-up press releases. Corporate wants to remind them the business name is always in caps. GREAT, now we're yelling.

Oh yeah, those kids got real attached to their pocket computers. Just gotta be a little sneaky about it.

"use strict";

const corp_storeOneRules = {
    tattoosVisible: false,
    phoneAtRegister: false,
    pettyAnnoyance: true
};

const corp_storeTwoRules = {
    ...corp_storeOneRules,
    // Run it back.
    // Why half-ass two things when you can whole-ass one thing, repeatedly?
    brandNameCaps: _brandName => _brandName.toUpperCase()
};

console.log(corp_storeOneRules);
/*
Object {
    pettyAnnoyance: true,
    phoneAtRegister: false,
    tattoosVisible: false
}
*/

console.log(corp_storeTwoRules);
/*
Object {
    brandNameCaps: _brandName => _brandName.toUpperCase(),
    pettyAnnoyance: true,
    phoneAtRegister: false,
    tattoosVisible: false
}
*/

// Store two has rules nearly identical to store one,
// but with the rule about branding added.

// console.log(corp_storeOneRules.brandNameCaps("closure's coffee"));

// Come in the store talking about formatting press announcements
// and people will be looking at you studid.

console.log(corp_storeTwoRules.brandNameCaps("closure's coffee"));

const employees_storeRules = {
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false
};
// Looks like the workers aren't going down without a fight.

const corp_giveStoreRules = _rules => {
    const secretRules = "Fuggedaboutit.";
    // You couldn't change this if you wanted to.
    // Well, maybe with an obscene amount of money.
    // That can do anything.

    const existingRules = _ourRules => {
        return {
            ..._rules,
            ..._ourRules,
            secret: secretRules
            // If you don't know, that's called the "spread operator".
        }
    }

    return existingRules;
};

console.log( corp_giveStoreRules(corp_storeOneRules)(employees_storeRules) );
/*
Object {
    pettyAnnoyance: true,
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false,
    secret: "Fuggedaboutit.",
    tattoosVisible: false
}
*/

console.log( corp_giveStoreRules(corp_storeTwoRules)(employees_storeRules) );
/*
Object {
    brandNameCaps: _brandName => _brandName.toUpperCase(),
    pettyAnnoyance: true,
    phoneAtRegister: true,
    phoneAtRegisterWithCorp: false,
    secret: "Fuggedaboutit.",
    tattoosVisible: false
}
*/

// Though we couldn't change or directly access the secret rules,
// we still have to worry about them. Well, they do.

// You know, no one ever wonders where the .toUpperCase() comes from.
// Thing is: it fell off a truck. That's how we inherit around here.

Comments

[Kevin K. Johnson]

Please let me know if there are any errors or if anything is unclear. Or, if this style really helps you, feel free to give me ideas on the next topic I should tackle.