Skip to content

Instantly share code, notes, and snippets.

@langolf

langolf/index.md

Last active March 6, 2024 22:16
Download ZIP

Revisions

  1. langolf revised this gist Mar 6, 2024. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,3 +18,5 @@
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.

    For an in-depth explanation, do check out his article on Medium.
  2. langolf revised this gist Mar 6, 2024. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,3 +12,9 @@
    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
    2. There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied:
    - If the new keyword is used when calling the function, this inside the function is a brand new object.
    - If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
    - If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
  3. langolf revised this gist Mar 6, 2024. 1 changed file with 0 additions and 7 deletions.
    7 changes: 0 additions & 7 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,10 +12,3 @@
    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
    2. There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied:
    - If the new keyword is used when calling the function, this inside the function is a brand new object.

    - If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
    - If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
  4. langolf revised this gist Mar 6, 2024. No changes.
  5. langolf revised this gist Mar 6, 2024. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,10 +3,19 @@
    ## Questions

    1. Explain event delegation
    2. Explain how this works in JavaScript

    ## Answers

    1. Explain event delegation
    Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
    2. There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied:
    - If the new keyword is used when calling the function, this inside the function is a brand new object.

    - If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
    - If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
  6. langolf revised this gist Mar 6, 2024. 1 changed file with 8 additions and 14 deletions.
    22 changes: 8 additions & 14 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,12 @@
    # Explain event delegation
    # JavaScript

    Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
    ## Questions

    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
    1. Explain event delegation

    # Explain how this works in JavaScript
    ## Answers

    There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied:

    - If the new keyword is used when calling the function, this inside the function is a brand new object.
    - If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
    - If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
    For an in-depth explanation, do check out his article on Medium.
    1. Explain event delegation
    Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
  7. langolf revised this gist Mar 6, 2024. 1 changed file with 18 additions and 1 deletion.
    19 changes: 18 additions & 1 deletion index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,18 @@
    ‎‎​
    # Explain event delegation

    Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:

    - Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
    - There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

    # Explain how this works in JavaScript

    There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied:

    - If the new keyword is used when calling the function, this inside the function is a brand new object.
    - If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
    - If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
    - If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
    - If multiple of the above rules apply, the rule that is higher wins and will set the this value.
    - If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
    For an in-depth explanation, do check out his article on Medium.
  8. langolf created this gist Mar 6, 2024.
    1 change: 1 addition & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​