Announcement

Collapse
No announcement yet.

Closure in javascript

Collapse
X
Collapse
 

  • JavaScript
    started a blog post Closure in javascript

    Closure in javascript

    Closure in javascript:

    Overview of Closures

    Sharing Variables Between Tasks
    * Simply speaking, closures configure variables to be shared between stack frames in JavaScript
    * Generally, the sharing occurs between stack frames from two different tasks
    * Closures configure this sharing through the use of lexical scope

    * A variable defined in an outer lexical scope of a function can be referenced within the
    function scope either within the same task or between different tasks

    In order to fully understand closures, a number of JavaScript concepts need to be defined and
    presented
    * Tasks and JavaScript Execution
    * Variables & Stack Frames
    * Lexical Scope



    Tasks and JavaScript Execution
    * JavaScript has a simple execution model, it does one task at a time

    + JavaScript runs a task until it completes, then it starts a new task

    + JavaScript does not switch between tasks when in the middle of a task, and it is single-
    threaded so it cannot do multiple tasks at the same time

    * A task is always created by the surrounding environment invoking a function (think clicking a
    button in a web browser, and the event handler function registered with the click event being
    invoked)

    * Each task is completely independent of another, except they can share variables through the
    use of closures

    * Primarily, closures are used to share variables between tasks, and most other uses are really
    anti-patterns



    Variables and Stack Frames
    * When a function is invoked a new stack frame is created

    * Stack frames serve several purposes, but for this course, think of a stack frame as a place for
    a function to store its variables when executing

    * The variables can hold primitive values or object references

    * Object references point to data on the heap which is not tied to a particular stack frame (and
    by extension a particular function invocation)

    * While heap data is not tied to a particular stack frame, heap frame data can only be accessed
    through variables that are tied to a stack frame

    * Therefore, closures allow for variables on a previously executed stack frame to be utilized by
    a function executing with a different stack frame


    Lexical Scope
    * There are many kinds of scope in JavaScript:
    * Global Scope
    * Function Scope
    * Block Scope
    * Lexical Scope

    * Global, Function, and Block Scope focus on memory organization

    * Lexical Scope focuses on the structure of source code

    * Lexical Scope is configured by defining program elements inside of other program elements,
    in this case the nesting of function declarations

    * Closures depend upon lexical scope to share variables between functions, which is why
    functions are defined inside of other functions


    Purpose of Closures: Good and Bad
    * Closures are a powerful tool, but a tool that causes a performance hit on an application

    * Closures require more memory because stack frames are retained in memory after the initial
    the function which created the frame has completed executing

    * Closures are slow because they require the reloading of stack frames to access a variable
    instead of directly accessing it in the same stack frame

    * Closures must be used to share variables between different tasks, there is no other way to
    share data, so for this purpose closures are good and necessary

    * Commonly, developers will use closures to simulate private variables, this is bad
    + JavaScript has no concept of private and trying to hack support for private variables into the
    language yields little benefit and comes at the cost of performance
    + Finally, closures can be used to maintain function context, when needed this is good, but
    unnecessary use once again comes at the cost of performance



    Understanding Lexical Scope Structuring Source Code
    + Function outer wraps function inner

    * Because function inner is defined within the curly braces
    of function outer, function inner is within the lexical
    scope of function outer, and can reference the variable t
    defined within function outer

    * When function outer is invoked, a new stack frame is
    created, and t is defined with the stack frame, and
    assigned the value of 2

    * When function inner is invoked, another new stack frame
    is created, but t is not defined on function inner's stack
    frame; therefore, when function inner needs to reference
    variable t, it must reload the original stack frame of the outer
    to reference it

    Code:
    const outer = () => {
    let t = 2;
    
    // defined within the
    // lexical scope of outer
    const inner = () => {
    
    // t is accessible within the
    // lexical scope of outer
    console. log(t);
    
    };
    inner();
    }
    outer();


    Creating a Closure Nesting Functions
    * To create a closure, a function must be nested inside of another function, and the inner
    the function must reference a variable declared in the outer function

    * Technically speaking, referencing a global variable inside a function is not a closure, it's a
    global variable reference

    * Also, accessing a variable defined in an outer block scope from within an inner block scope is
    not a closure

    * The key to closure is the lexical scope of the inner function accessing the lexical scope of an
    outer function which wraps it
    * Another way to describe closures would be, one function scope is accessing a variable

    defined in another function scope where the source code for the function accessing the
    variable is defined in the same lexical scope where the variable is defined



      You must be logged in to post a comment.

    Related Topics

    Collapse

    Working...
    X