Skip to content

Instantly share code, notes, and snippets.

@git-ashish
Forked from max-mapper/0.md
Created April 29, 2017 09:47
Show Gist options
  • Select an option

  • Save git-ashish/d8fde5cf387542a3b0aaa25d8c2e42c6 to your computer and use it in GitHub Desktop.

Select an option

Save git-ashish/d8fde5cf387542a3b0aaa25d8c2e42c6 to your computer and use it in GitHub Desktop.

Revisions

  1. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions m.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    // M

    var x = (function sayHi() {
    console.log('hi!')
    })

    x() // works
    sayHi() // does not work
  2. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,6 @@ This behavior is called 'hoisting' because it is almost like the function defini

    Assignments are not evaluated until the code is executed. An example of an assignment is `var foo = function() {}` or `var foo = function foo() {}`. A function must not be associated with an assignment in order for it to be hoisted (see example `L`)

    Wrapping a function in parenthesis (`()`) is a quick way to create a new scope. I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.
    Wrapping a function in parenthesis (`()`) is a quick way to convert a function definition into a function expression, which means it does not get hoisted (similar to assigning the function to a variable). I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.

    I use hoisting as a code organization tool, for example [here](https://github.com/maxogden/dat/blob/4cb75247f181bb1d9a8d312d0d2ff5462d8d2698/lib/write-stream.js#L17) I rely on hoisting to make `parseStream()` available on line 20, even though it is defined on line 41, which I think makes that file more readable as I can put the 'meat' of the function at the top.
  3. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ A crude timeline of how JS gets executed:
    1. Parse the scope and detect all function definitions
    2. Execute the code top-to-bottom with all functions found in step 1 available as variables

    This behavior is called 'hoisting' because it is almost like the function definitions has been 'hoisted' up to the top of the function.
    This behavior is called 'hoisting' because it is almost like the function definitions have been 'hoisted' up to the top of the function.

    Assignments are not evaluated until the code is executed. An example of an assignment is `var foo = function() {}` or `var foo = function foo() {}`. A function must not be associated with an assignment in order for it to be hoisted (see example `L`)

  4. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    Below are many examples of function hoisting behavior in JavaScript. Ones marked as `works` successfuly print 'hi!' without errors.

    To play around with these examples (recommended) save them as e.g. `a.js` on your computer and execute them with `node a.js`
    To play around with these examples (recommended) clone them with git and execute them with e.g. `node a.js`

    ### Notes on hoisting

  5. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions 0.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # JavaScript function hoisting by example

    Below are many examples of hoisting behavior in JavaScript. Ones marked as working successfuly print 'hi!' without errors.
    Below are many examples of function hoisting behavior in JavaScript. Ones marked as `works` successfuly print 'hi!' without errors.

    To play around with these examples (recommended) save them as e.g. `a.js` on your computer and execute them with `node a.js`

    @@ -19,4 +19,6 @@ This behavior is called 'hoisting' because it is almost like the function defini

    Assignments are not evaluated until the code is executed. An example of an assignment is `var foo = function() {}` or `var foo = function foo() {}`. A function must not be associated with an assignment in order for it to be hoisted (see example `L`)

    Wrapping a function in parenthesis (`()`) is a quick way to create a new scope. I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.
    Wrapping a function in parenthesis (`()`) is a quick way to create a new scope. I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.

    I use hoisting as a code organization tool, for example [here](https://github.com/maxogden/dat/blob/4cb75247f181bb1d9a8d312d0d2ff5462d8d2698/lib/write-stream.js#L17) I rely on hoisting to make `parseStream()` available on line 20, even though it is defined on line 41, which I think makes that file more readable as I can put the 'meat' of the function at the top.
  6. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # Hoisting by example
    # JavaScript function hoisting by example

    Below are many examples of hoisting behavior in JavaScript. Ones marked as working successfuly print 'hi!' without errors.

  7. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    Below are many examples of hoisting behavior in JavaScript. Ones marked as working successfuly print 'hi!' without errors.

    The recommended way to run these if you want to play around (recommended) is to save them as e.g. `a.js` on your computer and execute them with `node a.js`
    To play around with these examples (recommended) save them as e.g. `a.js` on your computer and execute them with `node a.js`

    ### Notes on hoisting

  8. @max-mapper max-mapper revised this gist Jan 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0.md
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ The recommended way to run these if you want to play around (recommended) is to

    ### Notes on hoisting

    **(I may be using incorrect terms below, please forgive me)**
    *(I may be using incorrect terms below, please forgive me)*

    When JS is parsed, a first pass is done over each scope, and function definitions are immediately discovered. An example of a function definition is `function foo() {}`. When a function is declared like this, with a name, that name becomes available to the entire scope when the code in that scope is executed.

  9. @max-mapper max-mapper revised this gist Jan 8, 2015. 3 changed files with 30 additions and 1 deletion.
    22 changes: 22 additions & 0 deletions 0.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    # Hoisting by example

    Below are many examples of hoisting behavior in JavaScript. Ones marked as working successfuly print 'hi!' without errors.

    The recommended way to run these if you want to play around (recommended) is to save them as e.g. `a.js` on your computer and execute them with `node a.js`

    ### Notes on hoisting

    **(I may be using incorrect terms below, please forgive me)**

    When JS is parsed, a first pass is done over each scope, and function definitions are immediately discovered. An example of a function definition is `function foo() {}`. When a function is declared like this, with a name, that name becomes available to the entire scope when the code in that scope is executed.

    A crude timeline of how JS gets executed:

    1. Parse the scope and detect all function definitions
    2. Execute the code top-to-bottom with all functions found in step 1 available as variables

    This behavior is called 'hoisting' because it is almost like the function definitions has been 'hoisted' up to the top of the function.

    Assignments are not evaluated until the code is executed. An example of an assignment is `var foo = function() {}` or `var foo = function foo() {}`. A function must not be associated with an assignment in order for it to be hoisted (see example `L`)

    Wrapping a function in parenthesis (`()`) is a quick way to create a new scope. I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.
    2 changes: 1 addition & 1 deletion a.js
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,4 @@ function sayHi() {
    console.log('hi!')
    }

    sayHi()
    sayHi()
    7 changes: 7 additions & 0 deletions l.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // L (does not work)

    sayHi()

    var x = function sayHi() {
    console.log('hi!')
    }
  10. @max-mapper max-mapper revised this gist Jan 8, 2015. 12 changed files with 71 additions and 88 deletions.
    7 changes: 7 additions & 0 deletions a.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // A (works)

    function sayHi() {
    console.log('hi!')
    }

    sayHi()
    7 changes: 7 additions & 0 deletions b.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // B (works)

    sayHi()

    function sayHi() {
    console.log('hi!')
    }
    7 changes: 7 additions & 0 deletions c.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // C (works)

    var sayHi = function() {
    console.log('hi!')
    }

    sayHi()
    7 changes: 7 additions & 0 deletions d.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // D (does not work)

    sayHi()

    var sayHi = function() {
    console.log('hi!')
    }
    7 changes: 7 additions & 0 deletions e.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // E (does not work)

    (function sayHi() {
    console.log('hi!')
    })

    sayHi()
    7 changes: 7 additions & 0 deletions f.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // F (does not work)

    sayHi()

    (function sayHi() {
    console.log('hi!')
    })
    5 changes: 5 additions & 0 deletions g.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    // G (works)

    (function sayHi() {
    console.log('hi!')
    })()
    5 changes: 5 additions & 0 deletions h.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    // H (works)

    (function() {
    console.log('hi!')
    })()
    5 changes: 5 additions & 0 deletions i.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    // I (works)

    var sayHi = (function() {
    console.log('hi!')
    })()
    88 changes: 0 additions & 88 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -1,88 +0,0 @@
    // JS hoisting by example
    // Do you fully understand each one?

    // A (works)

    function sayHi() {
    console.log('hi!')
    }

    sayHi()

    // B (works)

    sayHi()

    function sayHi() {
    console.log('hi!')
    }

    // C (works)

    var sayHi = function() {
    console.log('hi!')
    }

    sayHi()

    // D (does not work)

    sayHi()

    var sayHi = function() {
    console.log('hi!')
    }

    // E (does not work)

    (function sayHi() {
    console.log('hi!')
    })

    sayHi()

    // F (does not work)

    sayHi()

    (function sayHi() {
    console.log('hi!')
    })

    // G (works)

    (function sayHi() {
    console.log('hi!')
    })()

    // H (works)

    (function() {
    console.log('hi!')
    })()

    // I (works)

    var sayHi = (function() {
    console.log('hi!')
    })()

    // J (works)

    var sayHi = (function() {
    console.log('hi!')
    })

    sayHi()

    // K (does not work)

    sayHi()

    var sayHi = (function() {
    console.log('hi!')
    })

    // editors note: because I write JS without semicolons I would
    // never actually begin lines with ( in actual code

    7 changes: 7 additions & 0 deletions j.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // J (works)

    var sayHi = (function() {
    console.log('hi!')
    })

    sayHi()
    7 changes: 7 additions & 0 deletions k.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    // K (does not work)

    sayHi()

    var sayHi = (function() {
    console.log('hi!')
    })
  11. @max-mapper max-mapper created this gist Jan 8, 2015.
    88 changes: 88 additions & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    // JS hoisting by example
    // Do you fully understand each one?

    // A (works)

    function sayHi() {
    console.log('hi!')
    }

    sayHi()

    // B (works)

    sayHi()

    function sayHi() {
    console.log('hi!')
    }

    // C (works)

    var sayHi = function() {
    console.log('hi!')
    }

    sayHi()

    // D (does not work)

    sayHi()

    var sayHi = function() {
    console.log('hi!')
    }

    // E (does not work)

    (function sayHi() {
    console.log('hi!')
    })

    sayHi()

    // F (does not work)

    sayHi()

    (function sayHi() {
    console.log('hi!')
    })

    // G (works)

    (function sayHi() {
    console.log('hi!')
    })()

    // H (works)

    (function() {
    console.log('hi!')
    })()

    // I (works)

    var sayHi = (function() {
    console.log('hi!')
    })()

    // J (works)

    var sayHi = (function() {
    console.log('hi!')
    })

    sayHi()

    // K (does not work)

    sayHi()

    var sayHi = (function() {
    console.log('hi!')
    })

    // editors note: because I write JS without semicolons I would
    // never actually begin lines with ( in actual code