Skip to content

Instantly share code, notes, and snippets.

View domfarolino's full-sized avatar

Dominic Farolino domfarolino

View GitHub Profile
@domfarolino
domfarolino / closure1.js
Created September 23, 2016 20:16
1st example explaining closures to Pat
var outerFunction = function(outerFunctionState) {
var innerFunction = function() {
console.log("Snapshot of the outerFunction's state is: " + outerFunctionState);
}
return innerFunction;
}
var generatedFunction1 = outerFunction(5);
@domfarolino
domfarolino / closure2.js
Created September 23, 2016 20:28
2nd example explaining closures to Pat
var outerFunction = function(outerFunctionState) {
var innerFunction = function() {
console.log("Time difference: " + (Date.now() - outerFunctionState)/1000);
}
return innerFunction;
}
var generatedFunction1 = outerFunction(Date.now());
@domfarolino
domfarolino / closure3.js
Created September 23, 2016 20:32
3rd example explaining closures to Pat
var stopWatchBuilder = function() {
var outerFunctionState = Date.now();
var innerFunction = function() {
console.log("Time difference: " + (Date.now() - outerFunctionState)/1000);
}
return innerFunction;
}

The point of a closure is to create an outer function that can act like a factory. This factory function produces other smaller functions (an inner function inside the outer factory function). Now before I go on, let's remember that the inner function (against intuition and assisted by the language itself) IS TOTALLY allowed to safely use the local state of the outer function. This works properly even when the outer function's state is removed from the stack, and disappears.

This is the key to closures, and to take proper advantage of it we really only want to call the factory function (outer function) when we want to produce an inner function that depends on a local state that the outer function provides. So let's use a suuuppper simple example.

Consider this JavaScript code:

var outerFunction = function(outerFunctionState) {

  var innerFunction = function() {
@domfarolino
domfarolino / EventFlow.md
Last active July 11, 2024 12:53
JavaScript Event Flow - A better understanding

This gist is deprecated and now exists here

This article is intended to further your knowledge of the various phases a DOM event goes through.

Great resources to refer to:

TL;DR

@domfarolino
domfarolino / softBindPolyfill.js
Created November 14, 2016 00:48
YDKJS Soft Bind Polyfill
/**
* The softBind "polyfill" is kind of like .bind(..) hard binding
* however it is slightly more flexible in that it can allow for
* `this` overrides with implicit, explicit, and `new` bindings.
* The default .bind(..) is less flexible only allows `this` overrides
* in situations where `new` is used.
*
* To use it, you pass in some default value for `this`. This value
* will only be used if the value of `this` at runtime is the global
* `window` object, or undefined (possibly strict mode). This means
@domfarolino
domfarolino / lexThis.js
Created November 28, 2016 05:00
Simple es6 lexical this vs that=this/.bind(...) example
function CoolObject() {
var that = this;
// Allows us to use lexical this as opposed to .bind or that = this trick
this.coolPromise = new Promise((resolve, reject) => {
console.log(this === that);
setTimeout(() => {
resolve(10);
}, 2000);
});
@domfarolino
domfarolino / asyncForEach.js
Created November 28, 2016 16:20
Demonstrating how asynchronous code can let the browser render the UI in between propagated async callbacks
const array = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
function handleArrayValue(v) {
console.log(`Handling ${v}`);
for (let i = 0; i < 15000; ++i) {
for (let j = 0; j < i; ++j) {
// Nothing!
}
}
}
class CoolCard extends HTMLElement {
constructor() {
// MUST to allow HTMLElement interface to set
// itself up so we can take advantage of it
super();
}
connectedCallback() {
// Every time a cool-card gets inserted into a
// document this asynchronous callback gets called
<cool-card>
<h2 slot="card-header">Card Header</h2>
<p slot="card-body">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
<p slot="card-author">
<a href="https://twitter.com/domfarolino">By domfarolino</a>
</p>
</cool-card>